Next.js中如何将两类动态路由路径指向同一个页面

解决方法 #

你可以通过两种方案实现需求，优先推荐可选动态段方案，更符合Next.js原生设计，不需要额外配置rewrite：

方案1：使用可选动态段（推荐） #

Next.js 10+版本已支持可选动态段特性，直接调整页面文件/文件夹命名即可实现参数可选：

• 若使用App Router：将页面文件夹命名为 app/[[language]]/[type]/[name]，双层方括号代表该动态参数为可选值
• 若使用Pages Router：将页面文件命名为 pages/[[language]]/[type]/[name].js

在页面组件内获取参数时直接配置默认值即可：

// App Router 示例
export default function DetailPage({ params }) {
  // 缺省language时默认赋值为en
  const { language = 'en', type, name } = params
  // 业务逻辑
}

// Pages Router 示例
export default function DetailPage({ query }) {
  const { language = 'en', type, name } = query
  // 业务逻辑
}

方案2：正确配置rewrite规则 #

如果偏好使用rewrite实现，调整next.config.js内的规则写法和匹配顺序即可解决之前的报错：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      // 短路径规则写在前面，优先级更高
      {
        source: '/:type/:name',
        destination: '/en/:type/:name',
      },
      // 带language的长路径规则放在后面
      {
        source: '/:language/:type/:name',
        destination: '/:language/:type/:name',
      }
    ]
  }
}

module.exports = nextConfig

之前的配置报错通常是因为规则顺序颠倒、动态参数占位符写法不符合Next.js要求导致的，按上述写法调整即可正常生效。

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