コンテンツにスキップ

静的エクスポート

Next.jsでは、静的サイトまたはシングルページアプリケーション(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',
 
  // 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ファイルを生成できます。

対応機能

静的サイトを構築するために必要なNext.jsのコア機能の大部分がサポートされており、以下を含みます。

画像最適化

next/image を介した画像最適化は、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}`
}

その後、アプリケーションで next/image を使用し、Cloudinary内の画像への相対パスを定義できます。

app/page.tsx
import Image from 'next/image'
 
export default function Page() {
  return <Image alt="turtles" 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;
  }
 
  # 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;
  }
}

バージョン履歴

バージョン変更点
v14.0.0next export"output": "export" に置き換えられました。
v13.4.0App Router (Stable) がReact Server ComponentsとRoute Handlersの使用を含む、強化された静的エクスポートサポートを追加しました。
v13.3.0next export は非推奨となり、"output": "export" に置き換えられました。