静的エクスポート
Next.jsでは、静的サイトまたはシングルページアプリケーション(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',
// 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
フォルダーを作成します。
getStaticProps
および getStaticPaths
を利用して、pages
ディレクトリ内の各ページ(およびダイナミックルートの場合、さらに多くのページ)のHTMLファイルを生成できます。
対応機能
静的サイトを構築するために必要なNext.jsのコア機能の大部分がサポートされており、以下を含みます。
getStaticPaths
を使用したダイナミックルートnext/link
を使用したプリフェッチ- JavaScriptのプリロード
- ダイナミックインポート
- あらゆるスタイリングオプション (例: CSS Modules, styled-jsx)
- クライアントサイドのデータフェッチ
getStaticProps
getStaticPaths
画像最適化
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} />
}
非対応機能
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;
}
# 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 (Stable) がReact Server ComponentsとRoute Handlersの使用を含む、強化された静的エクスポートサポートを追加しました。 |
v13.3.0 | next export は非推奨となり、"output": "export" に置き換えられました。 |
お役に立ちましたか?