Next.js Edge Middleware ile Alt Alan Adlarında Parıltısız UI'lar Oluşturun

B2B SaaS platformunuzu ölçeklendirirken, müşterilerinize özel alt alan adları (örneğin, acme.teknolojifirmam.com) sunmak marka değerini önemli ölçüde artırır. Ancak bu özellik, frontend tarafında karmaşık bir mimari gerektirir. Tekil React uygulamalarında, pencere konumunu analiz eden ve farklı URL'ler için bileşenleri yeniden render eden useEffect kancalarıyla karşılaşabilirsiniz. Bu yöntem hem yavaştır hem de ekran parlamalarına ve SEO kayıplarına yol açar. Enterprise düzeyinde bir yönlendirme sistemi oluşturmak için, talebin Next.js rendering motoruna ulaşmadan önce yakalanması gerekir. Bu işlem, Next.js Edge Middleware kullanılarak gerçekleştirilir.

Edge Ortamının Gücü: Next.js Middleware

Next.js Middleware, Edge ortamında çalışır (örneğin, Vercel'in Edge Ağı). Bu sayede kod, coğrafi olarak kullanıcıya en yakın sunucu düğümünde milisaniyeler içinde çalıştırılır. Gelen HTTP talebini yakalayan middleware, URL'yi inceleyerek kullanıcının tarayıcısında görünen adresi değiştirmeden içeriği Next.js'in doğru rota dizinine yönlendirir. Bu sayede, kullanıcıya anında yanıt verilir ve ekran parlamaları tamamen ortadan kalkar.

SaaS platformunuzu geliştirirken, alt alan adlarına özel içerik sunmak için aşağıdaki adımları izleyerek Edge Middleware'ı etkinleştirebilirsiniz.

1. Uygulama Yönlendiricisini Yapılandırma

Next.js projesi içinde, dinamik rota bölümlerini düzenleyerek alt alan adlarına özel yönlendirmeleri yönetebilirsiniz. Örneğin, aşağıdaki dizin yapısını kullanarak farklı müşteri alt alanlarını ayrı bir klasörde toplayabilirsiniz:

app/
├── (public)/
│   └── page.tsx          # Ana pazarlama sitesi (teknolojifirmam.com)
├── [tenant]/             # Alt alan adı trafiğinin yönlendirildiği gizli klasör
│   └── dashboard/
│       └── page.tsx      # Müşteri özelindeki içerikler buraya yönlendirilir
└── middleware.ts         # Edge yönlendirme motoru

Bu yapıda, [tenant] klasörü dinamik olarak alt alan adlarını temsil eder ve her müşteri için özel içeriklerin sunulmasını sağlar.

2. Middleware Mantığını Uygulama

Middleware, projenizin kök dizininde yer alan middleware.ts dosyasında tanımlanır. Bu dosya, gelen talebin host başlığını analiz eder ve alt alan adını tespit ederek URL'yi transparan bir şekilde [tenant] klasörüne yönlendirir. Aşağıda, bu mantığın nasıl uygulandığına dair bir örnek bulunmaktadır:

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

export const config = {
  matcher: [
    // Statik dosyalar, API'ler ve özel yollar dışındaki tüm talepleri yakala
    "/((?!api/|_next/|_static/|_vercel|[\\w-]+\\.\\w+).*)",
  ],
};

export default async function middleware(req: NextRequest) {
  const url = req.nextUrl;
  
  // 1. Talebin geldiği host'u al (örneğin, 'acme.teknolojifirmam.com' veya 'localhost:3000')
  const hostname = req.headers.get('host') || 'teknolojifirmam.com';
  
  // 2. Kök alanları hariç tut (alt alan mantığına dahil etme)
  const isRootDomain = hostname === 'teknolojifirmam.com' || hostname === 'localhost:3000';
  
  // 3. Alt alan adını çıkar (varsa)
  // 'acme.teknolojifirmam.com' -> 'acme'
  const subdomain = hostname.replace(`.teknolojifirmam.com`, '');

  if (!isRootDomain && subdomain) {
    // 4. Transparan yönlendirme: 
    // Kullanıcı 'acme.teknolojifirmam.com/dashboard' adresini görür
    // Next.js, 'app/[tenant]/dashboard/page.tsx' sayfasını renderlar ve [tenant] = 'acme' olur
    return NextResponse.rewrite(new URL(`/${subdomain}${url.pathname}`, req.url));
  }

  // Kök alan taleplerini olduğu gibi bırak
  return NextResponse.next();
}

Bu kod, gelen talebin alt alan adını analiz eder ve kullanıcıya özel içerikleri doğru rotaya yönlendirir. Böylece, frontend kodunda karmaşık yönlendirme mantıklarına gerek kalmaz.

3. Mühendislik Açısından Sağlanan Faydalar

Edge Middleware kullanarak alt alan adlarını yönetmek, SaaS mimarisini önemli ölçüde iyileştirir:

• Sıfır Layout Kayması: Yönlendirme kararı Edge ortamında alındığı için kullanıcı, yanlış bileşenlerin render edildiği bir an bile görmez. Bu sayede, sayfa yüklemeleri sırasında ekran parlamaları tamamen ortadan kalkar.
• Işık Hızı Doğrulama: Middleware içinde JWT doğrulamasını doğrudan ekleyerek, yetkisiz kullanıcıları React render aşamasından önce reddedebilirsiniz. Bu, kaynakların verimli kullanılmasını sağlar.
• Temiz Kod Tabanı: React bileşenleri, URL'leri analiz etmek zorunda kalmaz. Bunun yerine, dinamik klasör yapısından gelen tenant parametresini doğrudan alırlar. Bu sayede, kod daha okunabilir ve bakımı kolay hale gelir.

Alt alan adlarında dinamik içerik sunmak, sadece bir yönlendirme sorunu değildir; aynı zamanda kullanıcı deneyimini ve performansı doğrudan etkileyen bir mimari karardır. Next.js Edge Middleware kullanarak, B2B müşterilerinize özel, hızlı ve sorunsuz bir deneyim sunabilirsiniz. Bu yaklaşım, platformunuzu ölçeklendirirken karşılaşabileceğiniz performans ve kullanıcı memnuniyeti sorunlarını kökten çözmenize yardımcı olur. Gelecekteki projelerinizde, bu stratejiyi daha da genişleterek farklı kullanım senaryolarına uyarlayabilirsiniz.