Next.jsと静的サイト生成で作る無料のAIベビー名ジェネレーター

赤ちゃんの名づけは、新しい親が直面する最もワクワクする（同時にストレスの多い）決断のひとつです。私は BabyNamePick.com — 無料のAI搭載ベビー名ジェネレーター — を作成し、親が理想の名前を見つけられる手助けをしています。以下は Next.js を使ってどう作ったか、そしてサーバーサイドレンダリングより静的サイト生成を選んだ理由です。

なぜこれを作ったのか

ほとんどのベビー名サイトは広告だらけで、時代遅れのデータベースを使用しています。私は、出身地、意味、スタイルの嗜好に基づいて名前を提案する、クリーンで高速かつ実際に役立つツールを望んでいました。

技術スタック

• Next.js 16 と App Router
• TypeScript を型安全性のために
• Tailwind CSS v4 をスタイリングに
• Vercel でデプロイ
• Cloudflare を DNS と CDN に

アーキテクチャ: 静的レンダリングの優位性

各リクエストごとに AI API を呼び出す代わりに（高価で遅い）、19 カテゴリにわたる 200 件以上の名前を含む、厳選された名前データベースを構築しました：

// categoryData.ts - Each category has its own rich dataset
export const categories = {
  'boy-names': {
    title: 'Boy Names',
    description: 'Popular and unique boy names...',
    names: [
      { name: 'Liam', origin: 'Irish', meaning: 'Strong-willed warrior' },
      { name: 'Noah', origin: 'Hebrew', meaning: 'Rest, comfort' },
      // ... 200+ names
    ]
  },
  'girl-names': { ... },
  'japanese-names': { ... },
  'french-names': { ... },
  // 19 categories total
};

generateStaticParams を用いた動的ルート

Next.js の generateStaticParams の仕組みが鍵です。1つのテンプレートがビルド時に SEO 最適化された 19 ページを生成します：

// app/[category]/page.tsx
export async function generateStaticParams() {
  return Object.keys(categories).map((category) => ({
    category,
  }));
}

export async function generateMetadata({ params }) {
  const data = categories[params.category];
  return {
    title: `${data.title} - AI Baby Name Generator`,
    description: data.description,
    openGraph: {
      ...
    },
  };
}

この結果、次のものが得られます：

• 19 個の静的 HTML ページ — 即時の読み込み
• カテゴリごとに固有のメタタグ — SEOに最適
• ランタイムコストゼロ — API コールもデータベースクエリもなし

SEO 戦略が機能する理由

公開から 18 日間の公開後、次の結果が得られました：

• 90 回の Google 表示 — 複数のキーワードで
• Google による 4 ページのインデックス（増加中）
• 有機的なクリック 2 回 — 小さいが実際のトラフィック

役立った点：

1. 構造化データ（FAQ + パンくずリストのスキーマ）を全ページに適用
2. カテゴリ配列から動的なサイトマップを生成
3. ブログコンテンツ — 赤ちゃんの名付けに関する SEO 重視の記事を 5 本
4. カテゴリーページ — 「french baby names」や「biblical baby names」などの長尾キーワードを狙う

要点

リアルタイムの AI API を必須とは限りません。多くのユースケースでは、厳選されたデータベースとスマートなカテゴリ分けが、より速く、安く、信頼性の高いユーザー体験を提供します。

チェックしてみてください: babynamepick.com

SEO に強いツールを作るにはどう取り組んでいますか？ コメント欄で皆さんの経験を聞かせてください！