Next.js 15 App Router ile Statik Site Oluşturma Rehberi

Next.js 15 ve App Router'a Giriş

Next.js 15 ile App Router kullanarak projelerinizi daha modüler ve performanslı bir şekilde geliştirebilirsiniz. App Router, sayfa ve layout yönetimini kolaylaştırırken, statik site oluşturma (SSG) işlemlerini de optimize eder.

Proje Kurulumu

Yeni bir Next.js projesi oluşturalım:

npx create-next-app@latest my-next15-site --ts
cd my-next15-site
npm install

App Router Yapısı

App Router dizin yapısı sayfa ve layout yönetimini basitleştirir:

app/
 ├─ layout.tsx  // Tüm sayfalar için genel layout
 ├─ page.tsx    // Ana sayfa
 └─ [locale]/
     └─ blog/
         └─ page.tsx  // Blog sayfası

Statik Site Oluşturma (SSG)

Next.js 15 ile statik veri çekmek artık çok kolay. Örneğin blog.json dosyamızdan veri çekmek için:

import blogData from '@/data/blog.json';

export default function BlogPage() {
  return (
    <div>
      {blogData.map(blog => (
        <article key={blog.id}>
          <h2>{blog.title}</h2>
          <p>{blog.shortDescription}</p>
        </article>
      ))}
    </div>
  );
}

SEO Optimizasyonu

Next.js 15, metadata API ile her sayfa için SEO uyumlu başlık ve açıklamalar eklemeyi kolaylaştırır:

export const metadata = {
  title: 'Next.js 15 App Router ile Statik Site Oluşturma Rehberi',
  description: 'Next.js 15 App Router kullanarak hızlı ve SEO dostu statik siteler oluşturma rehberi.'
};

İleri Seviye Özellikler

• Dinamik rotalar ve parametreler
• Incremental Static Regeneration (ISR)
• Layout ve Template kullanımı
• Image ve Script optimizasyonu
• Global state management ve API çağrıları

Sonuç

Next.js 15 ve App Router, modern frontend geliştirme için güçlü bir yapı sunar. Statik site oluşturma, SEO optimizasyonu ve modüler sayfa yönetimi sayesinde performanslı ve sürdürülebilir projeler geliştirebilirsiniz.