Next.js静态导出搭配NGINX：刷新或直接访问URL遇403 Forbidden解决

问题描述 #

使用Next.js的static export（执行next export命令）生成静态文件后，通过NGINX部署生成的out文件夹时，出现以下异常：

• 应用内点击页面链接跳转正常
• 刷新页面或直接访问/about、/projects这类路径时，会返回403 Forbidden错误或显示空白页面

解决方案 #

修改NGINX配置文件，在try_files指令中添加$uri.html，具体配置如下：

try_files $uri $uri/ $uri.html /index.html;

配置逻辑说明 #

NGINX会按照以下顺序查找资源：

1. 匹配请求的原始路径（$uri）
2. 匹配请求路径对应的目录（$uri/）
3. 匹配请求路径对应的.html文件（例如访问/projects时，查找/projects.html）
4. 以上都匹配不到时，回退到SPA的入口文件index.html

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