Next.jsによる高コンバージョン動的LPのアーキテクチャ設計

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const url = request.nextUrl;
  const industry = url.searchParams.get('industry') || 'default';
  const techStack = url.searchParams.get('tech') || 'cloud';

  // ヘッダーを複製し、パーソナライズされたコンテキストをServer Componentsに渡す
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-prospect-industry', industry);
  requestHeaders.set('x-prospect-tech', techStack);

  return NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
}

export const config = {
  matcher: '/lp/:path*',
};

// lib/funnelData.ts
export interface FunnelVariation {
  headline: string;
  subheadline: string;
  featuredCaseStudy: string;
  primaryCTA: string;
}

export const funnelDictionary: Record<string, FunnelVariation> = {
  logistics: {
    headline: "車両運行管理とB2Bパートナー獲得の自動化",
    subheadline: "リアルタイムテレメトリ、自動配信予約、ホテルパートナーへのアウトリーチを1つの高信頼性エンジンに統合。",
    featuredCaseStudy: "Kyoto Logistics：コールドメールからの新規獲得率20%達成",
    primaryCTA: "物流スタックの無料診断を依頼",
  },
  travel: {
    headline: "データベース遅延なしでグローバル体験プラットフォームを拡大",
    subheadline: "58カ国・6,000以上のリアルタイム商品をスムーズに同期する、デカップリングWebエンジン。",
    featuredCaseStudy: "ExperiaHub：ロード速度を68%高速化",
    primaryCTA: "マーケットプレイス構成の診断を依頼",
  },
  default: {
    headline: "統合型テクノロジー＆グロースインフラストラクチャ",
    subheadline: "クラウドアーキテクチャ、モダンソフトウェア、AI自動化、顧客獲得エンジンをワンストップで構築。",
    featuredCaseStudy: "アーキテクチャ構築実績を見る",
    primaryCTA: "技術監査を相談する",
  },
};

// app/lp/[slug]/page.tsx
import { headers } from 'next/headers';
import { funnelDictionary } from '@/lib/funnelData';

export default async function DynamicLandingPage() {
  const headerList = await headers();
  const industry = headerList.get('x-prospect-industry') || 'default';

  // 業界ごとのバリエーションにマッチング（存在しない場合はデフォルト）
  const content = funnelDictionary[industry] || funnelDictionary.default;

  return (
    <main className="max-w-6xl mx-auto px-6 py-20">
      <div className="text-center space-y-6">
        <span className="text-blue-500 font-mono text-sm tracking-wide uppercase">
          {industry !== 'default' ? `${industry} 業界向けソリューション` : 'エンタープライズ・グローススタック'}
        </span>
        <h1 className="text-5xl font-bold tracking-tight text-white">
          {content.headline}
        </h1>
        <p className="text-xl text-slate-400 max-w-2xl mx-auto">
          {content.subheadline}
        </p>
        <div className="pt-4">
          <a href="/book-audit" className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg shadow-lg transition-all">
            {content.primaryCTA}
          </a>
        </div>
      </div>

      {/* 関連事例・導入実績モジュール */}
      <div className="mt-16 p-8 border border-slate-800 rounded-xl bg-slate-900/50">
        <h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wider">関連する導入アーキテクチャ</h3>
        <p className="text-lg font-medium text-white mt-2">{content.featuredCaseStudy}</p>
      </div>
    </main>
  );
}