Closed5ヶ月前にクローズ7

next.js@14 App Routerで構成された静的サイトをCloudflare Pagesにデプロイするまで

とりあえずサイトを作る

適当なサイトを用意する。
今回はポートフォリオサイトをゆるく作った

package info

next: "14.1.0"
react: "^18"

適当にgithubにpushして、cloudflareのダッシュボードから Workers & Pages へ行く。

画面を見れば直感的にリポジトリ選択まで行けるのでそのままビルド開始

1回目のエラー

➤ 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 は各々の環境に合わせて変更

ビルドコマンドをデフォルトの npx next build のままにしているとエラーを吐いたので変更

手元の環境では yarn@1.22.22 を利用していたのでそちらを package.json に追記

"packageManager": "yarn@1.22.22"

pushした後、ビルドコマンドを yarn build に変更

ビルド完了・・・と思いきや

ビルド後にページを見るとimageが機能していない

今回は静的exportを行っている&cloudflareの無料プランを利用している都合上、next/image が利用できないので代替案を考える

参考: https://shinobiworks.com/blog/834/

ブログも兼ねたサイトの為、microCMSでブログ記事及び画像を配信する
画像は next/image ではなく HTML標準の <img> タグを利用する

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