フロントエンド開発の先端を突っ走るNext.js
next.js アプリの初期化( npx create-next-app@latest --use-npm <アプリ名> )

Cloudflare へ next.js app router アプリをデプロイ

● npm create cloudflare コマンドを使用してアプリの作成から開始する場合

・アプリ初期化( +自動デプロイ )

「アプリ名を入力」→「Website or web app を選択」→「Nextを選択」
を進むと、next.js のアプリ作成初期画面になるので、いつもの通りオプションを選択していく。
あとはデプロイまで自動で行ってくれます。

以下の画面が出れば成功です。

├  SUCCESS  View your deployed application at https://YOUR-APP-NAME.pages.dev
│ 
│ Navigate to the new directory cd YOUR-APP-NAME
│ Run the development server npm run pages:dev
│ Deploy your application npm run pages:deploy
│ Read the documentation https://developers.cloudflare.com/pages
│ Stuck? Join us at https://discord.gg/cloudflaredev

APIを利用する場合は export const runtime = 'edge' をAPIの route.ts に記述する必要があります

例: /src/app/api/helloworld/route.ts

export const runtime = 'edge' // 'nodejs' (default) | 'edge'

エッジランタイムでは Node API は動かないので注意

fsなどの Node依存なAPIは使用できない
使用できるのはWeb標準API(DOMを除くブラウザで操作できるAPI)

引用 : https://speakerdeck.com/aiji42/biginaxiang-ke-etuzirantaimunosusume-etuzirantaimuwoyi-shi-sitakai-fa-wohazimeyou?slide=37

・アプリの修正後の手動デプロイ

手動デプロイ は以下のコマンドです。

npm run pages:deploy

● すでにあるアプリをGitHubへのpushでデプロイする場合

・Cloudflare管理画面から以下の操作をする

「Workers & Pages」→「Pagesタブを選択」→「Gitに接続ボタンを押す」
あとはメニューに沿ってリポジトリとブランチを選択するだけでokです。
No.2443
01/15 13:37

edit