Why does Next.js static export fail when refreshing the page after being deployed on Nginx?

Detailed explanation of the routing failure problem after Next.js static site is deployed to Nginx

After using Next.js static export to deploy to Nginx server, the route fails when refreshing the page and jumps back to the homepage, which is a common problem encountered by many developers. This article will explore the causes and solutions to this problem in depth.

Problem description

Suppose you have created a Next.js project, including a /test route, and configured with static export:

{
  "output": "export"
}

Local development environment (run npm run dev ) access localhost:3000/test displays normally. But after deploying to Nginx, access /test jumps to the homepage. Even if Nginx is configured with 404, jump to the homepage:

location / {
    try_files $uri $uri/ /index.html;
}

This is different from Vue.js' history mode, which usually works properly in similar configurations.

Problem analysis

When the Nginx's try_files directive cannot find the corresponding routed file in the static directory, it will fall back to index.html . This seems to be as expected, as the static export may not generate the static file for the corresponding route. However, the root cause is the difference between Next.js' static export mechanism and client routing processing methods.

Solution

To solve this problem, you need to start from the configuration of Next.js and Nginx:

1. Next.js basePath configuration: If your Next.js application is deployed in a subpath (for example /my-app ), you need to configure basePath in next.config.js :

module.exports = {
  basePath: '/my-app',
}

2. Nginx configuration optimization: Adjust Nginx's try_files instruction to make it handle routing more accurately:

location / {
   try_files $uri $uri/ /my-app/index.html; # If deployed under /my-app}

This will ensure that Nginx correctly points to the index.html file in the deployment directory when the specified routing file cannot be found.

3. Use the server that comes with Next.js: Avoid using Nginx service static files directly. It is recommended to use the server that comes with Next.js and use Nginx as a reverse proxy. In this way, routing processing is done by Next.js server, avoiding the problem of static file matching.

4. Check the generated static files: Make sure that the static export of Next.js has correctly generated all necessary routing files. You can re-export using the next export command and check the generated directory structure.

Through the above method, you can effectively solve the problem of Next.js static export route failure on Nginx, ensuring that your static website can correctly handle all routing requests. Which method to choose depends on your specific deployment environment and requirements. If possible, it is recommended to prioritize the use of Next.js' own server and reverse proxy, which can provide more reliable routing processing.

The above is the detailed content of Why does Next.js static export fail when refreshing the page after being deployed on Nginx?. For more information, please follow other related articles on the PHP Chinese website!