Next.js动态路由页面public文件夹静态图片加载失败问题

这个路径拼接错误本质是资源引用使用了相对路径，或是Next.js配置里的资源基础路径设置有误，导致嵌套动态路由下解析资源地址时，当前路由层级被自动拼接到了资源路径前面，和public目录下的文件夹命名、组件引入位置没有关系。

按顺序排查即可解决：

• 全局检查所有静态资源的引用写法，所有存放在public目录下的资源，引用时必须以/开头写绝对路径，禁止写./或者不带前缀的相对路径。比如要引用public下的logo.png，正确写法是<img src="/logo.png" />，如果写成<img src="logo.png" />或者<img src="./logo.png" />，在/register/confirmation/xxx这种两层以上的嵌套路由下，浏览器会自动把当前路由路径拼接到资源地址前面，就会出现你看到的错误路径。
• 打开项目根目录的next.config.js配置文件，检查assetPrefix配置项：如果没有特殊部署需求直接删掉这个配置留空即可（默认值为空，代表从站点根路径加载资源）；如果确实需要配置资源前缀，值必须以/开头，绝对不能写assetPrefix: '.'这种相对路径值，这是嵌套路由下资源路径错位的高发原因。
• 如果你的项目需要部署在站点子路径下，不要用assetPrefix配置，改用basePath配置项，值同样要以/开头、不能以/结尾，比如部署在/app子路径下就写basePath: '/app'，配置后资源引用依然保持/开头的根路径写法即可，Next.js会自动处理路径拼接，不会出现层级错位。
• 如果项目自定义了_document.js文件，检查文件里引入的脚本、样式、favicon等资源路径，同样要使用/开头的根路径写法，不能用相对路径。

修复后先删掉项目根目录下的.next缓存文件夹，重新执行npm run dev启动服务，访问出问题的动态路由页面，打开浏览器开发者工具的网络面板，查看图片资源的请求路径：如果路径是/_next/static/media/xxx或者/你的图片名.png，前面没有多余的/register/confirmation前缀，就说明修复成功了。

提示：你之前尝试在public目录下新建Media、static、images文件夹、调整导入路径层级的操作都是无效排查，这个问题和public内部的目录结构没有关系，不需要在这部分浪费时间。

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