Programmatic SEO with Next.js: สร้าง 1,000 หน้า Landing Page ในพริบตาเดียว

export const frameworks = ['react', 'vue', 'angular', 'svelte', 'solid'];

export const comparisons = [
  { id: 'react-vs-vue', tools: ['React', 'Vue'], winner: 'It depends...' },
  { id: 'vue-vs-svelte', tools: ['Vue', 'Svelte'], winner: 'Svelte is lighter' },
  // ... ลองจินตนาการว่ามีข้อมูลตรงนี้อีก 1,000 แถว
];

import { notFound } from 'next/navigation';
import { comparisons } from '@/lib/data';

// 1. generateStaticParams: หัวใจสำคัญ!
// บอก Next.js ว่า "ช่วย Build หน้าพวกนี้รอไว้เลยนะ (SSG)"
export async function generateStaticParams() {
  return comparisons.map((comp) => ({
    slug: comp.id,
  }));
}

// 2. Metadata: สร้าง Title/Desc แบบ Dynamic ตามคู่เปรียบเทียบ
export async function generateMetadata({ params }) {
  const comp = comparisons.find(c => c.id === params.slug);
  if (!comp) return {};

  const [techA, techB] = comp.tools;
  return {
    title: `${techA} vs ${techB}: อันไหนดีกว่ากันในปี 2026?`,
    description: `เจาะลึกข้อดีข้อเสียระหว่าง ${techA} และ ${techB} พร้อมคำแนะนำสำหรับโปรเจกต์ของคุณ`
  };
}

// 3. The Page Template: เขียนครั้งเดียว ใช้ได้พันหน้า
export default function ComparisonPage({ params }) {
  const comp = comparisons.find(c => c.id === params.slug);
  if (!comp) return notFound();

  const [techA, techB] = comp.tools;

  return (
    <article className="max-w-3xl mx-auto py-10">
      <h1 className="text-4xl font-bold mb-6">
        ศึกช้างชนช้าง: {techA} ⚔️ {techB}
      </h1>

      <div className="grid grid-cols-2 gap-8 my-10">
        <div className="p-6 border rounded-xl bg-blue-50 dark:bg-blue-900/20">
          <h2 className="text-2xl font-bold mb-4 text-blue-600">{techA}</h2>
          <p>ข้อดีของ {techA} คือ...</p>
        </div>
        <div className="p-6 border rounded-xl bg-green-50 dark:bg-green-900/20">
           <h2 className="text-2xl font-bold mb-4 text-green-600">{techB}</h2>
           <p>ข้อดีของ {techB} คือ...</p>
        </div>
      </div>

      {/* ... เนื้อหา Dynamic อื่นๆ ... */}
    </article>
  );
}