前回の記事

今回は

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

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

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

Vercel にデプロイする

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

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

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

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

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

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

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

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

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

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