NextJS应用使用Nginx做静态服务器时动态路由无法访问如何解决

1. someRoute/register访问失败：你当前的try_files规则未配置无后缀路径匹配.html文件的逻辑，访问someRoute/register时Nginx只会查找同名无后缀文件/目录，找不到就直接回退到根目录/index.html，你配置末尾的/register.html是根路径资源，无法匹配someRoute层级的路由，因此无效。
2. 动态路由someRoute/123访问失败：动态路由[id].tsx静态导出后仅生成[id].html模板文件，不存在123.html实体文件，匹配失败后触发回退逻辑跳转至首页。

方案1：前端路由全接管（推荐，适配所有路由场景） #

如果你的NextJS应用路由逻辑统一由前端处理，修改try_files规则，未匹配到静态资源的请求全部回退到根index.html，由NextJS前端路由识别路径渲染对应组件：

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        root  /usr/share/nginx/html;
        include /etc/nginx/mime.types;
        # 新增$uri.html匹配无后缀访问对应html文件，未匹配到的全部回退到根index.html
        try_files $uri $uri.html $uri/ /index.html;
    }
}

修改后重启Nginx即可正常访问所有路由。

方案2：动态路由精准匹配（按需选用） #

如果你需要动态路由请求直接返回对应模板文件，可单独加location规则匹配someRoute下的动态路径：

worker_processes 4;

events { worker_connections 1024; }

http {
    server {
        listen 80;
        root  /usr/share/nginx/html;
        include /etc/nginx/mime.types;
        
        # 匹配someRoute下的数字id动态路由，直接返回[id].html模板
        location ~ ^/someRoute/(\d+)$ {
            try_files $uri $uri.html /someRoute/[id].html =404;
        }
        
        try_files $uri $uri.html $uri/ /index.html;
    }
}

内容的提问来源于stack exchange，提问作者Pelicer