既存の Next.js アプリケーションを Cloudflare Pagesにデプロイしたい

Ryo

前提

Cloudflare アカウント作成済
すでに Next.js プロジェクトのリポジトリが存在する

Ryo

Gitリポジトリと連携し、ビルド設定をする

公式のこちらの手順3に記述されている設定をし、デプロイを開始。

Ryo

以下のエラーが発生。

2024-07-01T13:06:32.069271Z	⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
2024-07-01T13:06:32.069508Z	⚡️ 
2024-07-01T13:06:32.069785Z	⚡️ 	The following routes were not configured to run with the Edge Runtime:
2024-07-01T13:06:32.07009Z	⚡️ 	  - /_not-found
2024-07-01T13:06:32.070433Z	⚡️ 	  - /api/...（省略）
2024-07-01T13:06:32.071701Z	⚡️ 
2024-07-01T13:06:32.071941Z	⚡️ 	Please make sure that all your non-static routes export the following edge runtime route segment config:
2024-07-01T13:06:32.072045Z	⚡️ 	  export const runtime = 'edge';

基本的に App Router は動的ページになるため、layout.tsx に以下の記述を追加

export const runtime = 'edge';

Ryo

上記の記述を追加したが、/_not-found ページのエラーだけは以下のように残っている。

2024-07-01T13:06:32.069271Z	⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
2024-07-01T13:06:32.069508Z	⚡️ 
2024-07-01T13:06:32.069785Z	⚡️ 	The following routes were not configured to run with the Edge Runtime:
2024-07-01T13:06:32.07009Z	⚡️ 	  - /_not-found
2024-07-01T13:06:32.071701Z	⚡️ 
2024-07-01T13:06:32.071941Z	⚡️ 	Please make sure that all your non-static routes export the following edge runtime route segment config:
2024-07-01T13:06:32.072045Z	⚡️ 	  export const runtime = 'edge';

not-found のページは Next のビルド中に自動で生成されるから、このページにも Edge Runtime で実行することを明示的にしておかないといけない
Cloudflare もこのコンポーネントを作成しておくことを推奨している。

Ryo

プラスして、こちらで公式も言っている通り、@cloudflare/next-on-pages を使用するように設定しないといけなさそう。

Ryo

とりあえず、not-found ページのコンポーネントを追加してデプロイし、ビルドには成功したが、Cloudflare が発行する URL を開いたところ以下のエラーページが表示された。

Ryo

互換性フラグとやらに「nodejs_compat」を設定しろと書かれているので設定。

Ryo

上記の設定をプロダクションとプレビュー環境どちらも設定して無事デプロイ完了

Ryo

UI ライブラリに Mantine を使用している影響か、こちらと同じエラーが npm run dev の実行時に起きた。

Attempted import error: 'useRef' is not exported from 'react' (imported as 'React').

Import trace for requested module:
./node_modules/react-remove-scroll/dist/es2015/SideEffect.js
./node_modules/react-remove-scroll/dist/es2015/sidecar.js
./node_modules/react-remove-scroll/dist/es2015/Combination.js
./node_modules/react-remove-scroll/dist/es2015/index.js
./node_modules/@mantine/core/esm/index.mjs
./src/components/Base/Box/RPFlex.tsx
./src/components/Common/Header/HeaderServerContents.tsx
./src/app/layout.tsx
./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fpage&page=%2Fpage&appPaths=%2Fpage&pagePath=private-next-app-dir%2Fpage.tsx&appDir=%2FUsers%2Fryo_kihara_%2FDesktop%2Fot%2Frecoput%2Frecoput-client%2Fsrc%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Fryo_kihara_%2FDesktop%2Fot%2Frecoput%2Frecoput-client&isDev=true&tsconfigPath=tsconfig.json&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./src/app/page.tsx?__next_edge_ssr_entry__

Mantine のコンポーネントを RSC で扱いづらいと言う理由もあり、今のプロジェクトでは、Mantine を使用しない方針にする予定のため、一旦無視する

このスクラップは5ヶ月前にクローズされました