Open7
next.js@14 App Routerで構成された静的サイトをCloudflare Pagesにデプロイするまで
n4rvs3とりあえずサイトを作る
適当なサイトを用意する。
今回はポートフォリオサイトをゆるく作った
n4rvs3package info
- next: "14.1.0"
- react: "^18"
n4rvs3適当にgithubにpushして、cloudflareのダッシュボードから Workers & Pages へ行く。
画面を見れば直感的にリポジトリ選択まで行けるのでそのままビルド開始
n4rvs31回目のエラー
➤ YN0000: ┌ Resolution step 11:45:54.412
➤ YN0032: │ fsevents@npm:2.3.3: Implicit dependencies on node-gyp are discouraged 11:46:00.300
➤ YN0002: │ n4rvs3_portfolio@workspace:. doesn't provide @typescript-eslint/parser (pdbeb0), requested by @typescript-eslint/eslint-plugin 11:46:00.300
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements for details, where is the six-letter p-prefixed code 11:46:00.304
➤ YN0000: └ Completed in 8s 524ms 11:46:00.333
➤ YN0000: ┌ Post-resolution validation 11:46:00.334
➤ YN0028: │ The lockfile would have been modified by this install, which is explicitly forbidden. 11:46:00.334
➤ YN0000: └ Completed 11:46:00.334
➤ YN0000: Failed with errors in 8s 555ms 11:46:00.398 Error: Exit with error code: 1 11:46:00.399 at ChildProcess. (/snapshot/dist/run-build.js) 11:46:00.399 at Object.onceWrapper (node:events:652:26) 11:46:00.399 at ChildProcess.emit (node:events:537:28) 11:46:00.399 at ChildProcess._handle.onexit (node:internal/child_process:291:12) 11:46:00.406 Failed: build command exited with code: 1 11:46:04.910 Failed: error occurred while running build command
eslint-parserが無いとのことなのでinstall
yarn add @typescript-eslint/parser@x.y.z -D
x.y.z は各々の環境に合わせて変更
n4rvs3ビルドコマンドをデフォルトの npx next build のままにしているとエラーを吐いたので変更
手元の環境では yarn@1.22.22 を利用していたのでそちらを package.json に追記
"packageManager": "yarn@1.22.22"
pushした後、ビルドコマンドを yarn build に変更
n4rvs3ビルド完了・・・と思いきや
ビルド後にページを見るとimageが機能していない
今回は静的exportを行っている&cloudflareの無料プランを利用している都合上、next/image が利用できないので代替案を考える
n4rvs3ブログも兼ねたサイトの為、microCMSでブログ記事及び画像を配信する
画像は next/image ではなく HTML標準の <img> タグを利用する