Deploying a Static Next.js Site on Hostinger

The Performance Edge with Next.js

In the modern web ecosystem, performance is pivotal. Next.js has rapidly risen as a foremost choice among developers seeking to craft blazing-fast web applications. Why? Next.js doesn't just build websites; it refines web performance.

Why Choose Next.js and what Static Exports is?

Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.

When running next build, Next.js generates an HTML file per route. By breaking a strict SPA into individual HTML files, Next.js can avoid loading unnecessary JavaScript code on the client-side, reducing the bundle size and enabling faster page loads.

Since Next.js supports this static export, it can be deployed and hosted on any web server that can serve HTML/CSS/JS static assets

With static exporting support in Next.js, you're not bound to a specific server environment. It can reside comfortably on any hosting service capable of delivering HTML/CSS/JS static files.

When your project is done in your next.config.js, make sure to have:

/**

• @type {import('next').NextConfig} */ const nextConfig = { output: 'export',

}

Handling Images

The powerful Image component of Next.js offers optimized image loading. But, on platforms like Hostinger, it doesn't work identically as on Vercel. The solution? The sharp npm package. Simply install it as a dependency:

npm install sharp

You don’t need to make any extra configurations. sharp will autonomously handle the required optimizations.

Update your next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
output: 'export',
images: {
unoptimized: true
}
}

module.exports = nextConfig;

Building and Exporting Your Site

Run:
npx run build

Then, using:
npx next export

You’ll generate the out directory, containing your static website.

Preparing for Hostinger Deployment

Before uploading to Hostinger, ensure to add the following .htaccess file in your out folder:

# Disable directory indexes and MultiViews
Options -Indexes -MultiViews
# Prevent mod_dir appending a slash to directory requests
DirectorySlash Off
RewriteEngine On
# Rewrite /foo to /foo.html if it exists
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI}.html -f
RewriteRule !\.\w{2,4}$ %{REQUEST_URI}.html [L]
# Otherwise, rewrite /foo to /foo/index.html if it exists
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI}/index.html -f
RewriteRule !\.\w{2,4}$ %{REQUEST_URI}/index.html [L]

this provide configuration details for websites hosted on Apache web servers.

Deploying on Hostinger

With the out directory prepared, head over to your Hostinger control panel:

Use the file manager or an FTP client.
Upload the contents of the out directory to the public_html folder.
Ensure your domain's DNS settings are correctly pointing to Hostinger.
And voila! Your high-performance Next.js site is now live on Hostinger, ready to serve content at blazing speeds.