スタティックエクスポート
Next.jsは静的サイトまたはSingle-Page Application (SPA)として開始し、後でサーバーを必要とする機能にオプションでアップグレードすることを可能にします。
next build
を実行すると、Next.jsは各ルートに対してHTMLファイルを生成します。厳密なSPAを個々のHTMLファイルに分解することで、Next.jsはクライアント側で不要なJavaScriptコードの読み込みを回避し、バンドルサイズを削減し、高速なページ読み込みを実現できます。
Next.jsはこの静的エクスポートをサポートしているため、HTML/CSS/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
フォルダを作成します。
getStaticProps
とgetStaticPaths
を利用して、pages
ディレクトリ内の各ページ(動的ルートの場合はさらに多く)のHTMLファイルを生成できます。
サポートされている機能
静的サイトを構築するために必要なNext.jsのコア機能のほとんどがサポートされています:
getStaticPaths
を使用した動的ルートnext/link
によるプリフェッチ- JavaScriptのプリロード
- 動的インポート
- あらゆるスタイリングオプション(CSS Modules、styled-jsxなど)
- クライアント側のデータフェッチ
getStaticProps
getStaticPaths
画像最適化
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="カメ" src="/turtles.jpg" width={300} height={300} />
}
サポートされていない機能
Node.jsサーバーを必要とする、またはビルドプロセス中に計算できない動的ロジックを伴う機能は、サポートされていません:
- 国際化ルーティング
- APIルート
- Rewrites
- Redirects
- Headers
- ミドルウェア
- インクリメンタル静的再生成
- デフォルトの
loader
での画像最適化 - ドラフトモード
fallback: true
でのgetStaticPaths
fallback: 'blocking'
でのgetStaticPaths
getServerSideProps
デプロイ
静的エクスポートでは、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のような静的ホストを使用している場合、着信リクエストを正しいファイルにリライトするように設定できます:
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 Router(安定版)がReactサーバーコンポーネントとルートハンドラを含む、拡張された静的エクスポートをサポートします。 |
v13.3.0 | next export は非推奨となり、"output": "export" に置き換えられました |