Next.js ile Modern Blog Sistemi Kurulumu

Modern web geliştirme dünyasında, performanslı ve kullanıcı dostu blog sistemleri kurmak her zamankinden daha önemli. Bu yazıda, Next.js kullanarak nasıl modern bir blog sistemi kurabileceğinizi adım adım anlatacağım.

Neden Next.js?

Next.js, React tabanlı web uygulamaları geliştirmek için mükemmel bir framework'tür. Blog sistemleri için özellikle avantajlı olan özellikleri:

• Static Site Generation (SSG): Markdown dosyalarını statik HTML'e dönüştürür
• Server-Side Rendering (SSR): SEO dostu içerik sunumu
• Image Optimization: Otomatik görsel optimizasyonu
• TypeScript Desteği: Tip güvenliği
• Tailwind CSS Entegrasyonu: Hızlı stil geliştirme

Gerekli Paketler

Blog sistemimiz için aşağıdaki paketleri kullanacağız:

npm install gray-matter remark remark-html remark-gfm

Paket Açıklamaları:

• gray-matter: Markdown dosyalarındaki front matter'ı parse eder
• remark: Markdown'ı HTML'e dönüştürür
• remark-html: HTML çıktısı sağlar
• remark-gfm: GitHub Flavored Markdown desteği

Proje Yapısı

src/
├── app/
│   ├── blog/
│   │   ├── page.tsx
│   │   └── [slug]/
│   │       └── page.tsx
│   └── globals.css
├── components/
│   ├── BlogCard.tsx
│   └── BlogContent.tsx
├── lib/
│   └── blog.ts
content/
└── blog/
    └── ornek-yazi.md

Markdown Dosya Yapısı

Her blog yazısı için aşağıdaki front matter yapısını kullanıyoruz:

---
title: "Yazı Başlığı"
date: "2024-01-15"
summary: "Yazı özeti burada yer alır"
tags: ["tag1", "tag2"]
coverImage: "/resim.jpg"
---

Utility Fonksiyonları

Blog sistemimizin kalbi olan utility fonksiyonları:

// src/lib/blog.ts
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { remark } from 'remark';
import html from 'remark-html';
 
export function getAllPosts() {
  const postsDirectory = path.join(process.cwd(), 'content/blog');
  const fileNames = fs.readdirSync(postsDirectory);
  
  const posts = fileNames
    .filter((fileName) => fileName.endsWith('.md'))
    .map((fileName) => {
      const slug = fileName.replace(/\.md$/, '');
      const fullPath = path.join(postsDirectory, fileName);
      const fileContents = fs.readFileSync(fullPath, 'utf8');
      const { data } = matter(fileContents);
      
      return {
        slug,
        title: data.title,
        date: data.date,
        summary: data.summary,
        tags: data.tags || [],
        coverImage: data.coverImage,
      };
    })
    .sort((a, b) => (a.date < b.date ? 1 : -1));
    
  return posts;
}

Blog Kartları

Blog listesi sayfasında kullanılan kartlar, Apple'ın minimal tasarım dilini yansıtır:

// src/components/BlogCard.tsx
export default function BlogCard({ post }) {
  return (
    <Link href={`/blog/${post.slug}`}>
      <article className="group bg-white dark:bg-gray-800 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300">
        {/* Kart içeriği */}
      </article>
    </Link>
  );
}

Dinamik Sayfa Oluşturma

Next.js'in generateStaticParams fonksiyonu ile tüm blog yazıları için statik sayfalar oluşturuyoruz:

// src/app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = getAllPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

SEO Optimizasyonu

Her blog yazısı için meta etiketleri otomatik olarak oluşturulur:

export async function generateMetadata({ params }) {
  const post = getPostBySlug(params.slug);
  
  return {
    title: `${post.title} | Blog`,
    description: post.summary,
    openGraph: {
      title: post.title,
      description: post.summary,
      type: 'article',
      publishedTime: post.date,
    },
  };
}

Dark Mode Desteği

Blog sistemi, sitenin genel tema ayarlarıyla uyumlu çalışır:

.blog-content {
  @apply text-gray-900 dark:text-gray-100;
}
 
.blog-content h1 {
  @apply text-gray-900 dark:text-white;
}

Performans Optimizasyonları

1. Static Generation: Tüm blog yazıları build zamanında oluşturulur
2. Image Optimization: Next.js'in otomatik görsel optimizasyonu
3. Code Splitting: Sayfa bazında kod bölümleme
4. Caching: Statik içerik için etkili önbellekleme

Sonuç

Bu blog sistemi ile:

• ✅ Hızlı yükleme süreleri
• ✅ SEO dostu yapı
• ✅ Responsive tasarım
• ✅ Dark mode desteği
• ✅ Markdown desteği
• ✅ Kolay içerik yönetimi

sağlamış oluyoruz. Sistem, modern web standartlarına uygun ve gelecekte genişletilebilir bir yapıda tasarlanmıştır.

Kaynaklar

• Next.js Dokümantasyonu
• Tailwind CSS
• Remark
• Gray Matter

Bu yazı, modern blog sistemleri kurma konusunda size rehberlik etmeyi amaçlamaktadır. Sorularınız için yorum bırakabilirsiniz!