Next.js で React の Server-side Rendering と Static Generation をやる #5 デプロイ

前回の記事

今回は

• Next.js を Vercel のサーバーデプロイする方法（Next.js のチュートリアルにある内容）
• Vercel 以外のサーバー（Netlify）へのデプロイはどうすれば良いのか

についてやりますので、デプロイだけ知りたい場合は、この記事だけでも読めます。

Next.js についてよく知らない場合は、前回までの記事を読んでください。

• #1 Next.js の思想や概要の説明、Dockerでの開発環境構築
• #2 Next.js の基本的な使い方
• #3 Server-side Rendering と Static Generation ^ #4 Dynamic Routing

今回はこのチュートリアルをやっていきます。

https://nextjs.org/learn/basics/deploying-nextjs-app

Vercel にデプロイする

第一回でも以下の記事を紹介しましたが、 Next.js をデプロイするなら Vercel が一番簡単です。

qiita.com

Server-side Rendering をする場合、サーバーサイドで node.js が動かないといけないので、 Netlify や、 AWS S3 のような、静的コンテンツの配信をするサービスにはデプロイできません。

Static Generation の場合は Netlify や S3 にもデプロイできますが、手元の PC で静的にビルドしたものをアップロードする形になります。

今回使うコード

github.com

Vercel のアカウントは作ってあるものとします。私は GitHub アカウント連携で作りました。

Add GitHub Org or Account で、自分の GitHub アカウントを選択し、

Only select repository で、 nextjs-blog だけ権限を与えるようにしました。

特に設定などは変更せず、デフォルトのままでデプロイました。

https://nextjs-blog-six-drab.vercel.app/

Next.js と Vercel の相性が良い理由

Static Generation で生成されたページや、CSS などのアセットは、自動的に Edge Network （CDN）から配信されるようになります。

Server-side Rendering や API Routes は、Serverless Functions になります。

他にも色々特徴があります

• カスタムドメイン
• 環境変数
• 勝手に HTTPS 対応

プルリクエストするごとにプレビュービルドする

プルリクエストを作成するとビルドが走ります。vercel bot からプルリクにコメントで、プレビューのURLが貼られます。

Static Generation されたファイルを Netlify にデプロイするにはどうするのか

通常 Next.js は node のサーバーが立ち上がって、その上で動作するのですが、 Netlify などにデプロイするには、静的ファイルとして出力させる必要があります。

そのためのコマンドが next export なので、 package.json の scripts に追記します。

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },

export すると、 out ディレクトリに結果が出力されるので、それを Netlify で公開するようにします。

Server-side Rendering が使われている場合は動かないと思います。