Anjanesh Lekshminarayanan




Exporting a NextJS app with correct static page routes on the server

Anjanesh Lekshminarayanan's photo
Anjanesh Lekshminarayanan
·Jan 27, 2022·

1 min read

When exporting a NextJS application ("build": "next build && next export") to the default out folder, the static pages get exported to .html files.

The issue with this is, when navigating to from the home page ( it works well but if you hit a hard refresh then you'll get a 404.

That's because NextJS converted the static pages to .html (about.html) which is what we upload to the server. So the link becomes and not

One solution is to add this to next.config.js :

module.exports = {
  trailingSlash: true,

This would create a folder with the route name and have an index.html file in this folder. But I don't like the fact that trailingSlash: true or exportTrailingSlash: true, creates a folder with a single index.html in it for every route I have. That would look cluttersome if we had like 25 folders for 25 route pages.

If you upload the exported out folder to a server that supports URL rewrites like Apache httpd or nginx you can create re-writes for your routes. More work, but works well.

Create a file called .htaccess in the public folder and add this :

RewriteEngine On

RewriteRule ^about$ about.html

Now when you goto it'll fetch

Share this