next export
では、アプリを静的な HTML にエクスポートできて、Node.js サーバを必要とせずともスタンドアロンで実行できます。
エクスポートされたアプリは、動的ルーティング、プリフェッチ、プリロード、動的インポートなど、Next.js のほぼすべての機能をサポートしています。
next export
は、すべてのページを HTML にプレレンダリングすることで動作します。動的ルーティングの場合、ページはそのルーティング用に生成する HTML ページをエクスポータに知らせる getStaticPaths
関数をエクスポートできます。
next export
は、サーバサイドやインクリメンタルデータを必要としないページのシナリオを想定しています(ただし、静的にレンダリングされたページはクライアントサイドでデータを取得することができます)。一部の ページのみを静的 HTML にプリレンダするハイブリッドサイトを作りたい場合、Next.js はすでに自動で静的最適化を行っています。詳しくはAutomatic Static Optimizationをお読みください。
next export
では、next start
またはサーバーレスデプロイが機能するために必要な、インクリメンタル静的ジェネレートやリジェネレーションのような機能も無効になります。
Next.js を使って通常通りにアプリを開発します。その後、次のコマンドを実行します:
next build && next export
package.json
の scripts を以下のように更新するとよいでしょう:
"scripts": {
"build": "next build && next export"
}
次のコマンドで実行できます:
npm run build
そうすると、out
ディレクトリに静的バージョンのアプリが作成されます。
デフォルトでは next export
の設定は必要ありません。pages
ディレクトリ内のページごとに静的な HTML ファイルが出力されます(動的ルーティングの場合は、getStaticPaths
を呼び出し、結果に基づいてページを生成します)。
より高度なシナリオでは、exportPathMap
というパラメータを next.config.js
ファイルに定義して、どのページが生成されるかを正確に設定できます。
Next.js のアプリケーションをデプロイするにはデプロイのセクションを参照してください。
next export
では、アプリの HTML 版を作成します。エクスポート時には、エクスポートしたページごとに getStaticProps
を呼び出し、その結果をそのページのコンポーネントに渡します。また、getStaticProps
の代わりに古い getInitialProps
API の使用は可能ですが、いくつかの注意事項があります:
getInitialProps
は、任意のページで getStaticProps
や getStaticPaths
と一緒に使うことはできません。動的ルーティングがある場合は、getStaticPaths
を使用する代わりに、next.config.js
ファイルの exportPathMap
パラメータを設定して、出力すべき HTML ファイルをエクスポータに知らせる必要があります。getInitialProps
が呼び出された場合、エクスポート中はサーバが動作していないため、context
パラメータの req
と res
フィールドは空のオブジェクトになります。getInitialProps
はすべてのクライアント側のナビゲーションに対して呼び出されるので、もしビルド時のみデータを取得したい場合は getStaticProps
に切り替えてください。getInitialProps
は getStaticProps
のように Node.js 固有のライブラリやファイルシステムを利用できません。getInitialProps
は API から取得しなければなりません。静的なエクスポートでは、getInitialProps
よりも getStaticProps
API の方が常に優先されます: 可能であれば、getStaticProps
を使用してページを変換することをお勧めします。
next export
を使っているときは、getStaticPaths
の fallback: true
モードはサポートされていません。
HTML ファイルは事前にビルドされているため、静的エクスポート時に HTML を動的にレンダリングできません。next export
を使用しない場合、アプリケーションは静的生成とサーバーサイドレンダリングの混合になる可能性があります。ページのセクションで詳しく説明しています。
API ルーティング は HTML にプリレンダリングできないため、このメソッドではサポートされていません。
getServerSideProps
はサーバーを必要とするメソッドのため、ページ内では使用できません。代わりに getStaticProps
を使用することを検討してください。