はじめに

色々詰まったので解決までかかった内容を全て書いておきます。Cloudflare C3を使ってプロジェクトを構築し、あとからGitHubを挟んだデプロイに変更してみます。
詳しくは理解していないので間違っている点あるかもしれないです。

環境

Ubuntu 22.04
VirtualBox

（PC自体はWindows 11を使用）

まず最初にPowershellを試して、次にWSLを使ってみたがどちらも失敗してしまった。WSLについてはUbuntuを使ったが、npm createを行うとCMD.exeが起動してしまい、なんやかんやよくわからなかった。
ということでVirtualBoxにした。関連するエラーは以下のリンクに示す。

Ubuntuを入れる

VirtualBoxをインストールして、UbuntuのISOでインストール。

環境構築

apt

suでroot権限を得て、諸々インストールする。

su

sudo apt update
sudo apt upgrade
sudo apt install nodejs
sudo apt install npm

nodeのバージョンアップ

nodeはv12.22.9、npmは8.5.1と古いのでこれで実行するとエラーを吐くので更新を行う。

sudo apt install nodejs npm
sudo npm install n -g

sudo n lts
exit

プロジェクトを作ってみる

bash

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

後は画面の指示通りに、とりあえずEnterでOK。

deployするか聞かれたときはyesにすると、GitHubを使わずCloudflare C3でダイレクトでデプロイが行われる。一度これでやってみて動作するかを見てみると初めての時はやりやすい気がする。
最初からGitHubでやるという方はNoにしてもできるかも。

てかなんならC3を使わなくてもいけそうな気もするが試していない。C3を使わなくていいならそもそもPowershellで完結できる（はじめにの項で書いた通りのエラーを回避できる）のでやってみたい。

エラーが出る場合

Cannot find module 'semver'というエラーが出たので、以下の記事をもとに解決した。

bash

hash -r

GitHubに変える

リポジトリを作る

先ほど作成したプロジェクトはすでにGitで管理されているのでこれをプッシュする。

git branch -M main
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git push -u origin main

ちなみにプッシュは認証を行う必要があるが、GitHubへのログインはパスワード認証は推奨されていないし多分弾かれる。
初心者だとghを使うと分かりやすい。本当は他の方法も理解しておいた方がいい気がする、SSHとか。

su
sudo apt install gh
exit

gh auth login

後は画面の指示に従うとできる。ブラウザを起動して認証、を選ぶと楽にできる。

Cloudflare Pagesの設定

まずPagesでプロジェクトを作成する。「Pages > プロジェクトを作成 > Gitに接続」。プッシュした先ほどのリポジトリを選択。
次の画面で以下の設定を行う。

キー	値
Production branch	main
Build command	npx @cloudflare/next-on-pages@1
Build directory	.vercel/output/static

これでプロジェクトを作るが、この時点ではデプロイは行われてもページの表示は失敗してしまう。nodejs_compat。これについては以下のページで述べられていた。

Pagesのプロジェクトから、「設定 > Functions > 互換性フラグ」にてnodejs_compatを追加して保存します。

まさにこれが抜けていた。追加したらデプロイの再試行。これで表示に成功した。

雑記です。これからまた書き足りない部分を追加しようと思います。