Next.js如何实现index页与指定端点共用同一组件且无需重定向

以下分别针对Next.js两种常用路由模式给出可直接落地的实现方案，均不会触发重定向，两个路径可同时正常访问且地址栏路径保持不变。

Pages Router 实现方案（适用于有pages/index.js的场景） #

• 方法1：快速复用组件
  直接在pages目录下新建someEndpoint.js文件，内容直接导入导出根路径的首页组件即可，无需重复写组件逻辑：

  // pages/someEndpoint.js
  export { default } from './index'
  

  该方案无需修改任何配置，重启服务即可生效，适合映射路径较少的场景。

• 方法2：批量路径映射
  如果有大量这类路径需要指向首页，可在next.config.js中配置重写规则，服务端自动做路径映射，无需逐个新建文件：

  // next.config.js
  module.exports = {
    async rewrites() {
      return [
        {
          source: '/someEndpoint',
          destination: '/',
        },
        // 有其他映射需求继续往数组添加即可
      ]
    },
  }
  

  配置完成后重启Next.js服务生效。

App Router 实现方案（适用于Next.js 13+ App路由场景） #

• 方法1：快速复用组件
  在app目录下新建someEndpoint文件夹，再创建page.js文件，内容直接导入导出根路由的page组件：

  // app/someEndpoint/page.js
  export { default } from '../page'
  

• 方法2：批量路径映射
  和Pages路由方案一致，直接在next.config.js中配置rewrites规则即可。

注意：如果首页组件内有依赖pathname做逻辑判断的代码，需要额外兼容两个路径的情况，避免出现异常。

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