Next.jsで静的HTMLを出力（build）する方法

Next.js で SSR（Server Side Rendering）するファイルを静的な HTML に変換して出力する方法です。

Next.jsで静的HTMLを出力する方法

Next.js で SSR（Server Side Rendering）するファイルを静的な HTML に変換して出力する方法です。

静的 HTML を出力するには Next.js の build コマンドを実行します。

実行するには package.json に設定を追加する必要があります。

まだ設定されていない方は下記の記事を参考にしてpackage.json に設定を追加し index.js を作成してください。

Next.jsでReactをSSR（Server Side Rendering）する

Next.jsを使ってReactのコンポーネントをSSR（Server Side Rendering）して表示してみます。

lightgauge.net

設定が完了したら起動ディレクトリで以下のコマンドを実行します。

npm run build

実行すると以下のような表示がされます。

C:\next-js>npm run build

> next-test@1.0.0 build C:\next-js
> next build

info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (4/4)
info  - Finalizing page optimization

Page                                                           Size     First Load JS
┌ ○ /                                                          518 B          64.4 kB
├ ○ /404                                                       3.46 kB        67.4 kB
└ ○ /isys-web/next-js/web_test                                 633 B          64.6 kB
+ First Load JS shared by all                                  63.9 kB
  ├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.94a006.js  13.6 kB
  ├ chunks/framework.e3de07.js                                 41.8 kB
  ├ chunks/main.b20a23.js                                      6.85 kB
  ├ chunks/pages/_app.ab79ef.js                                1.01 kB
  └ chunks/webpack.50bee0.js                                   751 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
C:\next-js>

作成が完了すると C:\next-js\.next\server\pages 配下に index.html が作成されているのでそれをブラウザーで読み込むと作成した静的 HTML が表示されます。