Blog

Next.jsサイトを構築し、それをオンラインにして世界中に公開したいと考えています。どのプラットフォームがそれをホストするのに最適ですか？

この記事では、デプロイとホスティングに関するNext.jsの詳細について説明し、Jamstack Webサイトを公開する際の最も一般的な4つの手順を紹介し、それらを使用して最も人気のある4つのホスティングプロバイダーを比較します。

デプロイにおけるNext.jsの詳細

Next.jsは、Jamstackまたは事前に生成されたサイトを構築するためのJavaScriptフレームワークです。これはReactに基づいており、最も近い競合相手はGatsbyです。 Next.jsは、静的サイトを超えて、すべての開発者がページを事前に生成するか、サーバー側でレンダリングするか、クライアント側で作成するかを決定できるため、開発コミュニティで非常に人気があります。ただし、完全に事前生成されたサイトを目指している場合でも、サーバーでレンダリングされたエディターのプレビューを利用できます。

この利点を活用したい場合は、展開が少し複雑になります。サーバー側でレンダリングされたページがあり、それらには、CDNを提供する静的ファイルだけでなく、真のサーバーが必要です。

Next.jsサイトをホストする3つの方法は次のとおりです。

• サーバー側の機能を持たない、CDN上に事前に生成された真の静的ファイル
  例：Azure Static Web Apps、AWS Amplify、GitHub Pages
• Next.jsの本番サーバーを使用するNode.jsホスティング
  例：Heroku、MS Azure、Digital Ocean
• 一部は事前に生成された静的ファイルであり、一部はサーバーレス機能としてホストされているサーバー側の機能
  例：Vercel、Netlify、Layer0

静的ファイルをCDN経由で提供でき、構成が少なくて済み、各コードブロックを個別にスケーリングできるため、個人的には最後のものを好みます。

ここで重要なのは、すべてのホストがすべてのNext.jsモードをサポートしているわけではないということです。それらの大部分は、真の事前生成サイトのみをサポートし、サーバー側コードのソリューションを提供しないため、Next.jsの最大の機能（インクリメンタル静的再生成、インスタントプレビュー、その他の可能なもの）をサポートしていません。クライアントで動作します。

Next.jsを完全に実行できる4つのプロバイダー、Vercel、Netlify、Heroku、Layer0を選びました。それらを比較するために、3つのページモードすべてを使用するページを含むNext.jsで構築された独自のサイトを使用しました。

• ブラウザでJSバンドルを使用してページを構成するクライアント側コード（ブログページとフィルタ）
• サイト構築中に作成される事前生成されたページ（ Aboutページ）
• サーバー実行ロジックからのデータを必要とするページ（ Twitterページ）

そして、私はこれらの6つの側面をチェックしました：

• GitHubからサイトをデプロイする
• コードプッシュでサイトを自動的に再構築する
• コンテンツ公開時にサイトを自動的に再構築する
• パフォーマンスの検証
• 追加機能
• 価格と無料利用枠の制限

＃1GitHubからサイトをデプロイする

最初の使用例は、サイトをセットアップしてコードを初めてデプロイすることです。

ヴェルセル

そもそもNext.jsを作成したのはプラットフォームの背後にいる人々であるため、 VercelはNext.jsをデプロイする最も簡単な方法です。

ウィザードは、GitHubリポジトリを選択するように要求し、オーバーライドできる標準のNext.jsビルドコマンドを提供します。また、サイトを初めてデプロイする前に、この画面ですべての環境キーを定義することもできます。

Netlify

Netlifyはおそらく開発者の間で最も人気のあるホストであり、シンプルで直感的で高速なUIがその役割を果たしていると思います。新しいサイトウィザードでは、「詳細設定」を展開して、ビルドコマンドを構成したり、環境キーを追加したりできます。

Netlifyは、Next.jsサイトを作成していることを認識し、サーバー側のコードをNetlify関数としてデプロイするEssentialNext.jsビルドプラグインを自動的にインストールすることに注意してください。デフォルト設定が適切に機能します。

Heroku

Herokuでは、最初にサイトを作成する必要があります。その後、ダッシュボードにアクセスしてサイトをGitHubリポジトリに接続できます。

自動展開を構成できますが、UIは100％明確ではありません。環境変数を構成するには、[設定]タブと[構成変数]セクションに移動する必要があります。

デフォルトでは、Herokuのアプリをビルドして実行しますnext start起動するコマンドNext.jsの本番サーバーを。サーバーレス関数には何も変換されません—HerokuはNode.jsホスティングサービスです。問題は、Herokuがランダムなポートを使用し、Next.jsが3000を使用するように構成されていることです。したがって、Procfileという特別なファイルを追加してNext.jsサーバーが実行されるポートを調整する必要があります（ファイル名では大文字と小文字が区別されます）。

