Next.jsのコマンドについてメモ
色々確認していたのでメモ。
調べたモチベーションとしては、「Next.jsでカスタムサーバーを利用しているが、yarn startをするとサーバーが動作していない」ことの原因と解決方法を知りたい。
next dev
development modeでアプリを実行。
next start
production modeでアプリを実行。
実行の前提として、next buildでproduction用に最適化されたビルド済みファイルを用意する必要がある。
next build
production用に最適化されたビルド済みファイルを用意する。
詳細は以下に書かれている。
buildをするとHTML, CSS, JSが最適化された形で、.nextフォルダに出力される。
- HTML files for pages using getStaticProps or Automatic Static Optimization
- CSS files for global styles or for individually scoped styles
- JavaScript for pre-rendering dynamic content from the Next.js server
- JavaScript for interactivity on the client-side through React
JSのコードについては次のように書かれている。
All JavaScript code inside .next has been compiled and browser bundles have been minified to help achieve the best performance and support all modern browsers.
カスタムサーバー
next.jsのCustom serverというのはどういうものか？
まずnext.jsにはそもそもbuild in serverが備わっている。でなければ、hot realodなどを駆使して開発できない。が、マルチプロセスにする場合などカスタムサーバーを自分の実装に切り替えることができる。
そのサーバーをカスタム＝自分の好きなように選べるような自由がnext.jsではデベロッパーに提供されている。
以下のフレームワーク/プラットフォームが現在利用可能になっている。
- Express integration
- Hapi integration
- Koa integration
- SSR Caching
公式の説明： https://nextjs.org/docs/advanced-features/custom-server
カスタムサーバーの利用を採用した場合
このような感じで定義する。
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js",
"export": "next export"
}
このとき、yarn startをする前にyarn buildをしておく必要がある。
Discussion