📌 Next.js Pages Router

Pages Router, Next.js’in geleneksel routing ve veri çekme mimarisidir. Dosya yapısına dayalıdır: pages klasöründeki dosya ve klasörler URL’leri temsil eder.

1️⃣ Sayfa Oluşturma ve Dosya Sistemi

• pages/index.js → /
• pages/about.js → /about
• pages/blog/[id].js → /blog/:id (dinamik route)
• pages/test/index.js → /test

Notlar:

• Pages Router, Server Components desteklemez.
• Tamamen React Client Components ile çalışır.
• App Router’dan farklı olarak page.js yerine direkt olarak index.js veya [param].js kullanılır.

2️⃣ Statik Sayfalar (SSG) – getStaticProps

• getStaticProps, build zamanında sayfayı statik olarak oluşturur.
• Her istekte yeniden render edilmez → performans artar.
• Seyrek değişen içerikler için idealdir (blog yazıları, ürün katalogları vb.).

// pages/cabins.js
export async function getStaticProps() {
  const cabins = await getCabins();
  return {
    props: { cabins },
  };
}

const Cabins = ({ cabins }) => {
  return (
    <div>
      {cabins.map((cabin) => (
        <p key={cabin.id}>{cabin.name}</p>
      ))}
    </div>
  );
};

export default Cabins;

• Ek özellik: revalidate parametresi ile ISR (Incremental Static Regeneration) yapılabilir:

return {
  props: { cabins },
  revalidate: 60, // 60 saniyede bir güncelle
};