Menu

Next.jsアプリケーションの静的エクスポートを作成する方法

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',
 
  // オプション: リンクを `/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フォルダを作成します。

サポートされる機能

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

サーバーコンポーネント

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

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

app/page.tsx
TypeScript
export default async function Page() {
  // このフェッチは `next build` 時にサーバー上で実行されます
  const res = await fetch('https://api.example.com/...')
  const data = await res.json()
 
  return <main>...</main>
}

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

クライアント側でデータを取得したい場合は、SWRを使用してリクエストをメモ化するクライアントコンポーネントを使用できます。

app/other/page.tsx
TypeScript
'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
TypeScript
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/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
TypeScript
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
TypeScript
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
TypeScript
export async function GET() {
  return Response.json({ name: 'Lee' })
}

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

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

ブラウザAPI

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

'use client';
 
import { useEffect } from 'react';
 
export default function ClientComponent() {
  useEffect(() => {
    // ここで `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;
  }
 
  # これは `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ルーター(安定版)が強化された静的エクスポートをサポート(Reactサーバーコンポーネントとルートハンドラーを含む)
v13.3.0next exportは非推奨となり、"output": "export"に置き換えられました