Fix Page Refresh Issue in Next.js Static Sites

If you're deploying a Next.js app using next export (static site generation) on Hostinger or any Apache server, you might encounter a frustrating issue:

When you navigate to a route like /cookie-policy and refresh the page, you get redirected to the homepage—but the URL still shows /cookie-policy.

This breaks the expected user experience and makes deep linking unreliable.

Let’s walk through why this happens and how to fix it using a custom .htaccess configuration.

The Wrong Approach (for Next.js)

You may come across this .htaccess configuration used for React apps:

<IfModule mod_rewrite.c>
                                        RewriteEngine On
                                        RewriteBase /
                                        RewriteRule ^index\.html$ - [L]
                                        RewriteCond %{REQUEST_FILENAME} !-f
                                        RewriteCond %{REQUEST_FILENAME} !-d
                                        RewriteCond %{REQUEST_FILENAME} !-l
                                        RewriteRule . /index.html [L]
                                        </IfModule>

While this works for React SPAs, it's not ideal for Next.js static sites. Here's what goes wrong:

All routes get rewritten to index.html regardless of actual .html files
Refreshing a page like /cookie-policy loads index.html instead of cookie-policy.html

✅ The Correct .htaccess for Next.js Static Routes

<IfModule mod_rewrite.c>
                                        RewriteEngine On
                                        RewriteBase /

                                        # If the request is for an existing file or directory, serve it
                                        RewriteCond %{REQUEST_FILENAME} -f [OR]
                                        RewriteCond %{REQUEST_FILENAME} -d
                                        RewriteRule ^ - [L]

                                        # Rewrite to the matching .html file for pretty URLs
                                        RewriteRule ^(.*)/$ $1.html [L]
                                        RewriteRule ^(.*)$ $1.html [L]

                                        # Fallback to index.html for unmatched routes
                                        RewriteRule ^.*$ /index.html [L]
                                        </IfModule>

🔍 Explanation:

1. Serve Existing Files and Directories

RewriteCond %{REQUEST_FILENAME} -f [OR]
                                        RewriteCond %{REQUEST_FILENAME} -d
                                        RewriteRule ^ - [L]

Ensures actual files (like style.css) or folders are served directly without rewriting.

2. Rewrite to Corresponding HTML Files

RewriteRule ^(.*)/$ $1.html [L]
                                        RewriteRule ^(.*)$ $1.html [L]

This rewrites clean URLs like /about into about.html.

3. Fallback to index.html

RewriteRule ^.*$ /index.html [L]

Fallback to SPA-like behavior if no file match is found.

✅ When Should You Use This?

Use this method only when you're deploying a static export of your Next.js app (via next export).

If your app uses SSR or API routes, consider using Vercel or a Node.js server instead.

✅ Final Thoughts

Deploying a statically exported Next.js app to Hostinger or any Apache-based hosting requires a little bit of URL rewriting magic. With the right .htaccess config, you can fix page refresh issues and make deep linking work beautifully.

Have you faced similar issues? Or found an even cleaner solution? Let me know — I’d love to hear your take!

🚀 Happy coding!

👨‍💻 Follow me on LinkedIn

Fixing Page Refresh Issue in Next.js Static Sites on Hostinger