MDX Blog Sistemimi: Tüm Özel Bileşenleri Kullanım Rehberi
10 Aralık 2025
4 dk okuma
Paylaş:
AI Özet
MDX tabanlı blog sistemi, semantik Callout bileşeniyle kritik bilgileri dört farklı önem derecesinde vurgulayarak kullanıcı etkileşimini artırır. YouTubeCard bileşeni tembel yükleme (lazy-load) ile sayfa hızını korurken, CaptionImage görsellere erişilebilir bağlam ve profesyonel çerçeveler kazandırır. ProsCons bileşeni teknik karşılaştırmaları şık bir düzende sunar, Accordion ise yoğun detayları hiyerarşik olarak gizleyerek sayfa akışını optimize eder. Tüm bileşenler, karmaşık HTML koduna gerek duymadan duyarlı ve yüksek performanslı içerik üretimi için optimize edilmiştir.
Gemini ile oluşturuldu•WE
Google
Bu yazıyı faydalı bulduysanız paylaşabilirsiniz:
Bloga hoş geldiniz!
Bu yazı, standart Markdown kurallarının ötesine geçerek içeriğimizi daha profesyonel ve etkileşimli hale getiren özel React bileşenlerimizi nasıl kullanacağınızı adım adım göstermektedir. MDX'in (Markdown + JSX) gücünü kullanarak, karmaşık HTML kodları yazmak zorunda kalmadan zengin içerikler oluşturabilirsiniz.
1. Vurgu ve Uyarı Yönetimi (Callout)
Callout bileşeni, blog yazınızın akışını kesintiye uğratmadan okuyucunun dikkatini önemli bir noktaya çekmek, kritik bilgiler vermek veya bir aksiyon çağrısında bulunmak için tasarlanmıştır. Bu bileşenin en büyük avantajı, sadece renklerle değil, aynı zamanda semantik anlamlarla da mesajınızı güçlendirmesidir. Her bir Callout, isteğe bağlı olarak bir title (başlık) niteliği alabilir.
1.1 Dört Farklı Tip Kullanımı ve Semantik Anlamları
Callout bileşeni, iletmek istediğiniz mesajın duygusal veya önem derecesine göre dört farklı type (tip) niteliği alabilir. İçeriğe en uygun olan tipi seçerek mesajınızın amacını netleştirirsiniz:
Bilgi (Info): Mavi renk ile gösterilir. Genellikle ek ipuçları, arka plan bilgileri, öneriler veya daha fazla detay için bir referans sunmak için kullanılır.
İpucu: Performans
Sunucu tarafında (Server Side) ağır işlemler yapmaktan kaçınarak sayfa yüklenme hızınızı artırabilirsiniz. Next.js App Router yapısı bu konuda size büyük avantaj sağlar.
Başarı (Success): Yeşil renk ile gösterilir. Kurulumun tamamlanması, bir hedefe ulaşılması veya pozitif bir geri bildirim vermek için idealdir.
Kurulum Tamamlandı
Tebrikler! Tüm bağımlılıkları başarıyla kurdunuz ve projeniz kullanıma hazır. Hemen npm run dev ile başlayabilirsiniz.
Uyarı (Warning): Sarı/Turuncu renk ile gösterilir. Potansiyel risklere, geri alınamaz adımlara dikkat çekmek veya bir işlem öncesi önlem alınmasını hatırlatmak için kullanılır.
Önemli Dikkat Edin
Bu işlemi yapmadan önce, tüm veritabanı yedeğinizi almayı unutmayın. Yanlış bir komut geri dönülmez hasara yol açabilir.
Hata (Danger): Kırmızı renk ile gösterilir. Acil çözülmesi gereken sorunları, kritik hataları veya ciddi tehlikeleri belirtmek için kullanılır. Bu tip uyarılar genellikle hemen aksiyon gerektirir.
Acil Hata Giderme
Console'da 500 hatası alıyorsanız, lütfen API anahtarlarınızı kontrol edin. Bu tip hatalar genellikle kimlik doğrulama sorunlarından kaynaklanır.
2. Zengin İçerik Bileşenleri
Geleneksel bloglarda uzun ve karmaşık HTML/iframe kodları gerektiren işlemler, bizim sistemimizde tek satırlık basit bileşen kodlarıyla yapılır. Bu, hem yazım hızınızı artırır hem de sitenizin performansını optimize eder.
2.1 Video Gömme (YouTubeCard)
Bu bileşen, okuyucuyu sayfadan çıkarmadan bir YouTube videosunu blog yazınıza yerleştirmenizi sağlar. Geleneksel <iframe> kodlarının aksine, bu kart:
Performans Dostudur: Sayfa yüklenirken videoyu otomatik olarak lazy-load (tembel yükleme) eder ve böylece sayfa açılış hızınızı (LCP - Largest Contentful Paint) olumsuz etkilemez.
Duyarlıdır (Responsive): Farklı ekran boyutlarına otomatik olarak uyum sağlayarak mobil cihazlarda kusursuz görünür.
Kullanımı Basittir: Tek yapmanız gereken, YouTube videosunun tam URL'sini url niteliği olarak vermektir.
2.2 Artıları ve Eksileri Karşılaştırması (ProsCons)
İki farklı teknolojiyi, ürünü veya yaklaşımı karşılaştırmak, okuyucunun karar verme sürecini hızlandırır. ProsCons bileşeni, bu verileri şık, simgesel ve okunabilir bir düzende sunar.
Nasıl Kullanılır:pros ve cons nitelikleri, birer dizi (array) olarak karşılaştırmak istediğiniz maddeleri alır. En iyi kullanım için karşılaştırmanın amacını belirten isteğe bağlı bir title (başlık) da ekleyebilirsiniz.
Artılar
Eksiler
2.3 Görsel ve Açıklamaları Yönetme (CaptionImage)
Normal Markdown görselleri (![]()) sadece temel gösterim yaparken, CaptionImage bileşeni ile görsellerinize bağlam ve profesyonellik katarsınız:
Açıklama (Caption): Görselin ne anlattığını netleştiren, koyu temaya uyumlu bir alt metin ekler.
Erişilebilirlik (Accessibility):alt niteliği zorunlu tutularak görme engelli kullanıcılar için içerik desteklenir.
Tema Uyumu: Görselinizi koyu temaya uygun bir çerçeveye alarak modern bir görünüm sağlar.
Accordion (Akordiyon), sayfanın genel akışını bozmak istemediğiniz detayları, sıkça sorulan soruları (S.S.S.) veya uzun kod bloklarını gizlemek için kullanılır. Kullanıcı, sadece ilgilendiği başlığa tıklayarak içeriği açar. Bu, özellikle uzun teknik kılavuzlarda veya detaylı log çıktılarında sayfaların daha temiz görünmesini sağlar.
Kullanım: Bileşenin içine yerleştirdiğiniz tüm içerik, title niteliğinde belirttiğiniz başlık altında gizlenir.
Burada çok uzun kodlar veya kullanıcının hemen görmesi gerekmeyen detaylar yer alabilir.
bash
# Örnek detaylı log çıktısı
echo "Hata yok"
echo "Log: Bağlantı kuruldu (2025-12-10 17:00:00)"
