Next.js と OpenAI で AI 搭載の SEO コンテンツエンジンを構築するまで

私はニッチなレビューサイトを運営していて、各記事あたりSEOコンテンツを書くのに3〜4時間を費やしていました。そこで、キーワード調査からWordPressへの公開まで、パイプライン全体を自動化することに決め、それをSaaSプロダクトにしました。

以下は、私がそれを構築した方法の技術的な内訳です。

The Problem

SEOコンテンツを手作業で書くのは、非常に遅いです：

• キーワードを調査する
• 適切な見出し構造で1500語以上の記事を書く
• 既存コンテンツへの内部リンクを追加する
• WordPress向けにフォーマットする
• 公開し、メタタグを設定する

「キーワードを入力して、公開をクリックする」だけにしたいと思いました。

Architecture

User Dashboard (Next.js 16)
    |
    ├── Keyword Research (OpenAI API)
    ├── Article Generation (GPT-4o-mini)
    ├── Smart Internal Linking Engine
    └── WordPress REST API Publisher
         |
         └── User's WordPress Site

スタック:

• フロントエンド: App Router + Tailwind CSS を使った Next.js 16
• データベース: Prisma 6 ORM を使った PostgreSQL
• AI: コンテンツ生成のための OpenAI GPT-4o-mini
• 認証: httpOnlyクッキーを使った JWT
• 課金: Stripe Checkout + Webhooks
• ホスティング: Render（GitHubから自動デプロイ）

Key Implementation Details

AI Article Generation

プロンプトエンジニアリングが最も大変でした。生のGPT出力は、AIが書いたように読めます。そこで、以下のようなコンテンツを生成できるようにプロンプトを磨き込むのに数週間を費やしました：

• 自然な段落のつながりを使う
• 関連する統計情報や例を含める
• 適切なSEOの見出し階層（H1 > H2 > H3）に従う
• クリック率が最適化されたメタディスクリプションを生成する

Smart Internal Linking

これは、私が最も誇りに思っている機能です。新しい記事を生成するとき、システムは：

1. そのサイトの既存記事をすべて取得する
2. 意味的に関連のあるコンテンツを特定する
3. 文脈に合った内部リンクを自動で挿入する
4. 過剰最適化を避けるため、記事あたり3〜5本に制限する

内部リンクは、手作業でやるのが面倒なので、多くの人がスキップしてしまう「SEO施策の中でもインパクトが大きい」ものの一つです。

WordPress Integration

公開は、アプリケーションパスワードを使った WordPress REST API で行います：

const response = await fetch(`${site.wpUrl}/wp-json/wp/v2/posts`, {
  method: 'POST',
  headers: {
    'Authorization': `Basic ${Buffer.from(`${user}:${appPassword}`).toString('base64')}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: article.title,
    content: article.htmlContent,
    status: 'publish',
    meta: { description: article.metaDescription },
  }),
});

Stripe Integration

サブスクリプションには Stripe Checkout を使用しました。これにより、支払いUI全体を処理できます：

const session = await stripe.checkout.sessions.create({
  mode: 'subscription',
  line_items: [{ price: priceId, quantity: 1 }],
  success_url: `${APP_URL}/dashboard?success=true`,
  cancel_url: `${APP_URL}/dashboard`,
});

Webhook はサブスクリプションのライフサイクル（作成、キャンセル、更新）を処理します。

Results

この1週間、私自身のサイト（topstacktools.com）で運用しています：

• 20記事公開
• Googleがすでにサイトをインデックス
• 平均記事生成時間：約45秒
• 手作業でのフォーマット不要

Try It

フリーティア付きのSaaSプロダクトとして公開しました（3記事/月、クレジットカード不要）：

usetopseo.com

コードは非公開ですが、コメント欄で技術的な質問には喜んでお答えします。

Next.js 16、Prisma 6、OpenAI、Stripe、PostgreSQLで構築。Renderにデプロイ。