Next.js处理动态路由避免冲突及减少重复路由文件维护的方案咨询

方案1：抽取公共逻辑（零配置、兼容性最强） #

不需要修改现有路由结构，也不需要调整配置，仅需将重复逻辑抽离为公共模块即可解决多文件同步维护问题：

1. 将[postSlug].js的页面组件、getStaticProps/getServerSideProps逻辑全部抽离为独立公共文件，例如：
   • 公共页面组件：components/PostDetail.js
   • 公共数据获取逻辑：utils/postDetailProps.js
2. 三个分类目录下的[postSlug].js仅做公共逻辑引用，无需写业务代码，示例如下：

// analysis/[postSlug].js、opinion/[postSlug].js、post/[postSlug].js 内容完全一致
import PostDetail from '../../components/PostDetail'
export { getStaticProps } from '../../utils/postDetailProps'
export default PostDetail

后续修改逻辑仅需更新公共文件，无需同步三个路由文件，维护成本为0。

方案2：配置路由重写（直接使用最初的动态目录结构） #

根目录[policy].js和[postType]动态目录的冲突本质是Next.js默认路由匹配优先级规则导致的，可以通过next.config.js配置重写规则强制指定匹配逻辑，直接复用你最初的pages/[postType]/[postSlug].js结构，无需单独创建三个分类目录：

1. 恢复目录结构为你最初的版本：

|- [postType]
|  |- [postSlug].js
|- index.js
|- login.js
|- [policy].js
|- _documents.js

2. 在项目根目录的next.config.js中添加重写规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        // 仅匹配指定的三个文章分类前缀
        source: '/:postType(analysis|opinion|post)/:postSlug',
        destination: '/[postType]/[postSlug]',
      },
    ]
  },
}

module.exports = nextConfig

该规则优先级高于Next.js默认路由匹配逻辑，不会和[policy].js的单级动态路由产生冲突。

内容的提问来源于stack exchange，提问作者Egoi Cantero Viqueira