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 を使用することを検討してください。