Next.js, React tabanlı modern web uygulamaları geliştirmek için kullanılan güçlü bir framework'tür. Birçok farklı veri çekme yöntemini destekleyen Next.js, özellikle Statik Site Generation (SSG) özelliği ile SEO dostu ve hızlı web siteleri oluşturmayı kolaylaştırır.

Statik Site Generation (SSG) Nedir?

SSG, geliştirme sürecinde tüm sayfaların önceden oluşturulup statik HTML dosyalar olarak yayınlanmasıdır. Bu sayede sayfalar sunucu tarafında değil, kullanıcıya hızlı bir şekilde sunulur ve arama motorları için optimize edilmiş olur.

Next.js ile Statik Site Oluşturma Adımları

SSG yapmak için Next.js'de getStaticProps fonksiyonunu kullanabilirsiniz. Basit bir blog örneği üzerinden göstereceğiz.

Adım 1: Proje Oluşturma

npx create-next-app nextjs-ssg-example
cd nextjs-ssg-example
npm run dev

Adım 2: Sayfa Oluşturma ve Veri Çekme

Örnek olarak anasayfada statik veri göstereceğiz.

// pages/index.js
export default function Home({ posts }) {
  return (
    <div>
      <h1>Blog Yazıları</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  )
}

// Statik veriler burada alınır
export async function getStaticProps() {
  // API çağrısı ya da dosyadan veri çekilebilir
  const posts = [
    { id: 1, title: 'Next.js ile SSG Nedir?' },
    { id: 2, title: 'React ve Next.js Farkları' },
    { id: 3, title: 'Next.js Projesi Nasıl Başlatılır?' }
  ];

  return {
    props: {
      posts
    }
  }
}

Adım 3: Çalıştırma ve Kontrol

Terminalden projeyi başlatın ve http://localhost:3000 adresinde sayfanızı görüntüleyin:

npm run dev

Yukarıdaki örnekte getStaticProps fonksiyonu ile veri derleme zamanında çekilerek sayfa statik hale getirilmiştir. Bu yöntem, blog, dokümantasyon veya ürün listeleri gibi değişimi az olan içerikler için idealdir.

SSG'nin Avantajları

• Performans: Sayfalar önceden oluşturulduğu için çok hızlı açılır.
• SEO: Arama motorları içerikleri kolayca indexler.
• Güvenlik: Sunucu tarafı işlemler minimumdur.

Sonuç

Next.js ile kolayca statik site oluşturabilir, performanslı ve SEO dostu projeler geliştirebilirsiniz. getStaticProps fonksiyonunu proje ihtiyacınıza göre kullanarak verilerinizi derleme aşamasında çekebilirsiniz.