Next.js 14 App目录下含点的URL处理方案求助

遇到带点的URL（比如mysite.com/product/xxxxx-yyyyyy-zzzzz-3.5kg-id）返回404，大概率是服务器把带点的路径当成静态文件请求，或是路由匹配规则没覆盖到带点的场景，试试下面几个方案：

• 修正服务器转发规则（以Nginx为例）
  服务器默认会优先把带点的路径识别为静态资源（比如把3.5kg-id当成带.id后缀的文件），要确保所有请求都转发到Next.js的入口文件。修改Nginx配置：

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

  重启Nginx后再测试。

• 调整Next.js的重写规则
  如果之前的重写写法不对，在next.config.js里配置精准的重写规则，确保带点的slug被正确匹配：

  module.exports = {
    async rewrites() {
      return [
        {
          source: '/product/:slug*', // *匹配任意字符包括点和斜杠
          destination: '/product/[[...slug]]'
        }
      ]
    }
  }
  

• 确认动态路由文件的命名
  若使用App Router，确保路由文件是app/product/[[...slug]]/page.js；若使用Pages Router，则是pages/product/[[...slug]].js。双层括号的catch-all路由才能匹配包含特殊字符（比如点）的任意路径。

• 调试路由匹配结果
  在页面组件里打印params.slug（App Router）或context.params.slug（Pages Router），确认请求是否真的走到了该路由组件。如果没打印出内容，说明路由根本没匹配上，需要回头检查规则。

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