こんにちは、サイオステクノロジーの遠藤です。今回はNext.js 15でApp Routerを利用した際のStatic Exportsについて整理します。
Static Exportsとは？
Static Exportsは、build時に、アプリケーションを静的コンテンツとしてエクスポートできる機能です。Static Exportsを利用せずにNext.jsのアプリケーションを公開する場合はNode.jsランタイムが必要となりますが、Static Exportsを利用してbuildをかけた場合はクライアントサイドだけで動くコードが吐き出されるので、Node.js環境が必要なくなるのがメリットです。
Static Exportsのやり方
公式ガイド : https://nextjs.org/docs/app/building-your-application/deploying/static-exports
next.config.jsにて output: ‘export’, の記述を追加すると、静的エクスポートを利用できるようになります。
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
output: "export",
};
export default nextConfig;
その後、npm run build を実行すると、out ディレクトリにHTML/CSS/JS assetsが作成されます。
Static ExportsでServer Componentsを利用した場合の挙動
名前にserverとついているためややこしいですが、Static ExportsでServer Componentsを使用することは可能です。ただ、注意点があり、ビルド時にServer Componentsが実行されて生成されたコンテンツに固定されます。
わかりやすく説明するために、ランダムに4桁の数字を返してくれるAPIのFetchのClient Components上で行った場合と、Server Components上で行った場合に分けて考えてみましょう。
通常のデプロイを利用してNode.jsサーバー上にデプロイ
Client Components上で行った場合とServer Components上で行った場の両方でリクエストが来るたびにフェッチを行い、毎回ランダムな値（一回目 : 3592, 二回目 : 5285 …）を表示します。
Static Exportsを利用
- Client Components上で行った場合
- リクエストが来るたびにフェッチを行い、毎回ランダムな値（一回目 : 3592, 二回目 : 5285 …）を表示します。
- Server Components上で行った場合
- ビルド時にServer Componentsが実行されて一度フェッチが行われます。（値は6472）。サーバーを起動してリクエストを送ると以降6472だけ表示され続けられます。
Dynamic Routesの使用に制限がある
Next.jsにはリクエストに応じて動的データからルートを作成してくれるDynamic Routesという機能があります。以下のように[slug]ディレクトリを作成することで使用することができます。
| ルート | URLの例 | params |
|---|---|---|
app/blog/[slug]/page.js | /blog/a | { slug: 'a' } |
app/blog/[slug]/page.js | /blog/b | { slug: 'b' } |
app/blog/[slug]/page.js | /blog/c | { slug: 'c' } |
このDynamic Routesの機能ですが、リクエストごとにサーバーでルートを作成するといった機能のため、基本的にはStatic Exportsでは利用することが出来ません。
ただ、Dynamic Routesに、generateStaticParams という関数を利用することで、ビルド時にfetchを行い、静的にルートを作成することができます。この機能を利用することで、Static Exportsを利用した場合でも静的にルートを作成したページに関してはアクセスできるようになります。
そのほかサポートされていない機能
Static Exportsではサーバーで動く機能は使用できないため、MiddlewareやServer Actionsといった機能を使用することが出来ません。2025/02の段階で使用できない機能は以下の機能です。
- Dynamic Routes with
dynamicParams: true - Dynamic Routes without
generateStaticParams() - Route Handlers that rely on Request
- Cookies
- Rewrites
- Redirects
- Headers
- Middleware
- Incremental Static Regeneration
- Image Optimization with the default
loader - Draft Mode
- Server Actions
- Intercepting Routes
公式ガイド : https://nextjs.org/docs/app/building-your-application/deploying/static-exports#unsupported-features
まとめ
今回はNext.jsのStatic Exportsについてまとめました。特にServer Componentsについては曖昧な理解だったため今回実際にコードを書いて挙動を確認したことにより理解を確かにすることが出来ました。「Static ExportsでServer Componentsを利用しているのになぜbuildが通るんだろう？」といった疑問を持っていた方の助けになれば幸いです！
ではまた～
