Next.js动态路由场景下如何基于路径动态加载不同独立应用？

报错原因说明 #

你之前调整目录后出现报错，是因为[app1].js、[app2].js属于动态路由命名规范，方括号包裹的内容是动态参数名，Next.js 不允许在同一父级路由下定义多个参数名不同的动态路由，因此抛出冲突错误。

可行方案 #

这里提供两种符合你SEO、包体积要求的实现方案：

方案一：保留原通用动态路由结构，按需拆分代码

保留pages/[language]/[app-slug].js的目录结构，通过动态导入实现不同应用的代码拆分，不会全量打包所有20个应用的代码：

1. 先在getStaticPaths中返回所有已知的静态路径组合

export async function getStaticPaths() {
  // 替换为你实际支持的语言列表
  const supportedLanguages = ['zh', 'en', 'ja']
  // 替换为你20个应用对应的slug列表
  const appSlugList = ['app1', 'app2', 'app3', /* 其余17个应用slug */]

  const paths = supportedLanguages.flatMap(lang => {
    return appSlugList.map(slug => ({
      params: { language: lang, 'app-slug': slug }
    }))
  })

  return { paths, fallback: false }
}

2. 在页面组件内根据app-slug参数动态导入对应应用的组件，开启SSR支持保证静态生成符合SEO要求：

import dynamic from 'next/dynamic'

// 配置每个slug对应应用的动态导入，ssr设为true保证静态生成时渲染完整内容
const AppMap = {
  app1: dynamic(() => import('../../components/apps/app1'), { ssr: true }),
  app2: dynamic(() => import('../../components/apps/app2'), { ssr: true }),
  // 其余18个应用按同样规则配置
}

export async function getStaticProps({ params }) {
  // 可根据当前language和app-slug拉取对应应用的静态数据
  const pageData = await fetchAppData(params.language, params['app-slug'])
  return { props: { pageData, appSlug: params['app-slug'] } }
}

export default function AppPage({ appSlug, pageData }) {
  const CurrentApp = AppMap[appSlug]
  return <CurrentApp {...pageData} />
}

该方案下每个路径静态生成时只会打包对应应用的代码，没有冗余体积，页面静态内容完整符合SEO要求。

方案二：创建固定名称的独立页面文件

直接去掉动态路由的方括号，为20个应用创建独立的固定名称页面文件，目录结构如下：

pages/
  [language]/
    app1.js
    app2.js
    ...
    app20.js

每个应用的页面文件独立存放代码，各自实现自己的getStaticProps和getStaticPaths即可，示例app1.js的getStaticPaths配置：

export async function getStaticPaths() {
  const supportedLanguages = ['zh', 'en', 'ja']
  return {
    paths: supportedLanguages.map(lang => ({ params: { language: lang } })),
    fallback: false
  }
}

该方案下应用之间代码完全隔离，打包自动拆分，不需要额外实现动态导入逻辑，维护成本更低。

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