静的HTMLのエクスポート

例

• 静的エクスポート

next export では、Next.js アプリを静的な HTML にエクスポートできて、Node.js サーバを必要とせずともスタンドアロンで実行できます。It is recommended to only use next export if you don't need any of the unsupported features requiring a server.

If you're looking to build a hybrid site where only some pages are prerendered to static HTML, Next.js already does that automatically. Learn more about Automatic Static Optimization and Incremental Static Regeneration.

next export

Update your build script in package.json to use next export:

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

Running npm run build will generate an out directory.

next export builds an HTML version of your app. During next build, getStaticProps and getStaticPaths will generate an HTML file for each page in your pages directory (or more for dynamic routes. Then, next export will copy the already exported files into the correct directory. getInitialProps will generate the HTML files during next export instead of next build.

より高度なシナリオでは、exportPathMap というパラメータを next.config.js ファイルに定義して、どのページが生成されるかを正確に設定できます。

Supported Features

The majority of core Next.js features needed to build a static site are supported, including:

• Dynamic Routes when using getStaticPaths
• Prefetching with next/link
• Preloading JavaScript
• Dynamic Imports
• Any styling options (e.g. CSS Modules, styled-jsx)
• Client-side data fetching
• getStaticProps
• getStaticPaths
• Image Optimization using a custom loader

Unsupported Features

Features that require a Node.js server, or dynamic logic that cannot be computed during the build process, are not supported:

• Image Optimization (default loader)
• Internationalized Routing)
• API Routes
• Rewrites
• Redirects
• Headers
• Middleware
• Incremental Static Regeneration
• fallback: true
• getServerSideProps

getInitialProps

It's possible to use the getInitialProps API instead of getStaticProps, but it comes with a few caveats:

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

We recommend migrating towards getStaticProps over getInitialProps whenever possible.