NetlifyでNext.jsをVercelと同じ機能でホスティングする

はじめに

Netlify公式の記事をちょっとかみ砕いた和訳 + headless CMSでSSG & プレビュー機能を追加するときの設定　みたいな記事になってます。

Vercelは無料プランでの商用利用が不可なので、小さいプロジェクトを無料で商用利用したい際にNetlifyがあがってくるかと思います。

前にちょっとハマったのでメモ。

リポジトリ

今回の記事で作成したリポジトリは以下になります。.env.example をコピーして .envを作り、環境変数を入力して使ってください。（今回はおなじみのmicroCMSを使用しました。）

Github Repository

microCMSの設定は以下の記事で書いたものと同じです。
https://qiita.com/itomise/items/fd7c9977aee6469378d0

Step 1: Next.jsのリポジトリを作る

Next.jsでリポジトリを作ります。
最小の構成として、こちらのリポジトリが紹介されてますが、設定が少し違うので注意してください。

next.config.jsに以下のプロパティを設定します。

next.config.js

module.exports = { target: 'serverless' }

環境ができたら、Github等にpushしてください。

注意

いろんな記事で next-on-netlify や @netlify/plugin-nextjs をインストールする事や netlify.toml を作成して設定を記述することが書いてありますが、リポジトリ上でNetlifyに関する設定を行う必要はありませんでした。
モジュールがインストールされているとNetlifyのNext.js用の機能がうまく動かなかったりしたので、追加している場合は削除してください。

Step 2: Netlify UIを使う

元の記事ではOption 1として Netlify CLIを使う方法が紹介されてますが、今回は Option 2の Netlify UI（Netlifyのダッシュボート上での操作）を使った方法でやっていきたいと思います。

Netlifyのアカウントを持っていない場合はこちらから作ってください。

1. こちらから、Netlifyのプロジェクトを作ります。
2. 先ほど作成したリポジトリのGit Providerを選択してください。
3. 該当のリポジトリを検索して選択します。
4. 下記画像の画面になったら、Build command を next build・Publish Directory を 空欄にします。
5. headless CMSなどで環境変数を使用している場合は、Show advanced ボタンから追加します。

注意

ここでビルドが完了してもサイトは見れないので注意してください。
（コマンドを next build && next export にして Publish Directoryを out にすると静的サイトとしてデプロイできますが、今回はプレビュー機能も実装したいので、next build にしているため）

Step 3: Next on Netlify Plugin を追加する

Next.jsの以下の機能を使えるようにするプラグインを追加します。

• 動的パス
• API Route
• Preview Mode

Install the Next on Netlify Plugin
（クリックするとどのプロジェクトにインストールするか聞かれるので、該当のプロジェクトを選択してください）

Step 4: Next.js Cache Plugin を追加する（やりません）

自分のリポジトリの babelの設定でキャッシュ周りの処理がコンフリクトしてエラーがでたので、これはやりませんでした。
これを追加するとビルドのキャッシュが効くようになるので、2回目以降のビルドがかなりはやくなります。

完了！

これでAPI Routeなども保ったままデプロイできました。
プレビュー機能やHeadless CMSからの Webhook 等はほぼVercelと一緒で簡単に設定できました。