Jump to content

Netlify

Netlify は Vercel の代替となり得る同系統のデプロイメントプロバイダです。本ドキュメントに基づいたサンプルリポジトリは ajcwebdev/ct3a-netlify を参照してください。

Netlify でホスティングする理由

従来からの知識では、Vercel では Next.js のサポートが優れているとされています。これは Vercel が Next.js を開発しているためで、Next.js の最適なパフォーマンスと DX のためのチューニングに Vercel プラットフォームは大きな関心をもっています。多くのユースケースではそのとおりであり、この「標準的な道筋」から逸脱しても意味がありません。

また一般に、多くの Next.js の機能が Vercel でのみサポートされているという意見もあります。確かに新しい Next.js の機能はリリース時にデフォルトで Vercel でテストされサポートされることは事実ですが、Netlify のような他のプロバイダも、安定した Next.js 機能に対してすぐに実装およびリリースサポートを提供することがあります。

結局のところ、すべてのデプロイメントプロバイダーには相対的な長所と短所があり、一つのホストがすべてのユースケースに対して最高のサポートを提供できるわけではありません。例えば、Netlify では、Netlify のエッジファンクション(Deno Deploy 上で動作)用に、独自のカスタム Next.js ランタイムを構築し、HTTP レスポンスにアクセスへのアクセスと変更のための独自のミドルウェアをメンテナンスしています。

ℹ️

no-stableのNext 13の機能のステータスを追跡するには、Next 13のapp ディレクトリをNetlify上で使うを参照してください。

プロジェクトの設定

ビルド手順を設定する方法は、Netlify CLI や Netlify ダッシュボードを使って直接ビルド命令を設定するなど、たくさんあります。必須ではありませんが、netlify.tomlファイルを作成して含めることをお勧めします。これにより、プロジェクトのフォークやクローン版を再現性をもって簡単にデプロイすることができます。

[build]
  command = "next build"
  publish = ".next"

Netlify Dashboard の使用方法

  1. コードを GitHub リポジトリにプッシュし、Netlifyにサインアップしてください。アカウントを作成したら、Add new site から Import an existing project をクリックします。

Netlify の新プロジェクト

  1. Git プロバイダーを接続します。

リポジトリのインポート

  1. プロジェクトのリポジトリを選択します。

プロジェクトのリポジトリを選択する

  1. Netlify は netlify.toml ファイルがあるかどうかを検出し、ビルドコマンドと公開ディレクトリを自動的に設定します。

Nextjs のビルド設定

  1. Show advanced」→「New variable」をクリックして、環境変数を追加します。

環境変数の追加

  1. Deploy site」をクリックし、ビルドが完了するのを待ち、新しいサイトを表示します。

Netlify CLI の使用方法

コマンドラインからデプロイするには、まずプロジェクトを GitHub のリポジトリにプッシュし、Netlify CLI をインストール する必要があります。netlify-cli はプロジェクトの依存関係としてインストールするか、以下のコマンドでマシンにグローバルにインストールすることができます:

npm i -g netlify-cli

ローカルでプロジェクトをテストするには、ntl dev コマンドを実行し、localhost:8888 を開いてローカルで動いている Netlify アプリを表示します:

ntl dev

ntl initコマンドを実行してプロジェクトを設定します:

ntl init

.env ファイルからプロジェクトの環境変数を ntl env:import でインポートしてください:

ntl env:import .env

ntl deployでプロジェクトをデプロイします。デプロイ前にビルドコマンドを実行するには --build フラグを、サイトのメイン URL にデプロイするには --prod フラグを渡す必要があります:

ntl deploy --prod --build

Netlify での実行例は、ct3a.netlify.appでご覧ください。