Next.js ve MDX ile Blog Geliştirme Rehberi

Merhaba! Bu yazıda, son zamanlarda çok popülerleşen Next.js App Router yapısını, TailwindCSS ve MDX ile birleştirerek nasıl modern, okuması keyifli ve SEO dostu bir kişisel blog oluşturabileceğimizden bahsedeceğim. Üniversite yıllarında öğrendiklerini belgelemenin ve diğer insanlarla paylaşmanın sana kariyer anlamında ne kadar büyük kapılar açabileceğine inanamazsın!

Neden MDX Kullanmalıyız?

Klasik Markdown (.md) formatı harikadır; hızlı yazılır, kolay okunur ve taşınabilirliği çok yüksektir. Ancak, blog yazılarımızın içine interaktif React bileşenleri (grafikler, özel uyarı kutuları, anketler vb.) koymak istediğimizde standart Markdown yetersiz kalır.

MDX (.mdx) işte burada devreye gidiyor: Markdown sadeliğiyle JSX (React) gücünü birleştiren formattır!

Başlamadan Önce

Blogunuzu oluştururken şunlara ihtiyacınız olacak:

• Node.js kurulu bir ortam
• Temel düzeyde React ve Next.js bilgisi
• Tasarım için TailwindCSS'e aşinalık

İpucu: Yazılım kariyerine yeni başlayan bir üniversite öğrencisiysen, kişisel bir blog sadece teknik bilgilerini değil, kendini ifade etme ve iletişim becerilerini de sergilediğin harika bir portföydür.

Kod Örneği

MDX'in bir diğer güzel yanı da kod bloklarını çok temiz bir şekilde renklendirebilmemizdir (Syntax Highlighting). Aşağıda gray-matter ile bir MDX dosyasından meta verileri ayrıştıran basit bir kod örneğini görüyorsunuz:

import fs from 'fs';
import matter from 'gray-matter';

export function parseMarkdown(filePath: string) {
  const fileContent = fs.readFileSync(filePath, 'utf8');
  const { data, content } = matter(fileContent);
  
  return {
    metadata: data,
    markdownBody: content,
  };
}

Sonuç

Kişisel bir blog, kendini geliştirme sürecinin en iyi yansımalarından biridir. İleride dönüp "Nelerle uğraşmışım, nereden nereye gelmişim" demek ve başkalarına rehberlik edebilmek için hemen bugün küçük bir blog ile işe koyul!

Sonraki yazılarda frontend gelişimi hakkında daha ilginç konseptlerle karşınızda olacağım. Yorum yapmayı ve düşüncelerinizi paylaşmayı unutmayın. Görüşmek üzere! 🚀