とーますメモ

Ruby on Rails / Goなどの学習メモ

【Next.js】Netlifyの設定についてのメモ

Netlify Next.js

目標1: Next.jsプロジェクト（プレレンダリング + SSG）をNetlifyで公開したい
目標2: Next.jsプロジェクト（SSR + SSG）をNetlifyで公開したい

Netlifyアカウント作成

基本的には以下のサイトさんをみて設定
【5分で公開・簡単】Netlifyの使い方を解説する - GOOTA TECH

  1. GithubアカウントでSign up
  2. プロジェクトの作成
  3. Git ProviderにGithubを選択
  4. Netlifyに紐付けるリポジトリの設定

目標1: Next.jsプロジェクト（プレレンダリング + SSG）をNetlifyで公開したい

デプロイ設定

netlify.tomlで設定する。このファイルが存在している場合、NetlifyのBuild settingにある設定は無視される。

[build]
  command = "npm run build && npm run export"
  publish = "out"

[[plugins]]
  package = "@netlify/plugin-nextjs"
[[plugins]]
  package = "netlify-plugin-cache-nextjs"

これでプレレンダリングとSSGのみで構成されているNext.jsプロジェクトのデプロイ設定ができる。npm run exportの設定は、予めpackage.jsonに記述されている必要がある。
ない場合「Deploy directory 'out' does not exist 」というエラーが出る。
deployment - Deploy did not succeed: Deploy directory 'out' does not exist - Stack Overflow

デプロイは「Deploy site」のボタンをクリックすることで、ビルドされそのファイルがoutディレクトリに配置される。

目標2: Next.jsプロジェクト（SSR + SSG）をNetlifyで公開したい

デプロイ設定

同じくnetlify.tomlで設定する。静的サイトではなくSSRが入ることで動的リクエストになるため、exportとpublishの設定を除外し、next.config.jsのtargetに"serverless"を設定する。

netlify.toml

[build]
  command = "npm run build"

[[plugins]]
  package = "@netlify/plugin-nextjs"
[[plugins]]
  package = "netlify-plugin-cache-nextjs"

next.config.js

module.exports = {
  ...
  target: 'serverless',
  ...
};

これで「Deploy site」のボタンを押すか、mainブランチにpushすると自動的にビルドが走り、SSRプロジェクトがデプロイされる。

補足

昔は、SSRをNetlify上で使用するには、Next on Netlifyプラグインをインストールする必要があったらしいが、今はこのプラグインは廃止され、標準パッケージであるnext.js build pluginが代わりに使用される。tomlファイルを使用しない場合は、標準で入っているので何もしないで良いが、

As of v3.0.0, all new sites deployed to Netlify with Next.js will automatically install this plugin for a seamless experience deploying Next.js on Netlify!

This means that you don't have to do anything — just build and deploy your site to Netlify as usual and we'll handle the rest.

GitHub - netlify/netlify-plugin-nextjs: A build plugin to integrate Next.js seamlessly with Netlify

使用する場合は以下のようにプラグインとして指定する必要がある。

package = "@netlify/plugin-nextjs"

[参考]
https://wp-kyoto.net/netlifynext-jsssrserverless-mode/
next.config.js: 构建目标 | Next.js