Next.jsBlogTypeScript

Next.js ile Static Blog Nasıl Yapılır?

2026-04-18

Gray-matter ve Remark kullanarak Next.js static export üzerinde sıfırdan bir blog sistemi kurmanın adımları.

Giriş

Static site generation (SSG), blog gibi içerik ağırlıklı sitelerde hem performans hem güvenlik açısından en iyi seçeneklerden biridir.

Gereksinimler

Next.js 15+
gray-matter — markdown frontmatter okumak için
remark + remark-html — markdown'ı HTML'e çevirmek için

Nasıl Çalışır?

posts/
  ilk-yazi.md   ← burayı düzenle
app/
  blog/
    page.tsx     ← yazı listesi
    [slug]/
      page.tsx   ← yazı detayı
lib/
  posts.ts       ← fs ile .md dosyaları okur

lib/posts.ts build sırasında posts/ klasöründeki tüm .md dosyalarını okur ve her biri için statik sayfa üretir.

Yeni Yazı Eklemek

posts/ klasörüne yeni bir .md dosyası ekleyip push etmen yeterli — GitHub Actions otomatik deploy eder.

---
title: "Yazı Başlığı"
date: "2026-04-18"
summary: "Kısa özet"
tags: ["Tag1", "Tag2"]
---

İçerik buraya...