Next.js SSR を Cloudflare Pages で公開する

## 概要
- Nextを安くデプロイしたい

同時にbuildできないものの、ほとんどの場合で無料枠で十分かもしれない。
月500は、デプロイこけまくったりすると少し心もとないが、それでも相当である。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/3df05080-ef2c-4637-8c64-8ac3d274a1a4.png)

Next on aws lambdaをやったことがあるが、制限も大きいのでこれは最高である

https://zenn.dev/laiso/articles/c086dd115f5d4e

ここら辺を見るとミドルウェアの挙動が不安定だ等あるので、そこはLambdaと同じかもしれない

今回は既存のNextを修正するのは扱わないがここら辺に書いてある

https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/#existing-apps

## 前提

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/83bc379a-cb8a-45a9-a752-d8ce42935130.png)

通常のNextで入れないほうが良いっぽいので、指示に従いながらやっていく

## アプリの新規作成
サンプルアプリを作成する
```bash
pnpm create cloudflare@latest cloudflare-sample --framework=next
```

pnpmが入っていない場合はこちら。npmから入れられるのはいいですよね

https://pnpm.io/ja/installation

```
├ Do you want to deploy your application?
│ yes deploy via `pnpm run deploy`
```

と言われたので、deployしようとした

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/7b4abe2a-4ddb-4a71-ae0c-f71d39355fb9.png)

そうしたところ、windowsではうまくいかないと出てしまった

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/7ce52562-6da3-43be-acda-8467e099269f.png)

実際にエラーとなってしまったので、WSLで実行するのが良いかもしれない

今回はスキップします。

## 失敗：Pagesでデプロイする

https://developers.cloudflare.com/pages/get-started/git-integration/

:::note warn
ここ間違えました。
Pagesでないといけないのに、Warkersを選択しています
何度やってもうまくいかないわけです。
APIトークンにPagesの権限がない部分で気が付けばよかった、、、
:::

:::note
正しくは次の章で書く感じにします
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/5b861b0f-c3b9-4a9a-a011-2e5bb5bc536f.png)


こんな感じで、プライベートリポジトリも選択可能見たいですね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/d93ab5cf-f294-4e9d-9edd-39c3d4c2aad3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/2a8b92c4-f6f3-4874-a9bd-b8df27043018.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/325e1a5e-d90c-4cc7-834c-398c9c43c93f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/a58e9530-0422-47f6-b3c7-21878143ae95.png)

## Pagesでデプロイする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/82bba2cd-af72-47e2-b60e-bf7419bef1dd.png)

先ほど接続しているので、すでに終わっていますね

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/dc35e6af-95e1-42a9-9847-0cc5f2af39d0.png)

Nextを選択してやるだけですね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/54d4efe7-7fc3-4f08-96f8-de24e7775a42.png)

バージョンエラーになったので、いったん無視して進めます
```bash
01:49:02.438	▲  You are using Node.js 18.17.1. For Next.js, Node.js version "^18.18.0 || ^19.8.0 || >= 20.0.0" is required.
01:49:02.446	▲  ELIFECYCLE  Command failed with exit code 1.
01:49:02.479	▲  Error: Command "pnpm run build" exited with 1
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/433af19b-ec3a-46ee-b87a-a38dc4a89cc5.png)

再度デプロイする前に、ここら辺の設定をどれかします。
自分は環境変数が何度やってもうまくいきませんでしたorz
代わりに画像のようにしたところ

https://zenn.dev/hisayuki_mori/articles/cloudflare-node-version


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/85b2d0a0-7f88-40ae-8a30-4b382fb869b3.png)

このようにしっかり入れなおしているのを確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3125890/326f0dae-a757-4c4f-b146-94dbef5d80e1.png)

うまくいかない場合はnvmとかそっちの方が良いかもですね

## まとめ
意外に苦労した。

ほとんどは勘違いだったものの、結構疲れたがGiotHub Actionsなども利用せずにデプロイできるのは本当に楽でよい。