Next.js 15 App Router ve Server Components

Route Handlers Nedir?

Next.js\'te backend API endpoint\'leri oluşturmak için route.ts dosyaları kullanılır. Bu dosyalar app/api/ altında veya herhangi bir klasörde yer alabilir.

app/
└── api/
    ├── yazilar/
    │   ├── route.ts          → GET /api/yazilar
    │   └── [id]/
    │       └── route.ts      → GET/PUT/DELETE /api/yazilar/:id
    └── kullanici/
        └── route.ts          → GET/POST /api/kullanici

GET Endpoint

// app/api/yazilar/route.ts
import { NextRequest, NextResponse } from "next/server";

// Örnek veri (gerçekte veritabanından gelir)
const yazilar = [
  { id: 1, baslik: "Next.js 15 Harika!", ozet: "..." },
  { id: 2, baslik: "React Server Components", ozet: "..." },
];

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const kategori = searchParams.get("kategori");

  const filtrelenmis = kategori
    ? yazilar.filter(y => y.kategori === kategori)
    : yazilar;

  return NextResponse.json(filtrelenmis);
}

POST Endpoint

export async function POST(request: NextRequest) {
  const govde = await request.json();

  // Validasyon
  if (!govde.baslik || !govde.icerik) {
    return NextResponse.json(
      { hata: "Başlık ve içerik zorunludur" },
      { status: 400 }
    );
  }

  // Veritabanına kaydet (örnek)
  const yeniYazi = {
    id: Date.now(),
    ...govde,
    tarih: new Date().toISOString(),
  };

  return NextResponse.json(yeniYazi, { status: 201 });
}

Dinamik Route Handler

// app/api/yazilar/[id]/route.ts
export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params; // Next.js 15'te await gerekli!
  const yazi = yazilar.find(y => y.id === parseInt(id));

  if (!yazi) {
    return NextResponse.json({ hata: "Yazı bulunamadı" }, { status: 404 });
  }

  return NextResponse.json(yazi);
}

export async function DELETE(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  // Silme işlemi...
  return new NextResponse(null, { status: 204 });
}

CORS ve Headers

export async function GET() {
  return NextResponse.json(
    { veri: "merhaba" },
    {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Cache-Control": "public, max-age=60",
      },
    }
  );
}

Route Handler\'dan Veri Çekme (Client)

"use client";
import { useEffect, useState } from "react";

export default function YaziListesi() {
  const [yazilar, setYazilar] = useState([]);

  useEffect(() => {
    fetch("/api/yazilar")
      .then(r => r.json())
      .then(setYazilar);
  }, []);

  return (
    <ul>
      {yazilar.map((yazi: any) => (
        <li key={yazi.id}>{yazi.baslik}</li>
      ))}
    </ul>
  );
}