如何使用NextJS重定向功能实现路由不区分大小写

NextJS 11的Pages路由默认大小写敏感，可通过以下两种方案实现路由不区分大小写的需求，且完全兼容ISG能力：

方案1：通过next.config.js的rewrites/redirects实现（推荐，无业务代码侵入） #

该方案无需修改现有页面逻辑，仅需修改配置即可完成适配：

• 若需要保留用户输入的原始URL（大小写任意），使用rewrites做内部路由转发
• 若希望统一URL规范、避免SEO重复内容，使用redirects做301跳转，自动将大写路径跳转至小写路径

配置示例如下：

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        // 正则匹配所有路径中presenter的大小写变体，支持任意层级slug
        source: '/:p([Pp][Rr][Ee][Ss][Ee][Nn][Tt][Ee][Rr])/:slug*',
        // 转发到全小写的对应路由
        destination: '/presenter/:slug*',
      },
      // 若需要全站点所有路由都不区分大小写，可使用以下通用配置（排除静态资源路径）
      // {
      //   source: '/:path((?!_next|static|favicon.ico).*)',
      //   destination: '/:path*',
      //   missing: [
      //     { type: 'header', key: 'x-nextjs-lowercase' },
      //   ],
      // }
    ]
  },
  // 如果你需要用跳转而非内部转发，替换上面的rewrites为redirects配置即可
  // async redirects() {
  //   return [
  //     {
  //       source: '/:p([Pp][Rr][Ee][Ss][Ee][Nn][Tt][Ee][Rr])/:slug*',
  //       destination: '/presenter/:slug*',
  //       permanent: true, // 301跳转，利于SEO缓存
  //     },
  //   ]
  // }
}

方案2：自定义404页面兜底 #

如果配置rewrites不符合你的使用场景，可在自定义404页面中添加路由处理逻辑：

• 捕获404请求的路径，将路径转换为全小写
• 判断小写路径是否匹配现有路由规则，若匹配则做对应跳转
• 该方案适合需要自定义更多异常路由处理逻辑的场景

注意事项 #

• 所有方案最终都会将请求路由到你已创建的/pages/presenter[[..slug]].tsx页面，原有ISG的生成规则、缓存逻辑完全不受影响
• 建议业务代码中所有内部跳转统一使用小写路径，避免出现不必要的转发或跳转开销

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