Next.js Nedir? Production için React Framework'ü

Next.js Nedir?

Production için inşa edilmiş bir React framework'üdür. Server-side rendering, static site generation ve performans, ölçeklenebilirlik ve SEO için tasarlanmıştır. Vercel tarafından geliştirilir ve modern web uygulamalarının go-to seçeneklerinden biridir.

• Fullstack React uygulamaları için framework
• SSR + SSG desteği
• Performans, ölçeklenebilirlik ve SEO odaklı

Neden Next.js?

Next.js'in size hazır verdikleri:

• Built-in routing (file-based)
• Server-side rendering & static site generation (SSG)
• API rotaları (backend frontend içinde)
• Görüntü ve performans optimizasyonu
• Mükemmel geliştirici deneyimi
• Hızlı performans, SEO dostu, fullstack hazır

Kurulum

Tek komutla yeni bir Next.js projesi oluşturabilirsiniz; create-next-app interaktif bir wizard ile App Router, TypeScript, Tailwind, ESLint seçimlerini sunar.

npx create-next-app@latest

Proje Yapısı

App Router'la birlikte gelen modern dizin yapısı dosya tabanlı routing'e dayanır. Her klasör bir route, layout.tsx layout, page.tsx route'un sayfasıdır.

app/
├── layout.tsx        # ortak layout
├── page.tsx          # / sayfası
├── about/
│   └── page.tsx      # /about
└── api/
    └── hello/
        └── route.ts  # /api/hello

App Router (ÖNEMLİ)

Next.js 13+ ile gelen yeni routing sistemi. React Server Components'i varsayılan olarak destekler, layout, loading ve streaming gibi modern özelliklere yerleşik altyapı sağlar.

• Next.js'teki yeni routing sistemi
• React Server Components varsayılan
• Layout, loading ve streaming desteği
• Nested routes ile parça parça UI

Server vs Client Components

App Router'da componentler varsayılan olarak Server Component'tir. Client Component yapmak için dosyanın en üstüne 'use client' yazılır.

• Server Component: sunucuda render olur, daha hızlı, browser JS yok
• Client Component: tarayıcıda çalışır, useState/useEffect kullanılabilir
• İkisi nested olarak birleşebilir

"use client";
// bu dosya artık Client Component

Render Stratejileri

Next.js bir sayfa için 4 farklı render stratejisi sunar; sayfa düzeyinde tercih yapabilirsiniz.

• SSR — her istekte sunucuda render
• SSG — build time'da render edilir, statik HTML üretir
• ISR — SSG + arka planda yenileme (incremental static regeneration)
• CSR — sadece istemcide render

Veri Çekme (App Router)

App Router'da Server Component'ler async olabilir; doğrudan await ile veri çekersiniz. fetch otomatik cache yönetimi yapar.

export default async function Posts() {
  const res = await fetch("https://api.example.com");
  const data = await res.json();
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

API Routes

Backend endpoint'leri uygulamanın içinde route.ts dosyaları ile yazılır. GET, POST, PUT, PATCH, DELETE export'larıyla HTTP fiilleri tanımlanır.

export async function GET() {
  return Response.json({ message: "Merhaba API" });
}

Temel Özellikler

Next.js'in production-ready paketinde gelen güçler:

• Dosya tabanlı routing
• Server Components
• Built-in API routes
• Görüntü optimizasyonu (next/image)
• Otomatik kod bölme (code splitting)
• TypeScript desteği yerleşik

Next.js mı, React mı?

İkisinin amacı farklıdır:

• Next.js: fullstack framework — SSR, SSG, SEO, production-ready
• React: sadece UI kütüphanesi — sıfırdan kurmak gerek
• Yeni başlayanlar Next.js ile başlamayı tercih ediyor

Kullanım Alanları

Next.js'in en sık kullanıldığı senaryolar:

• SEO odaklı websiteler
• E-ticaret platformları
• SaaS dashboardları
• Blog ve içerik platformları
• Fullstack web uygulamaları

Özet

Next.js; frontend ve backend'i birleştirir, performansı ve SEO'yu iyileştirir, production-ready varsayılanlarla gelir. Modern, hızlı ve ölçeklenebilir web uygulamaları için React framework'ü seçimleri arasında zirvede yer alır.