Next export static html

[zenith tartan]

How to setup next js so when i use static html that generated using next export, when user access dynamic route and refresh the page, it will stay in that route instead of show root index.html

[real monolith]

Hi @zenith tartan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To set up Next.js with static HTML generated using next build, and ensure that when a user accesses a dynamic route and refreshes the page, it stays on that route instead of showing the root index.html, you can configure your web server to handle the routing. Here's an example using Nginx:

1. Generate the static export using next build. This will create the out folder with the static files.
2. Configure Nginx to serve the static files and handle the routing. Create an nginx.conf file with the following content:

server {
  listen 80;
  server_name yourdomain.com;
 
  root /path/to/your/out/folder;
 
  location / {
    try_files $uri $uri/ /index.html;
  }
 
  location /blog/ {
    rewrite ^/blog/(.*)$ /blog/$1.html break;
  }
 
  error_page 404 /404.html;
  location = /404.html {
    internal;
  }
}

Replace yourdomain.com with your domain name and /path/to/your/out/folder with the path to the out folder generated by next build.

In this example, the Nginx configuration is set up to handle a /blog route with dynamic routes like /blog/post-1.html and /blog/post-2.html. You can adjust the configuration to match your dynamic routes.

For more information on static exports, refer to the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/deploying/static-exports).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: