Next.js 12如何定义无斜杠的动态路由（如/product1232312321）？

Next.js 12的文件系统路由默认不支持/productxxx这种无斜杠的动态格式，不过可以通过以下方式直接实现：

• 保留现有文件结构：pages/product/[id].js（SSR组件放在这里，正常接收id参数）
• 在next.config.js里用rewrites规则做内部路由映射，替代之前的redirect：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/product:slug',
        destination: '/product/:slug',
      },
    ];
  },
};

这个规则会把所有/product后直接跟任意字符的请求（比如/product1232312321），内部转发到/product/:slug，你的[id].js组件就能正常拿到对应的参数，而且URL不会发生跳转，完全符合需求。

你之前的redirect方案失效，大概率是配置里的空格问题（你写的source: '/product /:slug'多了空格），更关键的是redirect是外部跳转，不如rewrite的内部映射适合这种场景。

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