コンテンツにスキップ

静的エクスポート

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 フォルダを生成します。

getStaticPropsgetStaticPaths を使用して、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} />
}

サポートされていない機能 国際化ルーティング
  • APIルート
  • リライト
  • リダイレクト
  • ヘッダー
  • ミドルウェア
  • インクリメンタル静的再生成(ISR)
  • デフォルトの 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 のような静的ホストを使用している場合は、受信リクエストから正しいファイルへの書き換えを設定できます

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