CloudflareでNext.js 2025年夏

Cloudflare Workers Tech Talks in Niigata #1で発表した資料です。

Transcript

1. CloudflareでNext.js 2025年夏 Cloudflare Workers Tech Talks in Niigata #1
2. 自己紹介 Ryu(@ryuapp) ソフトウェアエンジニア at 株式会社モニクル • GitHub: @ryuapp • Website: https://ryu.app
3. 話すこと CloudflareでNext.jsを動かす方法について知ろう • Next.jsとは(軽く) • CloudflareスタックでのNext.jsの動かし方4選 Next.js on Cloudflareを触っている感想を交えつつお話しします ※デモは含みません
4. Next.jsとは • Vercelが開発しているReactのメタフレームワーク • フロントエンドとバックエンドを両方開発できる フルスタックなフレームワーク • ゼロコンフィグで簡単にセットアップできるのが魅力 • Webフレームワークの中で人気No.1 (GitHubにあるフレームワークの中で1番スターを持ってる)
5. State of JavaScript 2024: Meta Frameworks https://2024.stateofjs.com/en-US/libraries/meta-frameworks/
6. 多くの開発者は Next.jsを使いたい ↓ CloudflareでもNext.jsを使いたい
7. CloudflareでNext.jsを動かす4選
8. 1. OpenNext
9. OpenNextとは • Next.jsを異なるプラットフォーム(Vercel以外)で 動かすためのアダプター(デプロイツール) • 現状一番推奨されているやり方 • AWS、Cloudflare、Netlifyアダプターが存在 • SSTと各ベンダーのエンジニアがアダプター開発している(AWS以外) https://opennext.js.org/
10. OpenNextの良いところ • Cloudflare WorkersでNext.jsを動かせる！ ◦ Vercelの場合、商用利用は 20ドル～ ◦ Workersならバンドルサイズの制限で有料プランに入っても 5ドル～ ◦ 個人開発したい人は財布にやさしいのでおすすめ • Next.jsのキャッシュ管理をクラウドに載せられる ◦ CloudflareのD1、KV、R2、Durable Objectsを使用している ◦ Next.jsを複数インスタンスでセルフホストする場合、 自前で設定が必要になるが、その設定が必要なくなる
11. OpenNextの課題感 • 最新機能、バージョンへの追従にラグ ◦ Vercel以外のベンダーが開発しているので仕方がない • 開発モードとビルド後の差分がある ◦ OpenNextはビルド後の生成物にパッチを当てている ◦ 実体験、Wranglerをアップデートしたら壊れてしまった (OpenNextがv0) ◦ CIにe2eテストとかはあった方がいいかも • エコシステムがついてこない ◦ Next.jsの機能に依存しているライブラリが一部動かない (とはいえ、まあほぼ動く ) ◦ @sentry/nextjsとか
12. 2. @cloudflare/next-on-pages
13. @cloudflare/next-on-pagesとは • Cloudflare PagesでNext.jsを構築するためのCLI • OpenNextが作られる前はこれを使っているケースが多かった • 現在はOpenNextの使用が推奨されるので、 新規採用するメリットはない https://github.com/cloudflare/next-on-pages
14. 余談： @cloudflare/next-on-pagesはなぜPages? 最初からWorkersで良かったのでは？ • Cloudflare WorkersのStatic Assetsが当時なかった ◦ next-on-pagesは2023年9月頃登場?【要出典】 ◦ Static Assetsは2024年9月登場(Builder Day 2024) ◦ Workersでバンドルすると、 フロントエンド側だけでバンドルサイズが上限に到達してしまう ◦ 当時は無料枠だと上限が 1MB(2024年10月に3MBに引き上げ)
15. 3. Static Exports
16. Static Exportsとは • Next.jsを静的サイトとしてビルドする手段 • WorkersのStatic Assetsを使ってデプロイできる • SSG/SPA用に丁度いいやり方 https://nextjs.org/docs/app/guides/static-exports
17. Static Exportsの良いところ • フロントエンドだけになるので、どこでも動かせる ◦ バックエンドはWorkersでHonoでもなんでも良しなに
18. Static Exportsの課題感 • フルスタックにNext.jsを使えなくなる ◦ SSRできない • Next.jsの機能が一部しか使えない ◦ ServerActions、Middlewareなどが使えない ◦ https://nextjs.org/docs/pages/guides/static-exports#supported-features-1 OpenNextを使う必要がない人向け
19. 4. Cloudflare Containers
20. Cloudflare Containersとは • Cloudflareが提供するコンテナ基盤(オープンベータ) • 類似サービスはGoogle CloudのCloud Runなど • Workersで動かすことができなかったアプリも動かせるようになった 紹介ブログ https://blog.cloudflare.com/cloudflare-containers-coming-2025/ ドキュメント https://developers.cloudflare.com/containers/
21. Cloudflare Containersの課題感 • Workersに課金が必要(月5ドル) ◦ 検証のため気軽に試したい • レスポンス速度が遅い ◦ フロントエンド用のサーバーには現状厳しい • コールドスタートが長い(Next.jsの問題) Next.jsをtoC向けにデプロイしたいなら向いていない Workersで動かないアプリを動かすための エスケープハッチとして使うのが良さそう
22. Next.js on Cloudflare 総評 • OpenNextを使って Workersにデプロイするのが最善 • 静的サイトなら Static Exportsするだけでいいね • 将来的にはCloudflare Containersによる運用も視野に入るかも • 新規開発なら@cloudflare/next-on-pagesではなくOpenNextを使おう
23. 補足：今後の OpenNext • Deployment Adapters APIへの対応 https://github.com/vercel/next.js/discussions/77740 3月頃にNext.jsで発生した脆弱性への対応の批判を受けて提案されたAPI v16にアルファリリースされる予定 Postmortem on Next.js Middleware bypass https://vercel.com/blog/postmortem-on-next-js-middleware-bypass
24. まとめ • CloudflareスタックでNext.jsを動かす方法を紹介 ◦ OpenNext ◦ @cloudflare/next-on-pages ◦ Static Exports ◦ Cloudflare Containers • OpenNextを使ってNext.jsをWorkersにデプロイするのがおすすめ ◦ 静的なサイトならStatic ExportsしてWorkersのStatic Assetsに載せよう • OpenNextの仕組み
25. みんなもNext.js使っていこうぜ！
26. Thank you