Next.js中如何为同一页面组件配置多个不同访问路由？

Next.js 官方提供了两种无侵入的实现方式，不需要修改原有组件逻辑，分别适配不同使用场景：

方案1：使用 Rewrites 统一配置（推荐） #

Rewrites 是 Next.js 原生支持的路径映射能力，会将用户访问的源路径代理到目标路径，地址栏不会发生跳转，用户完全无感知，适合多路由映射的批量管理场景。

你只需要在项目根目录的 next.config.js 中添加如下配置即可：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/a-propos',
        destination: '/about'
      }
    ]
  }
}

module.exports = nextConfig

配置完成重启项目后，访问 /about 和 /a-propos 都会渲染 pages/about/index.js 的内容，该配置对 Pages Router 和 App Router 都生效。

方案2：直接导出目标组件（适合少量路由场景） #

如果只有个别路由需要复用组件，不需要改配置文件，也可以直接在路由目录下新建对应路径的入口文件，直接导出已有组件即可：

• 若使用 Pages Router：在 pages 目录下新建 a-propos 文件夹，新增 pages/a-propos/index.js 文件，写入如下内容：

export { default } from '../about/index'

• 若使用 App Router：新建 app/a-propos/page.js，写入如下内容：

export { default } from '../about/page'

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