Zenn
⛳

Next.jsのコマンドについてメモ

に公開
React
tech

色々確認していたのでメモ。

調べたモチベーションとしては、「Next.jsでカスタムサーバーを利用しているが、yarn startをするとサーバーが動作していない」ことの原因と解決方法を知りたい。

next dev

development modeでアプリを実行。

next start

production modeでアプリを実行。
実行の前提として、next buildでproduction用に最適化されたビルド済みファイルを用意する必要がある。

next build

production用に最適化されたビルド済みファイルを用意する。

詳細は以下に書かれている。
https://nextjs.org/docs/deployment

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