Next.js 13路由组部署后主路由/出现404问题求助

针对你遇到的本地环境根路由/正常指向(marketing)/page.js，但部署后出现404的问题，可通过以下三种方式解决：

方案一：根目录创建page.js复用营销页组件 #

在app根目录新建page.js文件，直接导入(marketing)下的首页组件：

import MarketingHome from './(marketing)/page';

export default function RootHome() {
  return <MarketingHome />;
}

此方法让部署平台能识别到根路由对应的页面，同时完全复用营销页的内容，(marketing)的独立布局layout.js依然会正常生效。

方案二：配置Next.js重写规则映射根路由 #

修改项目根目录的next.config.js，添加重写规则将根路由/指向(marketing)路由组的首页：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  async rewrites() {
    return [
      {
        source: '/',
        destination: '/(marketing)',
      },
    ];
  },
};

module.exports = nextConfig;

该方式不会改变前端URL，访问/时后台会自动映射到(marketing)的首页，同时保留路由组的布局隔离特性。

方案三：检查部署平台的路由配置 #

不同部署平台可能需要额外配置：

• Vercel：无需额外操作，上述两种方案均可直接生效；
• Netlify：若平台未自动识别路由，可在netlify.toml中添加重写规则：

  [[redirects]]
    from = "/"
    to = "/(marketing)"
    status = 200
  

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