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

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

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

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

## node.jsのバージョンを指定する

最新のnext.jsが必要とするnodeのバージョンがcloudflare pagesのデプロイで使われるデフォルトのものだと対応してないので、
バージョン指定する必要がある

cloudflareはビルドで `/.node-version` を参照するようなので
.node-versionファイルを作って、
```
22.14.0
```
とか書いときます

もちろんnvmとかでローカルのnodeのバージョンも22.14.0にします

## githubにリポジトリを作ってpush

タイトルの通りです

pushまでやります

## cloudflare pagesへデプロイする

cloudflareにログインしてサイドメニューのworkers & pagesを開いて

pagesを選択肢して

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48695/084c1f79-7e49-40d6-ac64-ce4e731c06e9.png)

ここからgithub連携してさっき作ったリポジトリとブランチを指定


ビルド設定はNext.jsを選んだら出てくるデフォルトのままでOK

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48695/eb76a26b-b9e5-446e-a585-a27755d76bd0.png)


## デプロイ完了

自動デプロイが走るので少し待つ

完了するとページが作られるので
/ (ルート) と /api/hello の表示を確認して終わり