【Next.js和訳】Advanced Features/Static HTML Export

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、Advanced Features/Static HTML Exportの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

---

静的HTMLのエクスポート

例

• 静的エクスポート

next exportでは、アプリを静的なHTMLにエクスポートして、Node.jsサーバーを必要とせずに単体で実行することができます。

エクスポートされたアプリは、ダイナミックルート、プリフェッチ、プリロード、ダイナミックインポートなど、next.jsのほぼすべての機能をサポートします。

next exportは、すべてのページをHTMLにプリレンダリングすることで機能します。ダイナミックルートの場合、ページはgetStaticPaths関数をエクスポートして、エクスポーターにどのHTMLページを生成すべきかを知らせることができます。

next exportは、サーバーサイドやインクリメンタルなデータを必要とするページがない場合を想定しています（ただし、静的レンダリングされたページは、クライアントサイドでデータを取得することができます）。

一部のページだけを静的なHTMLにプリレンダリングするハイブリッドなサイトを作りたい場合は、Next.jsが自動的にそれを行ってくれます。詳しくは自動静的最適化をご覧ください。

next exportを実行すると、Incremental Static GenerationやRegenerationといった機能が無効になります。これらの機能を有効にするには、next startまたはサーバーレスデプロイメントが必要です。

使用方法

Next.jsを使って通常通りアプリを開発します。その後、実行します。

next build && next export

そのためには、package.jsonのスクリプトを以下のように更新するとよいでしょう。

"scripts": {
  "build": "next build && next export"
}

と実行してください。

npm run build

そうすれば、outディレクトリにアプリの静的バージョンができあがります。

デフォルトでは、next exportには何の設定も必要ありません。pagesディレクトリにある各ページごとに、静的なHTMLファイルを出力します（ダイナミックルートの場合は、getStaticPathsを呼び出し、その結果に基づいてページを生成します）。より高度なシナリオでは、next.config.jsファイルにexportPathMapというパラメータを定義して、どのページを生成するかを正確に設定することができます。

デプロイメント

デフォルトでは、next exportはoutディレクトリを生成し、静的ホスティングサービスやCDNで提供することができます。

Next.jsアプリが完全に静的なものであっても、Vercelの使用を強くお勧めします。Vercelは静的なNext.jsアプリが驚くほど高速になるように最適化されています。 next exportはVercel上のZero Configデプロイメントでも動作します。

注意点

• next exportでは、アプリのHTMLバージョンを作成します。エクスポート時には、エクスポートする各ページに対してgetStaticPropsを呼び出し、その結果をページのコンポーネントに渡します。getStaticPropsの代わりに旧来のgetInitialProps APIを使用することも可能ですが、これにはいくつかの注意点があります。

  • getInitialPropsは、任意のページでgetStaticPropsやgetStaticPathsと一緒に使うことはできません。動的なルートを持っている場合は、getStaticPathsを使う代わりに、next.config.jsファイルでexportPathMapパラメータを設定して、どのHTMLファイルを出力すべきかをエクスポーターに知らせる必要があります。
  • エクスポート中にgetInitialPropsが呼ばれると、contextパラメータのreqとresフィールドは空のオブジェクトになります。
  • getInitialProps は、クライアントサイドのナビゲーションごとに呼び出されます。ビルド時にのみデータを取得したい場合は、getStaticPropsに切り替えてください。
  • getInitialPropsはAPIからデータを取得する必要があり、getStaticPropsのようにNode.js固有のライブラリやファイルシステムを使用することはできません。

可能な限りgetInitialPropsよりもgetStaticPropsを使用し、移行することが推奨されます。

• getStaticPaths の fallback: true モードは、 next export を使用する際にはサポートされていません。

• APIルートは、HTMLにプリレンダリングすることができないため、このメソッドではサポートされません。

• getServerSidePropsは、サーバーを必要とするため、ページ内では使用できません。代わりに getStaticProps の使用を検討してください。

• Internationalized Routingは、Next.jsのサーバーサイドルーティングを必要とするため、サポートされていません。

• next/imageコンポーネントのデフォルトローダーは、next exportの使用時にはサポートされません。ただし、他のローダーオプションは動作します。

---