︙

Static Exports

Next.js は、静的サイトまたはシングルページアプリケーション(SPA)として開始し、その後オプションで、require した server の機能を使用するためのアップグレードを可能にします。

next buildを実行すると、Next.js は route ごとに HTML ファイルを生成します。厳密な SPA を個々の HTML ファイルに分けることで、Next.js は Client 側で不必要な JavaScript code の loading を回避し、バンドル size を削減してページの読み込みを高速化することができます。

Next.js がこの静的な export をサポートしているため、HTML/CSS/JS の静的アセットを提供できる任意のウェブ server にデプロイおよびホスティングできます。

Good to know: 強化された静的な export サポートのために、 App Router の使用をおすすめします。

Configuration

next.config.jsの中で出力モードを変更し、静的な export を有効にします：

next.config.js

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',

  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
  // trailingSlash: true,

  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
  // skipTrailingSlashRedirect: true,

  // Optional: Change the output directory `out` -> `dist`
  // distDir: 'dist',
}

module.exports = nextConfig

next buildを実行した後、Next.js はあなたのアプリケーションのための HTML/CSS/JS の資産を含むoutフォルダーを生成します。

あなたは getStaticProps と getStaticPathsを利用して、pagesディレクトリ内の各ページに対する HTML ファイル(または dynamic routes のようなもの)を生成することができます。

Supported Features

静的なサイトを build するために必要な Next.js の主要な機能の大部分がサポートされています、これには以下が含まれます：

getStaticPathsを使用する際の Dynamic Routes
next/linkを使ったプリフェッチ
Preloading JavaScript
Dynamic Imports
任意のスタイリング options (例えば、CSS Modules, styled-jsx)
Client 側データフェッチング
getStaticProps
getStaticPaths

Image Optimization

Image Optimization は、next.config.jsでカスタムの image loader を定義することにより、静的な export と共にnext/imageを用いて使用できます。例えば、Cloudinary のようなサービスで画像を最適化することができます:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  images: {
    loader: 'custom',
    loaderFile: './my-loader.ts',
  },
}

module.exports = nextConfig

このカスタムの loader は、リモートの source から画像を fetch する方法を定義します。たとえば、以下の loader は Cloudinary の URL を構築します。

my-loader.ts

export default function cloudinaryLoader({
  src,
  width,
  quality,
}: {
  src: string
  width: number
  quality?: number
}) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

my-loader.js

export default function cloudinaryLoader({ src, width, quality }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(
    ','
  )}${src}`
}

その後、アプリケーションでnext/imageを使用し、Cloudinary の image への paths を相対的に定義することができます：

app/page.tsx

import Image from 'next/image'

export default function Page() {
  return <Image alt="turtles" src="/turtles.jpg" width={300} height={300} />
}

app/page.js

import Image from 'next/image'

export default function Page() {
  return <Image alt="turtles" src="/turtles.jpg" width={300} height={300} />
}

Unsupported Features

Node.js server が必要な require 機能や、build プロセス中に計算できない dynamic ロジックはサポートされていません：

国際化ルーティング
API Routes
Rewrites
Redirects
Headers
Middleware
Incremental Static Regeneration
Image Optimization で、 default の loader
Draft Mode
getStaticPathsとfallback: trueを使用
getStaticPathsとfallback: 'blocking'
getServerSideProps

Deploying

静的な export を使って、HTML/CSS/JS の静的アセットをサーブできるあらゆるウェブ server で Next.js をデプロイおよびホストできます。

next buildを実行すると、 Next.js は静的な export をoutフォルダに生成します。例えば、次のような routes があるとします。

/
/blog/[id]

next buildを実行した後、Next.js は以下のファイルを生成します：

/out/index.html
/out/404.html
/out/blog/post-1.html
/out/blog/post-2.html

静的な host、例えば Nginx を使用している場合、着信 Request を適切なファイルに rewrites するよう設定できます：

nginx.conf

server {
  listen 80;
  server_name acme.com;

  root /var/www/out;

  location / {
      try_files $uri $uri.html $uri/ =404;
  }

  # This is necessary when `trailingSlash: false`.
  # You can omit this when `trailingSlash: true`.
  location /blog/ {
      rewrite ^/blog/(.*)$ /blog/$1.html break;
  }

  error_page 404 /404.html;
  location = /404.html {
      internal;
  }
}

Version History

Version	Changes
`v14.0.0`	`next export`は`"output": "export"`に優先して削除されました
`v13.4.0`	App Router (安定版)は、強化された静的 export のサポートを追加し、React Server Components および Route ハンドラの使用も含まれています。
`v13.3.0`	`next export`は廃止され、`"output": "export"`に置き換えられました