Next.js如何配置rewrites实现@用户名全匹配动态路由重写

你需要补充@username后携带多级路径的重写规则，同时注意Next.js重写规则按数组顺序从上到下匹配、先命中先生效的逻辑，将更具体的长路径规则放在靠前位置，避免被短路径规则提前拦截。

正确配置 #

修改next.config.js中的rewrites配置如下：

async rewrites() {
  return [
    // 匹配@用户下所有多级路径，对应[...catheverything].js全匹配路由
    {
      source: "/@:username/:path*",
      destination: "/user/:username/:path*",
    },
    // 匹配@用户根路径，对应用户首页index.js（原有已生效规则）
    {
      source: "/@:username",
      destination: "/user/:username",
    },
    // 原有单slug文章路由
    {
      source: "/:slug",
      destination: "/post/:slug",
    },
  ];
},

关键说明 #

• 配置中的:path*是Next.js路径匹配通配符，*表示匹配0到多个连续路径段，完全适配[...catheverything].js的全匹配路由规则，路径内容会自动作为路由参数传入页面
• 规则顺序不可调换：带多级路径的用户路由优先级最高，其次是用户根路径路由，最后才是全局单slug文章路由，否则会出现匹配错误
• 修改配置后需要重启Next.js开发/生产服务，新规则才会生效

额外提醒：检查下你的全匹配路由文件名，当前命名为[...catheverything].js，如果是拼写笔误（如预期为[...catchEverything].js或[...catch-everything].js），请确保文件名和路由逻辑一致，否则会触发404。

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