はじめに
個人開発していた書籍情報共有サービス「Engineer's Book Hub」が形になってきた際、直面したのが Vercelの商用利用制限（Non-Commercial Use Policy） です。将来的なマネタイズを視野に入れると、ホスティング先の変更は避けて通れない課題でした。
そこで今回、Next.jsをCloudflare Pagesで動かすためのアダプターである OpenNext を活用し、移行を完了させました。その手順と、現在取り組んでいる追加機能についてのロードマップを共有します。
移行対象サイト
・ガジェットランキングサイト
・技術書ランキングサイト
なぜVercelからCloudflare Pagesへ？
商用利用の壁: Vercelの無料プランは非営利目的に限定されています。
コストパフォーマンス: Cloudflare Pagesは無料枠が非常に強力で、かつ商用利用が可能です。
エッジの優位性: 世界中に張り巡らされたCloudflareのネットワークにより、低遅延なレスポンスが期待できます。
移行の手順とハマりポイント
1. OpenNextの導入
Next.js 16系をCloudflare Pagesで動作させるため、@opennextjs/cloudflare を使用しました。
npx wrangler@latest pages dev # ローカル確認用
npm run deploy # デプロイ
2. 直面したエラーと解決策
ビルド時に以下のエラーが発生しました。
✘ [ERROR] Service binding 'WORKER_SELF_REFERENCE' references Worker 'frontend' which was not found.
原因:
Cloudflareのビルドプロセスが package.json の "name": "frontend" を読み取り、存在しないWorker名を参照しようとしていました。
解決策:
package.json の name をプロジェクト名（engineer-s-book-hub）に修正。
wrangler.jsonc の services 設定をプロジェクト名と一致させる。
これにより、Cloudflare Pages上でのNext.js（Turbopack）のビルド・デプロイが安定しました。
今後の展望：情報の精度とUXの向上
現在、さらなる改善のために以下のアップデートを計画しています。
現在取り組んでいること
・情報源の多角化:
現在はQiitaの記事をベースに書籍情報を収集していますが、より情報の精度を上げるため、Zenn や Note、はてなブログ などからもデータを取得し、クロスリファレンス（相互参照）を行うロジックを開発中です。
・期間選択の最適化:
「直近1週間」や「全期間」だけでなく、技術トレンドの移り変わりに合わせた最適な集計期間（「直近3ヶ月」など）を選択できるよう、フィルタリング機能を強化しています。
🚀 【相談】サイトの追加機能について教えてください！
エンジニアの皆さんにとって、より「本気で役立つ」サイトにしたいと考えています。上記の「多角化」「期間最適化」以外に、どのような機能があれば嬉しいでしょうか？
今考えているアイデアは以下の通りです：
レベル別自動判定: 記事の内容を解析し、「初学者向け」「シニア向け」を自動でタグ付け。
技術スタック別ランキング: 「Rustのおすすめ本」「Next.jsのおすすめ本」など、特定の技術スタックに絞った表示。
「いま話題」のリアルタイム反映: SNS（Xなど）での言及数も加味したスコアリング。
読了時間の目安表示: ページ数や記事のボリュームから、どれくらいで読み切れるかを表示。
「自分ならこういう基準で本を探したい」「これがあれば毎日見る」といったご意見があれば、ぜひコメント欄で教えていただけると嬉しいです！
おわりに
Vercelからの移行は一見ハードルが高いですが、OpenNextのおかげでNext.jsの最新機能を維持したままCloudflareへ移ることができました。同じように「商用利用」や「コスト」で悩んでいる方の参考になれば幸いです。
現在2つのサイトを運営しており、エンジニアの方たちにとって大切な技術書籍やPC周りのガジェットを公開していますのでぜひサイトの中覗いてみてください！
ガジェットランキングサイト
技術書ランキングサイト