Next.js添加rewrites配置后动态路由无法访问的解决求助

你写的rewrites规则把所有请求（包括动态路由）全转到/app/:path*了，但你的页面组件根本不在app目录里——比如/dashboard/admin/[adminId]/page.tsx对应的路径是/dashboard/admin/:adminId，被rewrite后变成/app/dashboard/admin/:adminId，这个路径下没有对应的组件，自然访问不了。

Next.js专门提供了basePath配置来处理应用部署在子路径的场景，比自己写rewrites靠谱多了，还能自动处理静态资源、路由前缀这些细节。

把你的next.config.js改成这样：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ["image/webp"],
  },
  // 生产环境给所有路由加/app前缀，开发环境用根路径
  basePath: process.env.NODE_ENV === "production" ? "/app" : "",
  publicRuntimeConfig: {
    basePath: process.env.NODE_ENV === "production" ? "/app" : "",
  },
};

module.exports = nextConfig;

这样配置后，生产环境下访问/app/dashboard/admin/1会自动匹配到你根目录下的/dashboard/admin/[adminId]/page.tsx组件，动态路由就能正常工作了，开发环境还是用原来的路径访问，不用改任何代码。

如果硬要保留rewrites，得调整规则，别把现有路由也转走。比如只转发那些没匹配到你现有页面的请求，但这种方式容易出问题，不如用basePath省心：

async rewrites() {
  return [
    {
      source: "/:path*",
      destination: "/app/:path*",
      // 排除已有的路由前缀，避免dashboard、login等路径被错误转发
      has: [
        {
          type: "pathname",
          value: "^/(?!dashboard|login).*$",
        },
      ],
    },
  ];
}

但这种写法需要维护排除规则，后续加新路由还得更新，远不如basePath方便。

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