本番ビルド
ここまでずっと開発モードだった
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 で作ると最初から入っていますが、中身を知らずに使うのはもったいないので、自分で書いてみます。
JSON
{
"scripts": {
"dev": "next dev"
}
}こう書いておくと npm run dev で next dev が動きます。デプロイ先のサービスも、この scripts を見て build と start を呼びます。名前を変えてしまうと公開のときに動かなくなるので、この3つは決まった名前のままにします。
演習
package.json の scripts を3つ書き、開発モードと本番モードの違いを表にまとめます。