Next.js ile Kurumsal Ölçekte Micro-Frontend Mimarisi Kurulumu

Monolitik (tek parça) frontend uygulamaları, belirli bir büyüklüğe ulaştığında geliştirici deneyimini (DX) ve derleme (build) sürelerini ciddi şekilde olumsuz etkilemeye başlar. Farklı domain'lerle ilgilenen (örneğin e-ticaret uygulamasında "Ödeme Takımı", "Ürün Katalog Takımı", "Kullanıcı Paneli Takımı") ekiplerin birbirini beklemeden geliştirme ve dağıtım (deployment) yapabilmesi için Micro-Frontend mimarisi günümüzde kurumsal şirketlerin bir numaralı tercihidir.

Bu makalede, Next.js ekosisteminde Micro-Frontend mimarisini kurgulamanın en popüler iki yolunu inceleyeceğiz.

1. Next.js Multi-Zones (Yerleşik Çözüm)

Next.js'in kendi içinde sunduğu "Multi-Zones" özelliği, farklı Next.js uygulamalarını aynı domain altında birleştirmenize olanak tanır. Uygulamalar HTTP seviyesinde (genellikle bir ters vekil / reverse proxy veya Next.js rewrites özelliği ile) birbirine bağlanır.

Avantajları:

• Kurulumu nispeten basittir.
• Her uygulama kendi paket bağımlılıklarına (dependencies) sahip olur, izolasyon en üst düzeydedir.
• Vercel gibi platformlarda doğal desteklenir.

Dezavantajları:

• Ortak UI bileşenlerini (Örn: Header, Footer, Butonlar) çalışma anında (runtime) paylaşmak zordur; genellikle bir NPM paketi olarak yayınlanıp build anında (build-time) içeri alınmaları gerekir.

Konfigürasyon Örneği (Ana Uygulama - next.config.js):

module.exports = {
  async rewrites() {
    return [
      {
        source: "/checkout",
        destination: `https://checkout.sirketiniz.com/checkout`,
      },
      {
        source: "/checkout/:path*",
        destination: `https://checkout.sirketiniz.com/checkout/:path*`,
      },
    ];
  },
};