Published on

Hydration Hatalarıyla Baş Etme – MDX ve Next.js Tecrübelerim

Next.js ve MDX birleşimi, modern web geliştirme süreçlerinde oldukça güçlü bir yapı sunuyor. Ancak bu kombinasyon bazen tahmin edilmedik hatalara neden olabiliyor. Bu yazıda özellikle hydration hatası konusuna odaklanarak yaşadığım bir sorunu ve çözüm sürecini paylaşmak istiyorum.

Sorun: Hydration Hatası Nedir?

Hydration hatası, SSR (Server Side Rendering) ile oluşturulan içeriğin, istemci tarafında (client) React tarafından tekrar render edilirken uyuşmaması durumudur. Bu da genellikle şu uyarıyla kendini belli eder:

Bunun nedeni, sunucuda render edilen HTML ile istemcide (tarayıcıda) yapılan renderın farklı olmasıdır. Bu tür uyuşmazlıklar, React’in sayfa bileşenlerini doğru şekilde “hydrate” etmesini engeller.

Durum: MDX İçinde HTML Kullanımı

MDX, Markdown ile HTML öğelerini birleştirerek yazı yazmaya olanak tanır. Ancak bazı durumlarda, özellikle HTML öğeleri ve React bileşenleri birleştiğinde, hydration hataları oluşabilir. Şöyle bir içerik kullandığımda:

<p className="text-center">
  Bu sitenin geliştirilmesinde <strong>Next.js</strong> ve <strong>Tailwind CSS</strong>{' '}
  teknolojileri kullanılmıştır.
</p>

Bu içerikte, <p> etiketi, MDX tarafından otomatik olarak eklenir. Yani, içerik çift katmanlı <p> etiketi ile render ediliyor ve bu da hydration hatasına yol açabiliyor.

Çözüm Önerileri

✅ 1. <div> ile Değiştirin

Bu şekilde div kullanarak sorunu çözebilirsiniz. div etiketi ile p etiketinin yerine geçebilirsiniz. Bu, React’in bileşenleri doğru şekilde hydrate etmesini sağlar:

<div className="text-center">
  Bu sitenin geliştirilmesinde <strong>Next.js</strong> ve <strong>Tailwind CSS</strong>{' '}
  teknolojileri kullanılmıştır.
</div>

✅ 2. Sadece Markdown Kullanın

MDX'in sunduğu Markdown yapısını kullanarak da çözüm bulabilirsiniz. Markdown biçiminde yazılmış içerik daha uyumlu olur ve HTML etiketleri ile karışmaz:

**Next.js** ve **Tailwind CSS** teknolojileri kullanılmıştır.

❌ <p> Tagı Kullanmayın

MDX içinde <p> tag'lerini manuel olarak yazmak yerine, Markdown'a güvenmek en sağlıklısıdır. Çünkü MDX, <p> tag’ini zaten render eder.

Bu küçük gibi görünen detay, özellikle statik siteler geliştirenler için büyük fark yaratabilir. Hem kullanıcı deneyimi hem de performans açısından bu tür hataların önüne geçmek için yapısal temizlik ve testler önemlidir.

Sonuç

MDX ve Next.js entegrasyonu gerçekten güçlü bir araçtır, ancak yanlış yapılandırmalar bazen beklenmedik hatalar oluşturabilir. Bu yazıda, özellikle hydration hataları üzerine konuşarak, bu tür sorunlardan nasıl kaçınılacağına dair birkaç çözüm önerisi sundum. Umarım siz de projelerinizde bu ipuçlarından faydalanabilirsiniz.

İlgili Linkler