Next.js Uygulamanızda Contentful’dan Blog Yazıları Çekme ve Gösterme

Next.js Uygulamanızda Contentful’dan Blog Yazıları Çekme ve Gösterme

Merhaba! Ben Fatih Soysal ve bu yazıda, Next.js uygulamanızda Contentful’dan blog yazılarını nasıl çekeceğinizi ve göstereceğinizi adım adım açıklayacağım. Contentful, güçlü bir Headless CMS olup, Next.js gibi modern JavaScript framework’leri ile mükemmel bir şekilde entegre çalışır. Bu entegrasyon, içerik yönetimini kolaylaştırırken, aynı zamanda dinamik ve hızlı web uygulamaları geliştirmenizi sağlar. Öncelikle, Contentful hesabınızın ve bir Next.js projenizin hazır olduğunu varsayıyorum. Hazır değilse, web sitemi üzerinden daha detaylı bilgi alabilirsiniz. Başlayalım!

1. Contentful Projenizi Kurma

Öncelikle, Contentful hesabınıza giriş yapın ve yeni bir uzay (space) oluşturun. Ardından, “Content Model” bölümüne giderek “Blog Post” adında yeni bir içerik modeli oluşturun. Bu modelde, başlık, içerik, resim ve yayın tarihi gibi alanlar tanımlamanız gerekecektir. Bu alanları tanımladıktan sonra, birkaç örnek blog yazısı ekleyerek Contentful’u test edebilirsiniz. Bu adım oldukça basittir ve Contentful’un arayüzü oldukça kullanıcı dostudur.

2. Next.js Projenizde Contentful API’sini Kullanma

Şimdi, Next.js projenizde Contentful API’sini kullanarak blog yazılarını çekmemiz gerekiyor. Bunun için öncelikle contentful paketini kurmalısınız. Projenizin kök dizininde aşağıdaki komutu çalıştırın:

npm install contentful

Ardından, bir yardımcı fonksiyon oluşturabilir ve Contentful API’sine bağlanabiliriz. Bu fonksiyon, API anahtarınızı ve uzayınızın ID’sini kullanarak blog yazılarını alır. İşte örnek bir fonksiyon:

import { createClient } from 'contentful';

const client = createClient({
  space: 'YOUR_SPACE_ID',
  accessToken: 'YOUR_ACCESS_TOKEN'
});

export async function getBlogPosts() {
  try {
    const entries = await client.getEntries({
      content_type: 'blogPost' // Contentful'da oluşturduğunuz içerik modelinin adı
    });
    return entries.items;
  } catch (error) {
    console.error(error);
    return [];
  }
}

Bu kodu, YOUR_SPACE_ID ve YOUR_ACCESS_TOKEN değerlerini Contentful hesabınızdan alarak güncellemeniz gerekmektedir. Ayrıca, blogPost kısmını, Contentful’da oluşturduğunuz içerik modelinin adıyla eşleştirmelisiniz. Bu kod, Contentful’dan blog yazılarını alır ve bir dizi olarak döndürür.

3. Blog Yazılarını Gösterme

Son olarak, getBlogPosts fonksiyonunu kullanarak blog yazılarını Next.js sayfanızda gösterebiliriz. İşte basit bir örnek:

import { getBlogPosts } from './utils/contentful'; // yardımcı fonksiyonun yolu

export default async function Home() {
  const blogPosts = await getBlogPosts();

  return (
    <div>
      {blogPosts.map((post) => (
        <div key={post.sys.id}>
          <h2>{post.fields.title}</h2>
          <p>{post.fields.content}</p>
          <img src={post.fields.image.fields.file.url} alt={post.fields.title} />
        </div>
      ))}
    </div>
  );
}

Bu kod, her bir blog yazısı için başlık, içerik ve resmi gösterir. Elbette, bu kodu kendi tasarımınıza ve ihtiyaçlarınıza göre özelleştirebilirsiniz. Örneğin, daha gelişmiş bir tasarım kullanabilir veya daha fazla alan gösterebilirsiniz. Unutmayın, burada image alanının da fields altında olduğunu varsaydık. Contentful arayüzünde bunu doğrulayın.

4. Ek İpuçları ve Kaynaklar

Bu basit örnek, Next.js uygulamanızda Contentful’dan blog yazılarını çekmenin ve göstermenin temel adımlarını gösterir. Daha gelişmiş özelliklere ihtiyaç duyarsanız, Contentful belgesini inceleyebilirsiniz. Contentful API dokümanları size daha fazla bilgi sağlayacaktır. Ayrıca, performans optimizasyonu için resimleri önbelleğe alma gibi ek adımlar da ekleyebilirsiniz. Sonuç olarak, Contentful ve Next.js’in birlikte kullanımı, yüksek performanslı ve ölçeklenebilir web uygulamaları geliştirmenizi sağlar.

#Etiketler: Next.js, Contentful, Blog, Headless CMS, API, JavaScript, Web Geliştirme, İçerik Yönetimi, Fatih Soysal