Next.js ve Laravel ile Özel “Shadcn-Stili” Kütüphanesi Kullanarak SEO Uyumlu Blogları Nasıl Otomatikleştirdim

Neden Önemli? (Bölüm 1: Darboğaz)

Ajans geliştirme dünyasında, “SEO için bir bloga ihtiyacımız var” talebi basit görünse de genellikle 20 saatlik manuel bir ayar gerektiriyor. Yakın zamanda, altı eski projeyi “reklama hazır” hale getirmekle görevlendirildim, bu da her birinde sıfırdan sağlam, SEO-optimize blog sistemleri kurmak demekti. Mevcut headless CMS seçenekleri olsa da, API yollarını yapılandırma, dinamik slug’ları ayarlama ve farklı teknoloji yığınlarında erişilebilir UI bileşenleri inşa etme döngüsü, geliştirici verimliliğini büyük ölçüde düşürdü.

Çözüm (Bölüm 2: “Super-Admin” Mimarisi)

Yeni bir CMS’ye ihtiyacım olmadığını, standartlaştırılmış bir dağıtım motoruna ihtiyacım olduğunu fark ettim. Vercel üzerinde merkezi bir “Super-Admin” merkezi geliştirdim. Bu ekosistemde, her proje benzersiz bir Organizasyon ID’si ile tanımlanan bir “Normal Admin” örneği olarak değerlendiriliyor. İçerik yönetimini ve API anahtarı dağıtımını merkezileştirerek, herhangi bir ön uca blog besleyebilen tek bir doğruluk kaynağı oluşturdum; bu, modern bir Next.js uygulaması ya da sağlam bir Laravel backend olabilir.

Dönüşüm (Bölüm 3: 20 Saatten 10 Dakikaya)

Bu entegrasyonu kesintisiz hale getirmek için, shadcn/ui felsefesinden ilham alan özel bir CLI tabanlı kütüphane geliştirdim. Manuel yapılandırma yerine, bir geliştirici sadece projelerinde kütüphaneyi başlatıyor. CLI, onlara bir tema ve şablon seçmeleri için kılavuzluk ediyor ve ardından dinamik /blog ve /[slug] yollarını otomatik olarak oluşturmak için Organizasyon ID’sine bağlanıyor. Eskiden zorlu bir 20 saatlik mimari görevken, şimdi sadece 5 dakikalık bir başlatma işlemi. Merkezi merkezde yayınlandığında, bloglar hemen alınarak oluşturuluyor ve ekip, yapılandırma yerine içeriğe odaklanabiliyor.

Teknik Derin Dalış: Müşteri Tarafı Motoru

// Merkezi CMS'den blogları alma için çekirdek mantık
async getBlogs(options?: {
page?: number;
limit?: number;
search?: string;
}): PromiseBlogListResponse> {
const url = this.getUrl('/public/blogs', {
organizationId: this.config.organizationId,
page: options?.page?.toString() || '1',
limit: options?.limit?.toString() || '10',
search: options?.search || ,
});
return this.fetchBlogListResponse>(url);
}

Kütüphanenin temeli, özel bir CMSClient’tır. Fetch mantığını ve organizasyon kapsamını soyutlayarak, kütüphane hangi projenin API’yi çağırdığından bağımsız olarak verilerin tutarlı ve tip güvenli olmasını sağlar.

Standart: Mantıktan Yüksek Kaliteli UI’a

Bir kütüphane yalnızca sağladığı ara yüzler kadar iyidir. CMS-renderer’ımın yalnızca metni değil, daha fazlasını işleyebilmesini sağlamak için, tasarım mantığını karmaşık, veri açısından yoğun düzenler karşısında test ettim. Aşağıda, fitness platformum Trainlytic.net dahil olmak üzere tam yığın projelerimde uyguladığım UI standartlarına örnekler bulunmaktadır. Temiz bileşen mimarisi ve etkili veri alma prensipleri, bu veri zengini arayüzleri desteklemektedir.

Son Düşünceler

Geliştirmenin “sıkıcı” kısımlarını, örneğin altıncı kez bir SEO blogu kurmak gibi, standartlaştırmak, Trainlytic gibi karmaşık ürünler geliştirmek için ayrılan zamanı açar. Bu kütüphane başlangıçta kendi zamanımı kazanmak için bir yol olarak ortaya çıktı, ancak ölçeklenebilir ön yüz mimarisi yaklaşımlarım için bir taslak haline geldi.

İç araçlar geliştirerek iş akışınızı hızlandırıyor musunuz? Yorumlarda tartışalım!