【Next.js和訳】Advanced Features/Static HTML Export
この記事について
この記事は、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