Next.js apps require a Node.js server for full dynamic features, which Hostinger’s shared plans do not provide. Hostinger shared hosting only supports static sites, so you must export your Next.js app as a static site before deploying. In practice, this means using Next.js’s “static export” (output: 'export'), building the site to an out folder, and uploading those files to Hostinger’s public_html (or subdomain) directory. The high-level steps are:
- Enable static export in Next.js: In your next.config.js (or next.config.mjs), set output: "export". This tells Next.js to generate a purely static site on build. For example: (If your site will live in a subfolder or custom domain path, set basePath and assetPrefix accordingly so links point correctly.) This replaces the old next export approach; as of Next 13+, static export is done via output: 'export'.
```
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
// If deploying to a subfolder or custom domain, you can set:
// basePath: '/subfolder',
// assetPrefix: '/subfolder/',
};
module.exports = nextConfig;
```
- Build the app: Run npm run build (or npx next build). This produces an out/ directory containing all static HTML, CSS, and JS for your pages. (The Next.js docs explain that after next build, the out folder holds your site: e.g. /out/index.html, /out/404.html, and any dynamic pages as .html files.) Note: Dynamic features (like API routes, server-side props, or unsupported dynamic imports) won’t work – everything must be pre-renderable.
- Prepare Hostinger hPanel: Log in to your Hostinger account’s hPanel. Make sure your domain or subdomain is set up and pointing to Hostinger. If you want the site under a subfolder (e.g. yourdomain.com/admin), create a subdomain or folder accordingly in hPanel.
- Upload the static files: Open File Manager in hPanel and navigate to the folder where your site will live (usually public_html/ for the main domain or a subfolder/subdomain you created). Then upload or copy all files from your local out/ directory into that folder. For example, if you created a subdomain admin.yourdomain.com that maps to /public_html/admin, put all out/ contents there. (Do not upload the entire project, only the built static files from out/.)
- Add an .htaccess for routing: Hostinger’s servers use Apache, which by default looks for folder names on refresh. Static Next.js pages have .html filenames (e.g. about.html for an /about route), so we need a rewrite rule. In the same folder (e.g. public_html), create a file named .htaccess with these lines: This tells Apache to serve the *.html file when a directory is requested. Without it, refreshing a subpage would return a 404. (In short: Apache will now look for about.html when the URL is /about.)
```
RewriteEngine On
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule !.*\.html$ %{REQUEST_FILENAME}.html [L]
```
- Verify your site: Open your domain or subdomain in a browser. You should see the deployed Next.js site. Test navigating and refreshing pages. If everything was exported correctly, pages should load and links should work. If you encounter 404s on subpages, double-check the .htaccess rules.
Notes and Tips
- Dynamic Routes: Ensure any dynamic routes use getStaticPaths so they are generated at build time. Unsupported features (API routes, SSR, etc.) cannot be used on Hostinger’s shared hosting.
- Environment Variables: Static export does not run server code. Any data from .env must be embedded at build time (e.g. via getStaticProps) or otherwise handled as client-side code.
- SSL and Domain: Hostinger offers a free SSL certificate. After uploading, you can enable SSL in hPanel (under Security > SSL) for your site to serve over HTTPS.
- Base Path (Optional): If your site is served from a subfolder (e.g. yourdomain.com/admin), make sure your basePath/assetPrefix in next.config.js reflects that folder. This ensures links and assets point correctly.
By following these steps – setting output: 'export', building, and copying the out/ files to Hostinger with an appropriate .htaccess – your Next.js 15 (App Router) site will be live on Hostinger’s shared hosting.
Sources: Next.js official static export guide; Hostinger deployment tutorial; StackOverflow advice on Hostinger and .htaccess.