Next JS 13“下一个构建”将应用程序目录 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".

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

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

Answer 1

我在 Twitter 上发布了这个问题，幸运的是，Vercel 开发人员体验副总裁 Lee Robinson 看到了这个问题并查看了存储库。引起该问题的原因是我在文件中使用了i18nwith ，如下所示：appDirnext.config.js

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

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

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

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

谢谢。