loneProgrammer

Next.js：generateStaticParams()：Static Site Generation

NextJs

generateStaticParamsは、Next.jsの動的ルートで使用される静的ページ生成機能です。ビルド時に生成するパスを事前に指定することで、パフォーマンスとSEOを最適化します。

基本的な使用方法

  • 基本的な実装例
  • // app/blog/[slug]/page.tsx
export async function generateStaticParams() {
　const posts = await fetch('https://api.example.com/posts').then(r => r.json())
　
　return [
　　{ slug: 'post-1' },
　　{ slug: 'post-2' },
　　{ slug: 'post-3' },
　]
}
export default function Page({ params }: { params: { slug: string } }) {
　// SSGが自動的に適用される（no-storeの指定がない限り）
　const post = await fetchPost(params.slug)
　return ＜div＞Post: {post.title}＜/div＞
}

動作の仕組み

  • デフォルトの挙動 (dynamicParams = true)
  • ビルド時に指定したパスの静的ページを生成
  • 未指定のパスへのアクセス
  • 初回アクセス時に静的ページを生成
  • 以降のアクセスは生成済みページを表示。データ取得などの処理は実行されない
  • 制限モード (dynamicParams = false)
  • // 指定パスのみを許可
export const dynamicParams = false
  • 指定したパス以外へのアクセス → 404エラー
  • より厳密な制御が必要な場合に使用

ユースケース

  • ブログ記事の静的生成
  • export async function generateStaticParams() {
　// 人気記事のみを事前生成
　const posts = await prisma.post.findMany({
　　where: { views: { gt: 1000 } }
　})
　
　return posts.map((post) => ({
　　slug: post.slug
　}))
}
  • 商品ページの最適化
  • export async function generateStaticParams() {
　// 在庫のある商品のみを生成
　const products = await getProducts()
　return products
　　.filter(p => p.inStock)
　　.map((product) => ({
　　　id: product.id.toString()
　　}))
}

注意点

  • キャッシュの挙動
  • generateStaticParamsが使用されたページでは、no-storeなどの明示的な指定がない限り、SSGが自動適用
  • ビルドパフォーマンス
  • 生成するページ数が多いとビルド時間が増加
  • 必要なページの選定が重要
  • データの鮮度
  • ビルド時点のデータで静的生成
  • 動的なデータ更新には ISR やオンデマンド再検証を検討

ベストプラクティス

  • 実装例
  • export async function generateStaticParams() {
　try {
　　const items = await fetchItems()
　　
　　// 必要なページのみを選択
　　const targetItems = items.filter(item => 
　　　item.isPublished && item.isPriority
　　)
　　
　　return targetItems.map(item => ({
　　　id: item.id.toString()
　　}))
　} catch (error) {
　　console.error('Static params generation failed:', error)
　　return []
　}
}

Note: この機能は、パフォーマンスとSEOの最適化を両立させたい場合に特に有効です。事前生成するページを適切に選定することで、ビルド時間とリソース使用の最適化も実現できます。

↓ お勧め記事 ↓