サマリ
もともとNetlifyで公開していたWebページを
Cloudflare Pagesに移行した際に詰まったのですが、改善した際にやったことをまとめました。
背景
先日、NetlifyでWebページ公開をしてみました。
ウキウキで触っていたら1週間ちょっとで上限に行ってしまい、閲覧できない状態に…（涙
他に上限がない（または上限枠が広い）サービスがないかと探していたら、
Cloudflare Pagesなるものがあるということで、
やってみたのが以下の記事です。
で、上記の記事内はサンプルページのデプロイを淡々と進めているのですが、
実際自分がNetlifyで公開していたページ（現在はCloudflarePagesで公開しているページ）は
Next.jsを使用しており、
その関係でCloudflarePagesにそのまま移行しようとしたときにひっかかったので対処をまとめます。
ゴール
- Cloudflare PagesでNext.jsを使って公開していたページをNetlifyから移行する
対象読者
- Next.jsを使ってNetlifyでページ公開していたがCloudflarePagesに移行を検討している方
前提
必須：インターネット環境
推奨：CloudflarePagesアカウント
環境
- OS：Window11 Home 24H2
実行手順
手順的には前述の以下の記事を参照ください。
で、最後までいけずエラー発生、、AIに相談して、以下を修正
| 項目 | 修正内容 | なぜ必要か |
|---|---|---|
1. next.config.js |
output: 'export' を追加 |
Cloudflare Pagesは静的サイトのみ対応。サーバー不要のHTMLファイルを生成する必要がある |
| 2. URLの更新 | ファイル内のリンクをNetlifyのURLからCloudflare PagesのURLに変更 | OGPやプロジェクトリンクで正しいURLを表示するため |
3. netlify.toml |
ファイルを削除 | Cloudflare Pagesでは使用されないため |
| 4. 画像表示 |
next/image を <img> タグに変更 |
静的エクスポート時は next/image が動作しないため |
| 5. ビルド設定 | Cloudflare Pagesで out ディレクトリを指定 |
Next.jsが out ディレクトリに完成したファイルを生成するため |
無事、開けました～！（ほっ
時間の都合で全部やっちゃったので、どこが肝となったのか本記事で示せず大変申し訳ございませんという感じなのですが・・
2．は単にファイルの中身のリンクの変更、
3．も単にCloudflarePagesで不要なファイルの削除、
なので、大した変更ではなく・・
主にそれ以外の1．4．5．が聞いたのかなぁ～ぐらいで考えています。
（技術記事としてあるまじき雑さ
もし同じような壁にぶつかられた方がいたら更なる切り分けをよろしくお願いします。
（技術記事として最悪すぎ
結果
何とか現在はCloudflarePagesで公開できています。
まとめ
ちょっと切り分けとして不十分（全部やって解消したので結局どこでひっかかったか不明確）なのは反省しています。
（なので石を投げないでください・・い、痛い・・笑
時間圧の都合もあり、反省しておりますので、以降の記事で改善いたします・・