Next.js如何将路由首页映射到动态页面并合并重复文件？

给你两种可行的方案，都能实现代码复用，不用维护两份相同的代码：

方案1：用Next.js重写规则路由到动态页 #

在项目根目录的next.config.js里配置rewrites，把/[site]/（首页）的请求转发到动态路由页，同时给id参数设一个默认标识：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/:site/',
        destination: '/:site/home', // 用"home"作为首页对应的id值，你可以换成任意字符串
      },
    ];
  },
};

之后在[id].js里，获取到id参数后，如果是home，就按照原首页的逻辑处理（因为你原本代码就一致，其实直接用就行）。如果是静态生成模式，记得在getStaticPaths里把home这个路径加入到静态生成的列表中，或者开启fallback: true来支持动态路径。

方案2：让index.js作为动态页的入口（最简方案） #

不用删除index.js，而是让它完全复用[id].js的组件和数据获取逻辑，相当于把index.js变成一个空壳：

// pages/[site]/index.js
// 直接导入动态页的组件
import DynamicPage from './[id]';

export default DynamicPage;

// 复用动态页的getStaticProps（如果用的是服务端渲染就换成getServerSideProps）
export async function getStaticProps(context) {
  // 给id传一个默认值，比如"home"，然后调用动态页的getStaticProps
  const dynamicProps = await import('./[id]').then(mod => 
    mod.getStaticProps({
      ...context,
      params: {...context.params, id: 'home'}
    })
  );
  return dynamicProps;
}

这种方式不需要改任何配置，index.js只是个转发层，所有核心逻辑都在[id].js里，完全避免了代码重复。

内容的提问来源于stack exchange，提问作者Matías González