Next.js ve Tailwind CSS ile Kişisel Blog Geliştirme

Bir iOS mühendisi olarak mobil tarafta edindiğim tecrübeleri web ekosistemine uyarlamayı seviyorum. Bu yazıda, klasik bir Vite + React uygulamasını, App Router mimarisi kullanan tam teşekküllü bir Next.js projesine dönüştürme sürecimi paylaşıyorum.

Neden Next.js?

Eski web sitem bir SPA (Single Page Application) olduğu için SEO ve ilk yüklenme hızı (FCP) tarafında bazı dezavantajları vardı. Next.js'e geçiş kararı almamdaki ana etkenler:

1. Server Components: İstemciye (client) giden JavaScript miktarını azaltmak.
2. SEO Avantajı: Blog ve inceleme yazılarımın arama motorları tarafından doğru şekilde indekslenmesi.
3. MDX Desteği: İçeriklerimi markdown ile yönetebilmek.

Bu projenin tamamı açık kaynaklıdır ve GitHub üzerinden incelenebilir.

MDX Kurulumu ve İpuçları

Next.js'te MDX kullanırken @next/mdx paketi, next.config.ts entegrasyonu ve mdx-components.tsx dosyasının projenin kök dizininde yer alması gerektiğini unutmamak lazım. Özellikle Tailwind tipografisi (veya özel sınıflar) ile özel MDX bileşenleri yaratmak içerik okumayı çok daha keyifli hale getiriyor.

// mdx-components.tsx örneği
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    h1: ({ children }) => <h1 className="text-4xl font-bold mt-10 text-accent">{children}</h1>,
    ...components,
  }
}

Sonuç olarak bu geçiş, kişisel sitemin sadece görünümünü iyileştirmekle kalmadı, mimarisini de geleceğe yönelik olarak modüler bir düzene oturttu.