Next.js 15 App Router ve Server Components

Ders 5/5 25 dakika

Middleware ile İstek Yönetimi

middleware.ts dosyası ile authentication kontrolü, A/B testing, yönlendirme ve header düzenleme.

Middleware Nedir?

Middleware, bir istek sunucuya ulaşmadan önce çalışan koddur. Authentication, yönlendirme, A/B testing ve header düzenleme gibi işlemler için idealdir.

Temel Middleware

// middleware.ts (proje kökünde)
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // Dashboard sayfalarını koru
  if (pathname.startsWith("/dashboard")) {
    const token = request.cookies.get("auth-token");

    if (!token) {
      return NextResponse.redirect(new URL("/giris", request.url));
    }
  }

  return NextResponse.next();
}

// Hangi path'lerde çalışacak
export const config = {
  matcher: ["/dashboard/:path*", "/admin/:path*"],
};

Dil Algılama ve Yönlendirme

export function middleware(request: NextRequest) {
  const dil = request.headers.get("accept-language")?.split(",")[0].slice(0, 2);
  const pathname = request.nextUrl.pathname;

  // Eğer URL'de dil prefix yoksa yönlendir
  const dilVar = ["tr", "en"].some(d => pathname.startsWith(`/${d}`));

  if (!dilVar) {
    const yeniDil = dil === "en" ? "en" : "tr";
    return NextResponse.redirect(new URL(`/${yeniDil}${pathname}`, request.url));
  }

  return NextResponse.next();
}

Header Ekleme

export function middleware(request: NextRequest) {
  const yanit = NextResponse.next();

  // Güvenlik header'ları
  yanit.headers.set("X-Frame-Options", "DENY");
  yanit.headers.set("X-Content-Type-Options", "nosniff");
  yanit.headers.set(
    "Content-Security-Policy",
    "default-src 'self'; script-src 'self' 'unsafe-inline'"
  );

  return yanit;
}

A/B Testing

export function middleware(request: NextRequest) {
  const testGrubu = request.cookies.get("ab-test")?.value
    ?? (Math.random() < 0.5 ? "A" : "B");

  const yanit = NextResponse.next();
  yanit.cookies.set("ab-test", testGrubu);

  if (testGrubu === "B" && request.nextUrl.pathname === "/") {
    return NextResponse.rewrite(new URL("/ana-sayfa-b", request.url));
  }

  return yanit;
}

Önemli Noktalar

  • middleware.ts proje kökünde oluşturulur
  • config.matcher ile hangi route'larda çalışacağı belirlenir
  • NextResponse.redirect() ile yönlendirme, rewrite() ile URL değiştirmeden içerik değiştirme yapılır
  • Edge Runtime'da çalışır — çok hızlıdır