Next.jsアプリケーションの静的エクスポートを作成する方法
Next.jsは静的サイトまたはシングルページアプリケーション(SPA)として開始し、後でオプションでサーバーを必要とする機能を使用するようにアップグレードすることができます。
next build
を実行すると、Next.jsはルートごとにHTMLファイルを生成します。厳密なSPAを個々のHTMLファイルに分割することで、Next.jsはクライアント側で不要なJavaScriptコードを読み込まずに済み、バンドルサイズを削減し、ページの読み込みを高速化できます。
Next.jsはこの静的エクスポートをサポートしているため、HTML/CSS/JSの静的アセットを提供できるあらゆるWebサーバーにデプロイしてホスティングすることができます。
設定
静的エクスポートを有効にするには、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とルート間のクライアントナビゲーション用の静的ペイロードにレンダリングされます。静的エクスポートを使用する場合、サーバーコンポーネントが動的サーバー関数を使用しない限り、変更は必要ありません。
export default async function Page() {
// このフェッチは `next build` 時にサーバー上で実行されます
const res = await fetch('https://api.example.com/...')
const data = await res.json()
return <main>...</main>
}
クライアントコンポーネント
クライアント側でデータを取得したい場合は、SWRを使用してリクエストをメモ化するクライアントコンポーネントを使用できます。
'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のように動作します。たとえば、次のインデックスルートでは、クライアント上で異なる投稿に移動できます:
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のようなサービスで画像を最適化できます:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
images: {
loader: 'custom',
loaderFile: './my-loader.ts',
},
}
module.exports = nextConfig
このカスタムローダーは、リモートソースから画像をフェッチする方法を定義します。たとえば、次のローダーはCloudinary用のURLを構築します:
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の画像への相対パスを定義できます:
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などのファイルを生成できます。例えば:
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 API(window
、localStorage
、navigator
など)はサーバー上で利用できないため、ブラウザで実行されている場合にのみ安全にこれらのAPIにアクセスする必要があります。例えば:
'use client';
import { useEffect } from 'react';
export default function ClientComponent() {
useEffect(() => {
// ここで `window` にアクセスできます
console.log(window.innerHeight);
}, [])
return ...;
}
サポートされない機能
Node.jsサーバーを必要とする機能、またはビルドプロセス中に計算できない動的ロジックはサポートされていません:
dynamicParams: true
を使用した動的ルートgenerateStaticParams()
のない動的ルート- Requestに依存するルートハンドラー
- クッキー
- リライト
- リダイレクト
- ヘッダー
- ミドルウェア
- インクリメンタル静的再生成
- デフォルトの
loader
を使用した画像最適化 - ドラフトモード
- サーバーアクション
- インターセプトルート
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のような静的ホスティングを使用している場合、受信リクエストから正しいファイルへのリライトを設定できます:
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.0 | next export は"output": "export" に置き換えられ削除されました |
v13.4.0 | Appルーター(安定版)が強化された静的エクスポートをサポート(Reactサーバーコンポーネントとルートハンドラーを含む) |
v13.3.0 | next export は非推奨となり、"output": "export" に置き換えられました |