静的エクスポート

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

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

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

設定

静的エクスポートを有効にするには、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フォルダを作成します。

サポートされる機能

Next.jsのコアは、静的エクスポートをサポートするように設計されています。

サーバーコンポーネント

静的エクスポートを生成するためにnext buildを実行すると、appディレクトリ内で使用されるサーバーコンポーネントは、従来の静的サイト生成と同様に、ビルド中に実行されます。

結果として得られるコンポーネントは、初期ページ読み込み用の静的HTMLと、ルート間のクライアントナビゲーション用の静的ペイロードとしてレンダリングされます。動的サーバー関数を使用しない限り、静的エクスポートを使用する場合、サーバーコンポーネントに変更は必要ありません。

app/page.tsx

export default async function Page() {
  // This fetch will run on the server during `next build`
  const res = await fetch('https://api.example.com/...')
  const data = await res.json()
 
  return <main>...</main>
}

クライアントコンポーネント

クライアント側でデータフェッチを行いたい場合は、SWRを使用してClient Componentを使用し、リクエストをメモ化できます。

app/other/page.tsx

'use client'
 
import useSWR from 'swr'
 
const fetcher = (url: string) => fetch(url).then((r) => r.json())
 
export default function Page() {
  const { data, error } = useSWR(
    `https://jsonplaceholder.typicode.com/posts/1`,
    fetcher
  )
  if (error) return 'Failed to load'
  if (!data) return 'Loading...'
 
  return data.title
}

ルート遷移はクライアント側で行われるため、これは従来のSPAのように動作します。例えば、以下のインデックスルートでは、クライアント上で異なる投稿に移動できます。

app/page.tsx

import Link from 'next/link'
 
export default function Page() {
  return (
    <>
      <h1>Index Page</h1>
      <hr />
      <ul>
        <li>
          <Link href="/post/1">Post 1</Link>
        </li>
        <li>
          <Link href="/post/2">Post 2</Link>
        </li>
      </ul>
    </>
  )
}

画像最適化

next.config.jsでカスタムイメージローダーを定義することで、静的エクスポートでnext/imageによる画像最適化を使用できます。例えば、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} />
}

ルートハンドラー

ルートハンドラーは、next buildの実行時に静的レスポンスをレンダリングします。GET HTTP動詞のみがサポートされています。これは、キャッシュされたデータまたはキャッシュされていないデータから静的なHTML、JSON、TXT、その他のファイルを生成するために使用できます。例:

app/data.json/route.ts

export async function GET() {
  return Response.json({ name: 'Lee' })
}

上記のファイルapp/data.json/route.tsは、next build中に静的ファイルとしてレンダリングされ、{ name: 'Lee' }を含むdata.jsonが生成されます。

入ってくるリクエストから動的な値を読み取る必要がある場合、静的エクスポートは使用できません。

ブラウザAPI

クライアントコンポーネントは、next build中にHTMLにプリレンダリングされます。window、localStorage、navigatorなどのWeb APIはサーバー上で利用できないため、ブラウザで実行している場合にのみこれらのAPIに安全にアクセスする必要があります。例:

'use client';
 
import { useEffect } from 'react';
 
export default function ClientComponent() {
  useEffect(() => {
    // You now have access to `window`
    console.log(window.innerHeight);
  }, [])
 
  return ...;
}

サポートされない機能

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

これらの機能のいずれかをnext devで使用しようとすると、ルートレイアウトでdynamicオプションをerrorに設定した場合と同様に、エラーが発生します。

export const dynamic = 'error'

デプロイ

静的エクスポートを使用すると、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のような静的ホストを使用している場合、受信リクエストから正しいファイルへのリライトを設定できます。

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.0`	`next export` は`"output": "export"`に置き換えられ、削除されました。
`v13.4.0`	App Router (安定版) は、React Server Componentsとルートハンドラーの使用を含む、強化された静的エクスポートサポートを追加しました。
`v13.3.0`	`next export` は非推奨となり、`"output": "export"`に置き換えられました。