0Pricing
Frontend Academy · Ders

Next.js API Rotaları ve Ara Yazılım

api/ dizininde sunucusuz API uç noktaları oluşturmayı, istekleri Route Handler'larda işlemeyi ve kimlik doğrulama ile yönlendirmeler için kenar Middleware çalıştırmayı öğrenin.

Next.js API Rotaları ve Ara Yazılım, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

API Rotaları Neden Kullanılır?

Next.js, uygulamanızla birlikte bir sunucu paketler — ayrı bir Node projesi olmadan sayfalarınızın yanında arka uç uç noktaları yazabilirsiniz. Proxy işlemleri, form gönderimleri, web kancaları ve küçük API'ler için harikadır.

Sayfalar Yönlendiricisi API Rotaları

pages/api/ içindeki dosyalar, Express tarzı (req, res) bir varsayılan işlev dışa aktarır.

// pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const users = await db.users.findMany();
    return res.json(users);
  }
  if (req.method === 'POST') {
    const user = await db.users.create({ data: req.body });
    return res.status(201).json(user);
  }
  return res.status(405).end();
}

Uygulama Yönlendiricisi Rota İşleyicileri

Uygulama Yönlendiricisi, Web standardındaki İstek/Yanıt API'sini kullanır. Her HTTP yöntemi adlandırılmış bir dışa aktarımdır.

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const users = await db.users.findMany();
  return NextResponse.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return NextResponse.json(user, { status: 201 });
}

Dinamik API Rotaları

Dinamik bölümler aynı şekilde çalışır: app/api/users/[id]/route.ts, /api/users/123 ile eşleşir.

// app/api/users/[id]/route.ts
export async function GET(req: Request, { params }: { params: { id: string }}) {
  const user = await db.users.findUnique({ where: { id: params.id }});
  if (!user) return new Response('Not Found', { status: 404 });
  return Response.json(user);
}

Çerezleri ve Üstbilgileri Okuma

Uygulama Yönlendiricisi'nde next/headers içindeki yardımcıları kullanın (istek kapsamlıdır).

import { cookies, headers } from 'next/headers';

export async function GET() {
  const token = cookies().get('token')?.value;
  const userAgent = headers().get('user-agent');
  // ...
}

Akış Yanıtları

Rota işleyicileri akışlı bir yanıt döndürebilir — bu, yapay zekâ sohbet tamamlamaları veya büyük dosya oluşturma için kullanışlıdır.

export async function GET() {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      for (let i = 0; i < 5; i++) {
        controller.enqueue(encoder.encode(`chunk ${i}\n`));
        await new Promise(r => setTimeout(r, 500));
      }
      controller.close();
    }
  });
  return new Response(stream);
}

Ara Katman — Rotalardan Önce Çalışır

Proje kökündeki middleware.ts, istekler sayfalara veya API rotalarına ulaşmadan önce çalışır. Kimlik doğrulama kontrolleri, yönlendirmeler, üstbilgileri yeniden yazma ve A/B testi için kullanın.

// middleware.ts
import { NextResponse, type NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

Ara Katman Eşleştiricisi

Ara katmanın hangi yollar üzerinde çalışacağını bir eşleştirici config'i ile sınırlayın.

export const config = {
  matcher: [
    '/dashboard/:path*',
    '/api/:path*',
    '/((?!_next/static|_next/image|favicon.ico).*)'
  ]
};

Ara Katman Çalışma Zamanı

Ara katman varsayılan olarak Edge çalışma zamanında çalışır — hafif bir V8 yalıtımıdır, tam Node değildir. Kullanılabilir API'ler sınırlıdır: fs gibi Node modülleri ve yerel bağımlılıklar kullanılamaz.

Ara Katmanla Kimlik Doğrulama Modeli

Yaygın yaklaşım şudur: ara katmanda bir JWT'yi verify edin, eksik veya geçersizse oturum açma sayfasına yönlendirin ve decoded kullanıcıyı alt rotaların okuyabileceği bir istek üstbilgisine ekleyin.

import jwt from 'jsonwebtoken';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', req.url));
  try {
    const decoded = jwt.verify(token, process.env.SECRET!);
    const res = NextResponse.next();
    res.headers.set('x-user-id', String(decoded.sub));
    return res;
  } catch {
    return NextResponse.redirect(new URL('/login', req.url));
  }
}

Ara Katmanda Hız Sınırlama

API mantığınıza ulaşmadan önce IP başına hız sınırlarını uygulamak için ara katmanı bir KV deposuyla (Upstash, Vercel KV) birleştirin.

API Rotalarını NOT Kullanmanız Gereken Durumlar

Ayrı mikro hizmetler veya paylaşılan API'ler için gerçek bir arka uç (Hono, Express, NestJS) dağıtın. Next.js API rotaları proxy işlemleri, web kancaları ve uygulamaya özel uç noktalar için idealdir — diğer istemcilere herkese açık bir API sunmak için değil.

Hızlı Kontrol

Next.js ara katmanı nerede çalışır ve en yaygın kullanım alanı nedir?

Özet: API Rotaları ve Ara Katman

Sayfalar Yönlendiricisi: req/res ile pages/api. Uygulama Yönlendiricisi: İstek/Yanıt kullanan yöntem dışa aktarımlarıyla (GET/POST vb.) app/api/.../route.ts. Çerezleri/üstbilgileri next/headers üzerinden okuyun. ReadableStream ile akış yanıtları oluşturun. middleware.ts, rotalardan önce Edge üzerinde çalışır — kimlik doğrulama, yönlendirmeler, üstbilgiler. Eşleştirici config'i yolları sınırlar. Herkese açık API'ler için gerçek bir arka uç kullanın.

Sıkça Sorulan Sorular

“Next.js API Rotaları ve Ara Yazılım” dersi ücretsiz mi?

Evet — “Next.js API Rotaları ve Ara Yazılım” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Next.js API Rotaları ve Ara Yazılım” dersinde ne öğreneceğim?

api/ dizininde sunucusuz API uç noktaları oluşturmayı, istekleri Route Handler'larda işlemeyi ve kimlik doğrulama ile yönlendirmeler için kenar Middleware çalıştırmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Next.js API Rotaları ve Ara Yazılım” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Pages Router ve App Router Karşılaştırması
  2. Sunucu Bileşenleri ve İstemci Bileşenleri
  3. SSG, SSR ve ISR
  4. Next.js API Rotaları ve Ara Yazılım
← Frontend Academy Sayfasına Dön