cloudflareにデプロイする

既存のnextjsをデプロイするのは、runtimeをedgeに変更する必要もあるため。とりあえず公式ページをなぞっていきます。

プロジェクト作成

1. 1.まずnextjsのプロジェクトを作成します。

npm create cloudflare@latest my-next-app -- --framework=next

プロジェクトについて聞かれますので次のようにしました。

1. 1-1wranglerログインされていなかったためブラウザーが開かれるのでログインをします。

2. 2.デプロイ デプロイするかどうかを聞かれるのでデプロイしてみる。

Error?

デプロイが失敗したみたい...
まぁc3でデプロイすることはない。gitに接続して、コミットしたら自動的にデプロイ出来ればいいのでスルー。

gitのリポジトリ作成

1. 1.githubでリポジトリを作成します。

2. 2.リポジトリに接続する。

書かれている通り実行し、ローカルのプロジェクトをgithubにアップします。

git init
git add .
git commit -m "Initial"
git branch -M main
git remote add origin [email protected]:<アカウント>/<リポジトリ名>
git push -u origin main

cloudflareとgitを接続する。

1. 1.cloudflareのページを作成します。

2. 2.リポジトリを選択する。
   先ほど作成したリポジトリを選択します。

3. 3.デプロイの設定

ページが表示されない...

デプロイが成功したのでページにアクセスしてみるとページが表示されませんでした...　　 エラーページを確認すると「nodejs_compatを追加してね。」ということで 追加する。

nodejs_compatの追加

リビルドして表示できた。

プロジェクトをリビルドしてみるとようやくnextjsのページが表示されました。

まとめ

cloudflareがnode 18以降のバージョンに対応したので、gatsby 5もデプロイでき、nextjs app routeもデプロイできるようになりました。
少し設定を変更する必要があるが、cloudflareでR2、D1,KVとかも使えるのでかなりの事がcloudflareだけで解決するようになっている。
cloudflare imagesについては認証とかは不要だし、やっぱりcloudinaryを使う方がいいのかな？