Next.js App Router: Modern Web Uygulamaları İçin Yeni Yaklaşım

Next.js 13 ile birlikte gelen App Router, modern web geliştirmeyi tamamen değiştiriyor. Bu yazıda App Router'ın özelliklerini inceleyeceğiz.

🎯 App Router Nedir?

App Router, Next.js'in yeni routing sistemidir. Pages router'dan farklı olarak:

- File-based routing yapısını korur

- Server Components desteği sunar

- Streaming SSR ile daha hızlı sayfa yüklemesi

- Nested layouts desteği

📁 Directory Yapısı

app/

├── layout.tsx          # Root layout
├── page.tsx            # Home page
├── blog/
│   ├── layout.tsx      # Blog layout
│   ├── page.tsx        # Blog list
│   └── [slug]/
│       └── page.tsx    # Blog detail
└── about/
    └── page.tsx        # About page

💡 Server Components

// app/blog/page.tsx

async function getPosts() {
  const res = await fetch('https://api.example.com/posts')
  return res.json()
}
export default async function BlogPage() {
  const posts = await getPosts()
  return (
    

      {posts.map(post => (
        
{post.title}
      ))}
    
  )
}

🚀 Streaming SSR

Artık sayfalar parça parça yüklenebiliyor:

import { Suspense } from 'react'
export default function Page() {
  return (
    

      

      }>
        
      
    
  )
}

Sonuç

App Router, Next.js uygulamaları için daha iyi performans ve geliştirici deneyimi sunuyor.