React Academy · Ders

Middleware Tabanlı Rota Koruması

Kimliği doğrulanmamış kullanıcıları uçta yönlendirmek için Next.js middleware'ini ve kimlik doğrulama geri çağrılarını kullanın.

Middleware Tabanlı Rota Koruması, CoddyKit'te ücretsiz bir React 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, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Next.js Ara Katman Yazılımı Nedir?

Ara katman yazılımı, bir istek rotaya ulaşmadan önce uç ortamında çalışır. Yönlendirme yapabilir, yeniden yazabilir veya üst bilgiler ekleyebilir — sunucu bileşenlerini yüklemeden kimlik doğrulama denetimleri yapmak için idealdir.

Ara Katman Yazılımı Oluşturma

Proje kök dizininde middleware.ts oluşturun. Bir middleware işlevi ve bir config eşleştiricisi dışa aktarın.

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

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')?.value;
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

Eşleştirici Kalıpları

matcher dizisi yol kalıplarını kullanır. Herhangi bir alt yol için :path* kullanın veya negatif ileri bakış ile yolları hariç tutun.

export const config = {
  matcher: [
    // Protect all routes except public ones:
    '/((?!login|register|_next|api/auth|favicon.ico).*)',
  ],
};

Auth.js Ara Katman Yazılımı Entegrasyonu

Auth.js (v5), kullanıma hazır bir ara katman yazılımı dışa aktarımı sağlar. Bunu bir eşleştiriciyle middleware.ts dosyasından yeniden dışa aktarın.

// middleware.ts
export { auth as middleware } from '@/auth';

export const config = {
  matcher: ['/dashboard/:path*', '/settings/:path*'],
};

Ara Katman Yazılımında JWT Denetleme

JWT token'ını ara katman yazılımında jose kütüphanesini kullanarak doğrulayın (uç ortamıyla uyumludur — Node.js crypto modülü gerekmez).

import { jwtVerify } from 'jose';

export async function middleware(request: NextRequest) {
  const token = request.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  try {
    await jwtVerify(token, new TextEncoder().encode(process.env.JWT_SECRET));
    return NextResponse.next();
  } catch {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

Role Dayalı Ara Katman Yazılımı

Kullanıcı rolünü token'dan okuyun ve rol yetersizse yetkisiz sayfaya yönlendirin.

const { payload } = await jwtVerify(token, secret);
if (request.nextUrl.pathname.startsWith('/admin') && payload.role !== 'admin') {
  return NextResponse.redirect(new URL('/unauthorized', request.url));
}

Rota İşleyicilerine Veri Aktarma

Token'ı yeniden almak zorunda kalmadan çözümlenen kullanıcı verilerini sunucu bileşenlerine aktarmak için ara katman yazılımının içinde bir istek üst bilgisi ayarlayın.

const response = NextResponse.next();
response.headers.set('x-user-id', payload.sub as string);
response.headers.set('x-user-role', payload.role as string);
return response;

// In a Server Component:
import { headers } from 'next/headers';
const userId = headers().get('x-user-id');

Ara Katman Yazılımında URL'leri Yeniden Yazma

Tarayıcının adres çubuğunu değiştirmeden bir URL için farklı bir sayfa sunmak amacıyla NextResponse.rewrite() kullanın — A/B denemeleri veya özellik bayrakları için kullanışlıdır.

const isInExperiment = Math.random() > 0.5;
if (isInExperiment) {
  return NextResponse.rewrite(new URL('/home-v2', request.url));
}

Ara Katman Yazılımında Geo ve IP

Bölgeye dayalı yönlendirme veya engelleme işlemleri için NextRequest nesnesinden istek coğrafi verilerine ve IP bilgisine erişin.

const country = request.geo?.country ?? 'US';
if (country === 'XX') {
  return NextResponse.redirect(new URL('/region-blocked', request.url));
}

Ara Katman Yazılımı Performansı

Ara katman yazılımı, eşleşen her istekte uç ortamında çalışır. Hafif tutun — yoğun hesaplamalardan veya büyük içe aktarımlardan kaçının. Yalnızca uç ortamıyla uyumlu kütüphaneleri kullanın.

Kimlik Doğrulamalı ve Genel Rotaları Birleştirme

Yaygın bir kalıp şudur: kimlik doğrulama mantığından önce denetlenen belirli bir genel yol izin listesi dışındaki her şeyi korumak.

const PUBLIC_PATHS = ['/login', '/register', '/about'];
const isPublic = PUBLIC_PATHS.some(p => request.nextUrl.pathname.startsWith(p));
if (isPublic) return NextResponse.next();

// Auth check for non-public routes
const token = request.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', request.url));

Kısa Kontrol

Node'un crypto modülü yerine Next.js ara katman yazılımının içinde JWT'leri doğrulamak için hangi kütüphaneyi kullanmalısınız?

Özet

Proje kök dizininde middleware.ts dosyasını bir matcher config'iyle oluşturun. Kimlik doğrulama token'larını uç ortamıyla uyumlu jose ile denetleyin, kimliği doğrulanmamış kullanıcıları yönlendirin ve çözümlenen verileri yanıt üst bilgileri aracılığıyla sunucu bileşenlerine aktarın. Ara katman yazılımını hızlı ve bağımlılıklarını az tutun.

Sıkça Sorulan Sorular

“Middleware Tabanlı Rota Koruması” dersi ücretsiz mi?

Evet — “Middleware Tabanlı Rota Koruması” 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 React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“Middleware Tabanlı Rota Koruması” dersinde ne öğreneceğim?

Kimliği doğrulanmamış kullanıcıları uçta yönlendirmek için Next.js middleware'ini ve kimlik doğrulama geri çağrılarını kullanın. React 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.

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

Önceden deneyim gerekmez. CoddyKit'te React 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.

“Middleware Tabanlı Rota Koruması” 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 React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React 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

Next.js App Router'da Auth.js Kurulumu
Oturum Yönetimi ve useSession Hook'u
Kimlik Bilgileri Sağlayıcısı ve Özel Giriş
Middleware Tabanlı Rota Koruması

← React Academy Sayfasına Dön