静的エクスポート

Next.jsでは静的サイトやシングルページアプリケーション（SPA）として開始し、後からサーバーが必要な機能にオプションでアップグレードできます。

next buildを実行すると、Next.jsはルートごとにHTMLファイルを生成します。厳密なSPAを個別のHTMLファイルに分割することで、Next.jsはクライアントサイドで不要なJavaScriptコードの読み込みを回避でき、バンドルサイズを削減してページ読み込みを高速化できます。

Next.jsはこの静的エクスポートをサポートしているため、HTML/CSS/JS静的アセットを提供できる任意のWebサーバーにデプロイしてホストできます。

補足: 静的エクスポートの拡張サポートにはApp Routerの使用を推奨します。

設定

静的エクスポートを有効にするには、next.config.jsで出力モードを変更します:

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

  // オプション: リンク `/me` -> `/me/` に変更し、`/me.html` -> `/me/index.html` を生成
  // trailingSlash: true,

  // オプション: 自動的な `/me` -> `/me/` 変換を防止し、`href`を保持
  // skipTrailingSlashRedirect: true,

  // オプション: 出力ディレクトリを `out` -> `dist` に変更
  // distDir: 'dist',
}

module.exports = nextConfig

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

getStaticPropsとgetStaticPathsを使用して、pagesディレクトリ内の各ページ（またはダイナミックルートの場合はさらに多くのページ）のHTMLファイルを生成できます。

サポートされる機能

静的サイト構築に必要なNext.jsの主要機能のほとんどがサポートされています:

• getStaticPaths使用時のダイナミックルート
• next/linkによるプリフェッチ
• JavaScriptのプリロード
• ダイナミックインポート
• 任意のスタイリングオプション（CSS Modules、styled-jsxなど）
• クライアントサイドデータ取得
• getStaticProps
• getStaticPaths

画像最適化

next/imageによる画像最適化は、next.config.jsでカスタム画像ローダーを定義することで静的エクスポートと併用できます。例えば、Cloudinaryのようなサービスで画像を最適化できます:

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

module.exports = nextConfig

このカスタムローダーは、リモートソースから画像を取得する方法を定義します。例えば、次のローダーはCloudinary用のURLを構築します:

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}`
}

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内の画像への相対パスを定義できます:

import Image from 'next/image'

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

import Image from 'next/image'

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

サポートされない機能

Node.jsサーバーを必要とする機能や、ビルドプロセス中に計算できない動的ロジックはサポートされていません:

• 国際化ルーティング
• APIルート
• リライト
• リダイレクト
• ヘッダー
• ミドルウェア
• 増分的静的再生成
• デフォルトloaderの画像最適化
• ドラフトモード
• fallback: trueのgetStaticPaths
• fallback: 'blocking'のgetStaticPaths
• getServerSideProps

デプロイ

静的エクスポートを使用すると、Next.jsはHTML/CSS/JS静的アセットを提供できる任意のWebサーバーにデプロイしてホストできます。

next buildを実行すると、Next.jsは静的エクスポートをoutフォルダに生成します。例えば、次のルートがある場合:

• /
• /blog/[id]

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

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

Nginxのような静的ホストを使用している場合、受信リクエストから正しいファイルへのリライトを設定できます:

server {
  listen 80;
  server_name acme.com;

  root /var/www/out;

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

  # `trailingSlash: false`の場合は必要
  # `trailingSlash: true`の場合は省略可能
  location /blog/ {
      rewrite ^/blog/(.*)$ /blog/$1.html break;
  }

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

バージョン履歴