Next.js App Routerのデプロイ先を選ぶ方法

TL;DR

手軽さと互換性を優先するならVercel、商用利用時の安さと転送量を重視するならCloudflare Workersが候補になる。VercelはApp Routerへ完全対応し、ほぼワンクリックで公開できる一方、商用利用は月額20ドルである。Workersは月額5ドルだが、OpenNextの導入やISRの追加調整が必要になる場合がある。

Transcript

はい、どうもしです。え、今回はですね、 NextJSアルーターのデブロイ先、 ホスティング先、え、こちらを実際に色々 デブロイしてみて、それを比較してですね 、どれが1番いいのかっていうのをですね 、検証する動画になっていきます。ま、 1番有名なホスティング先が、ま、 バーセルとかにはなるんですけども、ま、 他にもですね、ま、こんな感じで クラウドフレアページとかワーカーとか クラウドランとかNetriリファyとか 、ま、アプリファイとかですね、ま、 いろんなホスティング先ありますので、え 、そちらを実際に今回ちょっとデブロイし てみます。全部で、え、ちょっと皆さんと 一緒に、ま、料金体系だったりとか、ま、 その制限ですよね、ネクストJSの機能が ちゃんとサポートされているのかとか、え 、そ... Read More

Key Insights

• VercelはNext.js App Routerに完全対応し、GitHub連携、環境変数の登録、デプロイボタンの操作という簡単な手順でブログを公開できるホスティング先である。
• VercelのHobbyプランは個人プロジェクトなら無料だが、広告やStripe決済などで収益化するアプリやチーム開発には月額20ドルのProが必要である。
• Vercelの静的ページとISRページは利用者に近い地域からCDN配信され、ルートハンドラーやサーバーコンポーネントなどの動的処理は指定リージョンから配信される。
• Vercelの動的処理が遅い場合は、Functionsの高度な設定で東京リージョンを選び、再デプロイすることで、日本の利用者への応答が改善する可能性がある。
• Cloudflare Workersへの既存アプリ移行は、OpenNextとWranglerのインストール、設定ファイルの配置、package.jsonへのプレビューおよびデプロイ用コマンド追加が必要である。
• Cloudflare Workers用のOpenNextは実演したNext.js 13に対応せず、14.2以上への更新が必要だったため、導入前にアプリとアダプターのバージョン互換性を確認すべきである。
• Cloudflare Workersは無料枠が1日10万リクエストで、データ転送量に制限がなく、有料プランは月額5ドルと説明されており、費用面では有力な選択肢である。
• Cloudflare WorkersはISRをサポートすると文書に記載されていたが、実演では詳細ページなどが内部サーバーエラーになったため、正常運用には追加設定と検証が必要である。
• 🎬 このチャンネルの他の動画:
  • MCPでアプリ売上を改善する方法は？
  • Claude Codeでマイクラ風ゲームを作る方法
  • Claude Codeで開発を効率化する方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Next.js App Routerのデプロイ先はどう選べばよいですか？

導入の簡単さとNext.js機能への対応を優先するならVercel、商用利用時の料金とデータ転送量を重視するならCloudflare Workersが候補です。VercelではISRまで正常に動きましたが、Workersでは追加設定後も一部ページで内部サーバーエラーが発生したため、必要機能を実アプリで検証して選ぶ必要があります。

Q: Next.jsをVercelへデプロイする方法は？

GitHub上の対象リポジトリをVercelへインポートし、NotionページIDなどの環境変数を登録してデプロイボタンを押します。公開後のドメインが必要なベースURLは、デプロイ後に設定します。実演ではビルドエラーが発生せず、記事表示とISRの動作まで確認できました。

Q: Vercelで商用のNext.jsアプリを運用する料金はいくらですか？

話者の説明では、広告やStripe決済などで収益が発生するアプリやチーム開発には、月額20ドルのProプランが必要です。Proは従量課金もあるため、利用量画面を定期的に確認する必要があります。ただし、話者自身は従量分の追加料金が発生した経験はないと述べています。

Q: VercelでNext.jsの動的処理を高速化する方法は？

Vercelの設定画面でFunctionsの高度な設定を開き、動的処理の実行地域として東京リージョンを選択して再デプロイします。ルートハンドラーの呼び出しやサーバーコンポーネントのデータ取得が東京から配信されるため、日本で動作が重い場合に改善する可能性があります。

Q: 既存のNext.jsアプリをCloudflare Workersへデプロイする方法は？

OpenNextとWranglerをインストールし、プロジェクトのルートへWrangler用JSONCファイルとOpenNextの設定ファイルを作成します。次にpackage.jsonへプレビュー、デプロイ、型生成のコマンドを追加し、ログインと認証を済ませてデプロイコマンドを実行します。実演ではこの手順で公開URLが作成されました。

Q: Cloudflare WorkersへデプロイできるNext.jsのバージョンは？

実演で使用していたNext.js 13はOpenNextのプレビュー実行時に対応外となり、14.2以上が必要だというエラーが表示されました。そこでNext.jsを14.2へ更新すると処理が進みました。この結果は実演環境に基づくため、導入時には利用するアダプターの要件を改めて確認する必要があります。

Q: Cloudflare WorkersでISRを利用するには何が必要ですか？

OpenNextアダプターを導入し、Workers向けの設定を整えたうえで、ISRページを実際に検証する必要があります。資料上はISRがサポートされていると表示されましたが、実演では詳細ページやAboutページが内部サーバーエラーになりました。話者も追加設定が必要な可能性を認めており、動作保証までは確認できていません。

Q: VercelとCloudflare Workersの料金や制限はどう違いますか？

話者の比較では、VercelのHobbyは個人用途なら無料でリクエスト数の制限がなく、データ転送量は100GBです。Proは月額20ドルで1TBまでと説明されました。Cloudflare Workersの無料枠は1日10万リクエストで転送量に制限がなく、有料プランは月額5ドルでリクエスト無制限とされています。

Summary & Key Takeaways

• 比較対象は、ISR、SSG、ストリーミングなどを使うNext.js App Router製ブログである。評価軸には、デプロイの容易さ、フレームワーク機能への対応状況、無料枠や商用料金、リクエスト数とデータ転送量の制限が含まれる。提供された実演では、Vercel、Cloudflare Workers、Cloud Runへの導入過程が確認できる。

• VercelはGitHubリポジトリを読み込み、環境変数を設定してボタンを押すだけで公開でき、ISRも実演環境で正常に動作した。静的ページはCDNから利用者に近い地域で配信され、動的処理は設定したリージョンを利用する。個人プロジェクト向けのHobbyは無料だが、収益化やチーム開発を行う場合は月額20ドルのProが必要と説明された。

• Cloudflare Workersでは、OpenNextとWranglerの導入、設定ファイルの作成、package.jsonへのコマンド追加が必要だった。Next.js 13では動かず、14.2以上へ更新してデプロイに成功したが、ISRや一部ページでは内部サーバーエラーが発生した。月額5ドルと安価で転送量に制限がない一方、互換性の確認と個別設定が課題である。