Menu

静的エクスポート

Next.jsは静的サイトまたはSingle-Page Application (SPA)として開始し、後でサーバーを必要とする機能にオプションでアップグレードすることを可能にします。

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

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

設定

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

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のコア機能のほとんどがサポートされています：

画像最適化

next.config.jsでカスタム画像ローダーを定義することで、静的エクスポートで画像最適化を使用できます。例えば、Cloudinaryなどのサービスで画像を最適化できます：

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

このカスタムローダーは、リモートソースから画像をフェッチする方法を定義します。例えば、以下のローダーは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の画像への相対パスを定義できます：

app/page.tsx
TypeScript
import Image from 'next/image'
 
export default function Page() {
  return <Image alt="カメ" src="/turtles.jpg" width={300} height={300} />
}

サポートされていない機能

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

デプロイ

静的エクスポートでは、Next.jsはHTML/CSS/JS静的アセットを提供できる任意のウェブサーバーにデプロイおよびホスティングできます。

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のような静的ホストを使用している場合、着信リクエストを正しいファイルにリライトするように設定できます：

nginx.conf
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;
  }
}

バージョン履歴

バージョン変更点
v14.0.0next exportが"output": "export"に置き換えられました
v13.4.0App Router（安定版）がReactサーバーコンポーネントとルートハンドラを含む、拡張された静的エクスポートをサポートします。
v13.3.0next exportは非推奨となり、"output": "export"に置き換えられました