猫でもわかるWebプログラミング

試行錯誤しながらエンジニア(プログラマー)として働く猫のブログ。技術的な話や、働き方の話、読書録とか、試行錯誤している日常の話。

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

前回の記事

今回は

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

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

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

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

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 アカウントを選択し、

f:id:yoshiki_utakata:20210206152039p:plain

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

f:id:yoshiki_utakata:20210206152126p:plain

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

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 が使われている場合は動かないと思います。