Zenn
🚀

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

2021/10/02に公開・約4,500字
Next.js
tech

この記事について

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

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

静的 HTML のエクスポート

例

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

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

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

使用方法

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 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の使用時にはサポートされません。ただし、他のローダーオプションは動作します。

Discussion

ログインするとコメントできます