本番ビルド

ここまでずっと開発モードだった

npm run dev で立ち上げていたサーバーは、開発中だけのものです。ファイルを保存するたびに、その場で必要なぶんだけ作り直して画面に反映してくれます。手を動かしている間はとても便利ですが、本番でこれを使うことはありません。作り直しの仕組みを常に抱えているぶん重く、エラーの中身もそのまま画面に出るからです。

人に見せるときは、先に一度だけまとめて作り、あとはできあがったものを配るだけにします。それが本番ビルドです。

2つに分かれている

本番は、作る側と配る側の2つに分かれています。

next build が作る側です。app/ の中を全部読んで、TypeScript を JavaScript に直し、名前を短くし、あらかじめ組み立てられるページは HTML にしてしまいます。できあがったものは .next というフォルダに入ります。ここで型のエラーが1つでもあると止まるので、build が通ることそのものが点検になります。

next start が配る側です。.next の中身をそのまま返します。読むだけなので速く、ページを開くたびに作り直したりはしません。

順番は決まっていて、build してから start です。build せずに start すると、配るものが無いと言われて止まります。

package.json に名前を付けておく

この3つは毎日打つので、package.json の scripts に名前を付けておきます。create-next-app で作ると最初から入っていますが、中身を知らずに使うのはもったいないので、自分で書いてみます。

こう書いておくと npm run dev で next dev が動きます。デプロイ先のサービスも、この scripts を見て build と start を呼びます。名前を変えてしまうと公開のときに動かなくなるので、この3つは決まった名前のままにします。

演習

package.json の scripts を3つ書き、開発モードと本番モードの違いを表にまとめます。