Next.js文件路由问题：如何将mail.js改为index.js且保留/posts/[id]/mail路径

Next.js 原生Pages Router（你当前使用的基于文件结构的路由系统）默认采用约定式路由规则，文件结构和访问路径严格绑定：

• pages/posts/[id]/index.js 固定对应路由 /posts/[id]
• pages/posts/[id]/mail.js 固定对应路由 /posts/[id]/mail
  因此无法直接将[id]目录下的index.js映射到带/mail后缀的路径，原生不支持该无配置的映射需求。

如果一定要实现「将mail.js改为index.js、同时保留访问路径为/posts/[id]/mail」的需求，可以通过Next.js内置的重写配置实现，操作步骤如下：

1. 将[id]目录下的mail.js重命名为index.js，此时/posts/[id]路径可正常访问，/posts/[id]/mail会返回404
2. 在项目根目录的next.config.js文件中添加如下重写规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/posts/:id/mail',
        destination: '/posts/:id',
      },
    ]
  },
}

module.exports = nextConfig

3. 重启Next.js开发服务即可生效

效果说明 #

• 用户访问/posts/[id]/mail时，浏览器地址栏URL不会发生变化，仍然保留/mail后缀
• 内部会将请求转发到/posts/[id]，返回index.js的页面内容
• 直接访问/posts/[id]也可正常返回内容，解决了之前无index.js时的404问题

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