Next JS 13 'next build' 将应用程序目录 app/page.js 和路由组页面输出为 0 字节并导致生产中出现 404 错误

Question

使用Next.js 13实验性appDir功能，我已经能够将我的所有页面从页面目录移植到应用程序目录，并且在开发环境中一切正常，但问题是我在生产环境中遇到了404 error 。

我决定通过在本地运行next build来排除故障并注意到

笔记：

在我的next.config.js文件中，我配置了实验性的appDir标志，同时我还删除了pages目录，因为所有页面现在都已移至app目录。

下面是我的next.config.js文件：

/** @type {import('next').NextConfig} */

const nextConfig = {
  experimental: {
    appDir: true,
  },
  ...
};

module.exports = nextConfig;

我试图查看官方文档以了解可能的配置和修复，但没有找到任何帮助。

我能做什么？

谢谢你。

编辑：

所以在进一步的试验中，

我决定删除路由组以测试它是否真的会成功构建并且确实成功了。 我通过将(dashboard)文件夹名称更改为dashboard来做到这一点，这又将'/dashboard'添加到我不想要的路线中。 我需要应用程序目录中的路由组，以便在不更改路径名的情况下跨应用程序共享布局。 比如路由组目录

例子：

app/(dashboard)/meeting/page.js仍然有一个"/meeting"的路由，而不是这个目录； app/dashboard/meeting/page.js现在有一条路线"/dashboard/meeting" 。

在 Github 上的vercel vercel/next存储库上经历了类似的问题后，我发现这个特定问题的错误发生是因为output: "standalone"选项是在项目的next.config.js文件中设置的，但我没有在我的设置中设置该选项。 此外，针对此问题的特定修复仍然指出了我所面临的路由组的特定错误。

然而，关于我的问题的令人困惑的事情是，除了路由组页面遇到的 404 错误之外， app/page.js打算用路由"/"替换pages/index.js还在生产中返回 404。

Answer 1

我在推特上发布了这个问题，幸运的是，Vercel 的开发人员体验副总裁 Lee Robinson 看到了它并查看了存储库。 这个问题是因为我在next.config.js文件中使用了i18n和appDir ，如下所示：

const nextConfig = {
  experimental: {
    appDir: true,
  },
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
  ...
}

由于该应用程序目前仅支持英语，我们不打算添加任何语言，因此我决定将其删除，所有 404 错误都消失了。 这是更新后的next.config.js文件：

const nextConfig = {
  experimental: {
    appDir: true,
  },
  ...
}

如果您需要使用 Next JS 13 在app目录中支持多种语言，这是 Vercel在此处编写的指南。

谢谢你。