WordPress, geleneksel olarak PHP tabanlı bir CMS’dir. Ancak, WordPress REST API, içerik verilerini JSON formatında sunarak bu verilerin herhangi bir client tarafından işlenmesini mümkün kılar. Böylece WordPress, Headless CMS olarak kullanılabilir.
WordPress API’nin sunduğu avantajlar:
- Esneklik: WordPress’i sadece içerik yönetimi için kullanabilir, ön yüzü dilediğiniz teknolojiyle geliştirebilirsiniz.
- Performans: Next.js’in server-side rendering (SSR) ve statik site oluşturma (SSG) yetenekleri sayesinde hızlı yüklenen sayfalar elde edilir.
- SEO Uyumlu: Next.js, Google’ın istediği yapılandırmayı sağlayarak arama motorlarında daha iyi sıralamalar almanıza yardımcı olur.
- Güvenlik: WordPress yönetici paneli sunucu tarafında çalışırken, ön yüz tamamen bağımsız çalışır. Bu da saldırılara karşı ekstra güvenlik sağlar.
Next.js ile WordPress API Kullanarak Blog Sitesi Geliştirme
1. Proje Ortamını Hazırlama
Öncelikle, Next.js projesini oluşturmak için aşağıdaki komutu çalıştırın:
Ardından, WordPress API ile haberleşmek için axios kütüphanesini ekleyin:
2. WordPress REST API’yi Etkinleştirme
WordPress’in API’sine erişmek için aşağıdaki URL’yi kullanabilirsiniz:
Eğer özel bir alan adı kullanıyorsanız, bu URL’yi kendi alan adınıza göre güncelleyin.
3. API’den Blog Yazılarını Çekme
Next.js içinde API’den veri çekmek için getStaticProps veya getServerSideProps fonksiyonlarını kullanabiliriz.
Next.js 13'ten itibaren gelen app router özellikleri için App Router dökümanlarına bakabilirsiniz.
Statik Olarak Blog Yazılarını Getirme
Bu kod, WordPress API’den blog yazılarını çeker ve statik olarak önbelleğe alır.
4. Dinamik Blog Sayfalarını Oluşturma
Blog yazılarının her biri için dinamik sayfalar oluşturmak için aşağıdaki kodu kullanabilirsiniz:
Sayfa Yolunu Tanımlama
Dinamik Sayfa İçeriği
Bu yapı sayesinde, her blog yazısı için ayrı bir sayfa oluşturulacaktır.
5. SEO İçin Meta Etiketleri Eklemek
Next.js projelerinde SEO uyumluluğunu artırmak için next/head bileşenini kullanabilirsiniz:
Bu kod, her blog yazısı için dinamik meta etiketleri ekleyerek SEO açısından daha iyi bir performans sağlar.
Next.js ve WordPress API kullanarak modern, hızlı ve SEO uyumlu bir blog sitesi oluşturmak oldukça kolaydır. WordPress’i Headless CMS olarak kullanarak, içerik yönetimini geleneksel WordPress yapısından bağımsız bir şekilde gerçekleştirebilirsiniz. Next.js’in sağladığı statik site oluşturma, dinamik routing ve server-side rendering gibi özellikler sayesinde hem performanslı hem de kullanıcı dostu bir blog oluşturabilirsiniz.
Bu rehberde, WordPress API’den veri çekme, Next.js ile sayfa oluşturma ve dinamik routing işlemlerini öğrendiniz. Şimdi kendi blogunuzu oluşturmak için adımları uygulayarak projeye başlayabilirsiniz! 🚀