web: next start -p $PORT

Layer0

前述のすべてのホスティングプロバイダーはビルドツールも備えています。つまり、GitHubリポジトリからコードを取得し、ビルドしてデプロイし、ホストします。 Layer0は、GitHubからWebhook通知を受け取った後にコードをビルドする方法を提供しないため、手動でビルドしてデプロイするか、GitHubActionsなどのCIツールを活用する必要があります。

 npm i -g @layer0/cli

デプロイはこれらの2つのステップで実行され、Layer0が自動的にアプリを作成します。次に、その設定を調整し、環境変数を追加できます。

注：Layer0は、この記事で後述するいくつかの追加機能に関連する一連のパッケージを（開発依存関係として）サイトにインストールします。

結果：

＃2プッシュでの自動ビルド

コードを変更し、コミットして、GitHubリポジトリにプッシュします。 GitHubは、ビルドサーバーへのWebhook通知を作成します。ビルドサーバーは、サイトをビルドして本番環境にデプロイします。

結果：

＃3コンテンツ公開の自動ビルド

コンテンツの変更により、ビルドサーバーへのWebhook通知がトリガーされるため、シナリオはプッシュ時の自動ビルドと非常によく似ています。コンテンツ変更Webhook通知のターゲットであるURLが必要です。

ヴェルセル

[設定]と[Git]の下にデプロイフックを作成できます。

Netlify

[サイトの設定]、[ビルドとデプロイ]、[継続的デプロイ]の下にある[ビルドフック]セクションを見つけます。

Heroku

これらの通知の一意のURLの生成はサポートされていません。 Matteus Delogeが説明しているように、特別なAPIを介してGitHubプッシュ通知をモックすることで、この制限を回避できます。

 POST https: //kolkrabbi.heroku.com/apps//github/push
    'branch' : 'master'
} POST https: //kolkrabbi.heroku.com/apps//github/push
    'branch' : 'master'
}

また、CLIのいずれかでアプリケーションIDを取得する必要があります。

heroku apps:info --json

または別のAPI呼び出しによって：

 GET https: //api.heroku.com/apps/
    'Accept' : 'application/vnd.heroku+json; version=3'
} GET https: //api.heroku.com/apps/
    'Accept' : 'application/vnd.heroku+json; version=3'
}

両方のリクエストには、アカウント設定の下にあるAPIキーを含むAuthorizationヘッダーが必要です。

 Headers: {    'Authorization' : 'Bearer '
} 

もう1つのオプションは、ビルドプロセスを、ビルドをトリガーするためのより優れた機能を備えたGitHubActionsなどの別のツールに移動することです。

Layer0

プラットフォームは、ビルドプロセスをホストすることを提供していません。あなたのようなツールに移動する必要がGitHubのアクションとそこウェブフック通知を処理します。

結果：

注：ここで説明するように、増分静的再生成を使用してサイトを最新の状態に保つこともできます。そうすれば、Webhookを構成して使用する必要がなくなります。

＃4パフォーマンスを確認する

このカテゴリでは、ビルドプロセスとフロントエンドのパフォーマンスの両方を評価しました。デプロイされた4つのサイトすべてでweb.devテストを使用し、実装でいくつかの調整を行う必要があることを学習したほか、ホストごとに、実際のホスティングサーバーに関連する2つのメトリックを記録しました。

• 最初の満足のいくペイント
  つまり、最初のコンテンツが空白のブラウザキャンバスに表示されるまでにかかる時間です。
• 最大の満足のいくペイント
  ビューポート内でブロック表示される最大の画像またはテキストのレンダリング時間。

各メトリック（最初のビルド時間を除く）に焦点を当てた3つのテストを実行し、それらの平均値を計算しました。

* Layer0展開プロセスは、ローカルマシン上にサイトを構築してから展開するため、これらの数値はコンピューターの電源とネットワーク接続の影響を受けました。 CIツールからのデプロイメントでは異なる場合があります。

注：事前生成されたページとSSRページのコンテンツは異なるため、同じ行の結果のみが比較可能です。

＃5追加機能

これらの各プラットフォームは、サイトまたは高度なシナリオの最適化に対処するのに役立ついくつかの追加機能を提供します。

ヴェルセル

