🐕

Parallel Routes を Cloud Run で動かすと ChunkLoadError になる問題の対処法

2025/02/14に公開

Next.js

tech

結論

以下では何を試して解決したかについて書きます。

やったこと

Next v15 で App Router 想定です。
例えば、app/@modal でParallel Routesを使っている場合、next.config.ts に以下の設定を追加します。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  // 他の設定

  rewrites: async () => {
    return {
      beforeFiles: [
        {
          source: '/_next/static/chunks/app/:folder*/@modal/:path*',
          destination: '/_next/static/chunks/app/:folder*/%40modal/:path*'
        },
        // 他にもあれば同様に追加していく
        // {
        //   source: '/_next/static/chunks/app/:folder*/@anotherModal/:path*',
        //   destination: '/_next/static/chunks/app/:folder*/%40anotherModal/:path*'
        // },
      ],
      afterFiles: [],
      fallback: []
    };
  }
}
 
export default nextConfig

この設定をすることで ChunkLoadError は起こらなくなりました。
全ての Parallel Routes に対してこの設定をする必要はなく、特定の条件を満たしたものだけが ChunkLoadError を起こすようです。

結論

やったこと

Discussion