如何让静态NextJS网站的真实路径与图片路径正常工作？

问题根源拆解 #

• 刷新/手动输入URL出现404：静态导出后，Next.js生成的路由文件是/about/index.html（开启trailingSlash时）或/about.html（默认状态），但服务器不会自动将/about映射到对应文件，导致404。
• 开启trailingSlash后图片加载失败：图片用了相对路径（比如./images/img.jpg），在/about/页面下会被解析为/about/images/img.jpg，而实际图片存储在根目录的/images/文件夹中。

方案一：保留trailingSlash，修正图片路径 #

1. 统一用绝对路径引用图片
   不管是普通<img>标签还是Next.js的<Image>组件，图片路径都以/开头，强制从网站根目录加载：

   // 普通img标签写法
   <img src="/images/img.jpg" alt="示例图片" />
   
   // Next.js Image组件写法
   import Image from 'next/image';
   <Image src="/images/img.jpg" alt="示例图片" width={300} height={200} />
   

2. 配置服务器支持目录路由
   以Nginx为例，在配置文件中添加规则，让服务器自动寻找对应目录下的index.html：

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

   这样访问/about会自动跳转到/about/index.html，刷新或手动输入URL都能正常加载，同时图片会从根目录的/images/读取。

方案二：关闭trailingSlash，通过服务器配置解决404（更推荐） #

1. 移除next.config.js中的trailingSlash配置
   保持默认的trailingSlash: false，静态导出后每个路由会生成about.html这类单独的HTML文件。
2. 配置服务器路由重写
   以Nginx为例，添加规则让服务器自动匹配.html文件，或回退到主入口处理客户端路由：

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

   这个配置会优先找当前路径的文件，找不到就找对应.html文件，再找不到就交给Next.js的客户端路由处理，既解决了404问题，又不会影响图片的相对/绝对路径引用。

额外注意 #

• 静态导出时确保next export命令生成的静态文件中，images文件夹处于根目录，不要嵌套在路由文件夹里。
• 如果使用Next.js 13+的App Router，静态导出需要确保路由组件都是静态渲染（无动态数据请求），否则可能导出不完整。

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