cloudflare pages で next.js をとりあえずデプロイするまで (所要時間15分) 2025年3月版

Last updated at 2025-03-23Posted at 2025-03-23

意外と最新環境の作業ログがなかったので書いときます

cloudflare pagesは無料（デプロイ回数に制限はあるがほぼ引っかかることはない）

cloudflare pages function は workers を使うので、ある程度無料では使えるんですが超えたらお金かかります

next.js はフルスタックフレームワークなのでAPIも作れる

時間もお金もかからないのでとりあえずやってみるのをおすすめ

公式のドキュメントでいうとコチラになりますが、読みたくない人はこのままこの記事続けてください
https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/

手順

適当な作業フォルダ作って以下コマンド実行

npm create cloudflare@latest -- sampleapp --framework=next

質問出てくるので

├ What would you like to start with?
│ category Framework Starter
│
├ Which development framework do you want to use?
│ framework Next.js

Framework StarterとNext.jsを選択

さらに質問でてくる

個人的にはデフォルトで問題ないと思う

√ Would you like to use TypeScript? ... No / Yes
YES!!
√ Would you like to use ESLint? ... No / Yes
NO!!
√ Would you like to use Tailwind CSS? ... No / Yes
YES!!
√ Would you like your code inside a `src/` directory? ... No / Yes
NO!!
√ Would you like to use App Router? (recommended) ... No / Yes
YES!!
√ Would you like to use Turbopack for `next dev`? ... No / Yes
YES!!
√ Would you like to customize the import alias (`@/*` by default)? ... No / Yes
NO!!

ESLintもデフォルトで使わないになるんですね

以上入力するとプロジェクト名のフォルダが作られて、アプリファイルが配置、npm i が始まる

さらにcloudflareのセットアップスクリプトで環境構築しているので
cloudflareの wrangler のセットアップ（cloudflare環境触れるCLI）が行われたり、
next.jsにCloudflare Pagesのアダプタが設定されたりする

一応ログはっときます

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `npm install wrangler --save-dev`
│
├ Installing @cloudflare/workers-types
│ installed via npm
│
├ Adding latest types to `tsconfig.json`
│ added @cloudflare/workers-types/2023-07-01
│
├ Retrieving current workerd compatibility date
│ compatibility date 2025-03-21
│
├ Created an env.d.ts file
│
├ Updating `next.config.ts`
│ updated `next.config.ts`
│
├ Updated the README file
│
├ Adding the Cloudflare Pages adapter
│ installed @cloudflare/next-on-pages@1, @cloudflare/workers-types, vercel
│
├ Adding Wrangler files to the .gitignore file
│ updated .gitignore file
│
├ Updating `package.json` scripts
│ updated `package.json`
│
├ Do you want to use git for version control?
│ yes git
│
├ Initializing git repo
│ initialized git
│
├ Committing new files
│ git commit
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
╰ Done

────────────────────────────────────────────────────────────
🎉  SUCCESS  Application created successfully!

cd sampleappしてnpm run devでとりあえずローカルで確認

http://localhost:3000/api/hello
これも確認