このサイトはNextv10を実行しているため、VercelのAnalyticsを最大限に活用できます。 Vercelは、web.devなどのツールを使用してWebバイタルを測定する代わりに、実際の訪問者のエクスペリエンスに関する洞察を提供します。デプロイされたサイトからデータを収集し、デバイスと時間でフィルタリングできる要約を作成します。アナリティクスはサイトのすべてのページで利用できるため、パフォーマンスの悪いページをすばやく特定することができます。

結果：8/10

Netlify

Netlifyは分析も提供しますが、訪問者からデータを収集することはできません。サーバー側でデータを収集します。この機能を有効にするには、有料プランにアップグレードする必要があります。

Netlifyは、ID管理、A / Bテストなど、Jamstack（およびそれ以降）のサイトを簡素化するように設計された複数の追加機能を提供します。すべてのサイトでこれらの拡張機能が必要なわけではありませんが、ほとんどの場合、フォームの送信を管理する必要があります。 Netlifyのフォーム管理により、迅速な統合が可能になります。

また、Netlify管理の同じUIですべての送信を収集します。

電子メール/ Webhook / Slack通知、reCaptcha、およびファイルのアップロードをサポートします。

結果：10/10

Heroku

HerokuにデプロイされたサイトはNode.jsアプリとして実行されるため、プラットフォームは、メモリ使用量、スループット、応答時間などのサーバーメトリックを監視するためのツールを提供します。トラフィックのピークを処理するように自動スケーリングを構成することもできます。

HerokuでNext.jsサイトをホストすると、抽象化の点で1レベル高くなります。 HerokuはNext.jsを直接サポートしていません。それをホストするためのツール（Node.jsサーバー）を提供します。 Herokuは、多くのユースケースとプラットフォーム向けのサーバーレベルのアドオンのギャラリーを提供していますが、それらはいずれもNext.jsまたはJamstackに固有のものではありません。ただし、一部のプロジェクトでは、この自由がメリットになる場合があります。

結果：3/10

Layer0

デプロイメントセクションで、Layer0がいくつかの開発NPMパッケージをサイトに追加することに不満を述べました。ここで私はその理由を学びました。デプロイされたサイトには、アクセスしたすべてのページのネットワーク統計を表示する開発ツールが表示されます。ファイルが提供された場所で、ページに必要なすべてのアセットをロードするのにかかった時間がわかります。それに加えて、バンドルがロードされ、ページ間の移動がローカルで処理されると、リクエストは発生しません。とてもかっこいい。

それとは別に、Layer0は、すべてのページのヘッダーに追跡スクリプトを配置する限り、サイトのコアWebバイタルを追跡できます。また、単一サイトの複数の環境をサポートしているため、サイトのプレビューバージョンが必要な場合のセットアップが簡単になります。

結果：10/10

＃6価格と無料利用枠の制限を確認する

すべてのプラットフォームは無料プランを提供します。この表は、スコープ内の各ホストによって提供される機能を示し、支払いを開始する必要がある時期を示しています。

	ヴェルセル	Netlify	Heroku	Layer0
カスタムドメイン	はい	はい	はい、ただしSSLなしのみ	はい
商業プロジェクト	番号	はい	番号	番号
展開	100 /日	無制限	無制限	無制限
サーバーレス機能	12 /展開	125k実行/月	適用できません	100時間/月
サーバーレス関数のタイムアウト	10秒	10秒	リクエストの30秒のタイムアウト	20代
チームメンバー	1	1	5	3
ビルド時間	45m /展開 100時間/月	300分/月	無制限	適用できません
分析	はい	番号	番号	はい
帯域幅	100GB /月	100GB /月	2TB /月	100GB /月
常にオン	はい	はい	30分後に眠る	はい

無料プランは同等であり、どの制限がボトルネックになるかはプロジェクトによって異なります。

結論

	ヴェルセル	Netlify	Heroku	Layer0
最終結果	48/50	48/50	31/50	23/50

それで、どれが最高ですか？いつものように特効薬はなく、選択はプロジェクトと開発者によって異なります。このテストでホストが受け取ったポイントが少なかったとしても、それが悪いサービスであるとは限りません。各プラットフォームのさまざまな可能性と特定のプロジェクトの要件により、結果がシャッフルされ、別の方向に進む可能性があります。

私はサーバーレス機能の助けを借りてCDNでサイトをホストするのが好きです。メンテナンスはほとんど必要なく、簡単かつきめ細かくスケーラブルです。また、ホスティングプラットフォームが構成なしでビルドを自動的に処理し、コードやコンテンツが変更された場合にビルドをトリガーできる場合にも気に入っています。これにより、DevOpsのエキスパートになるのではなく、コードにとどまることができます😊。

あなたがあなたのサイトをホストしている場所とその理由を私たちのDiscordで教えてください😎。