Next.js 与 WebPack 并行路由

Question

我在 Next.js 应用程序中使用并行路由。我有一个仪表板，它由标题和内容组成，因此目录结构如下：

仪表板

• @标题
  • 正在加载.tsx
  • 页面.tsx
• @内容
  • 正在加载.tsx
  • 页面.tsx

我正在使用 webpack 构建应用程序，当我访问仪表板页面时遇到以下错误：

Chunk Load Error: 
Loading chunk 6635 failed. (404) *** dashboard/%40header/loading-eacb3abac99bee42.js

我正在寻找如何配置 WebPack 的建议，以便它可以与并行路由一起使用。

我正在为 docker 容器独立设置构建应用程序。

Answer 1

如果您在 Azure 或 Cloud Run 上遇到此问题，可能与 问题有关。要解决此问题，请尝试将 Next.js 更新到最新版本，或通过更新 next.config 来使用以下解决方法。 js：

import createNextIntlPlugin from "next-intl/plugin";

const withNextIntl = createNextIntlPlugin();

/** @type {import("next").NextConfig} */
const config = {
  output: "standalone",
  rewrites: async () => ({
    beforeFiles: [
      {
       // Added wildcard to ':folder' -> ':folder*'
        source: "/_next/static/chunks/app/:folder*/@employer/:path*",
        destination: "/_next/static/chunks/app/:folder*/%40employer/:path*",
      },
      // more parrallel rewrites
    ],
    afterFiles: [],
    fallback: [],
  }),
};

export default withNextIntl(config);