Next.js ile Yüksek Performanslı E-Ticaret Altyapısı Kurmak: Mimari ve SEO İpuçları

Geleneksel e-ticaret yazılımları, monolitik yapıları ve sunucu ile tarayıcı arasındaki hantal iletişim yüzünden modern beklentiyi karşılamakta zorlanır. Yüzlerce varyant, yüksek çözünürlüklü medya, anlık filtre ve milisaniye düzeyinde açılış istendiğinde frontend katmanını arka ofis yükünden ayırmak tercih olmaktan çıkar. Mimari zorunluluk olur.

Binlerce stok kodu barındıran, oturumların büyük bölümü mobilden gelen ve kampanyada trafik sıçrayan platformlarda performans doğrudan ciro ve sadakatle ilişkilidir. Yavaş ürün sayfası, şişmiş JavaScript yüzünden donan arayüz, yanlış önbellek yüzünden sepette eskiyen stok ve botun bütçesini yiyen kontrolsüz URL parametreleri, teknik borcun işletme maliyetine döndüğü tipik sahnelerdir.

Web Geliştirmede Yeni Dönem: React vs Next.js yazısında, istemci taraflı bir kütüphane olan React ile üretim çatısı olan Next.js arasındaki yapısal farkı ele almıştım. Bu makale o karşılaştırmanın ötesine geçer. App Router, React Server Components ve önbellek kontrolünü kurumsal bir e-ticaret ekosistemine nasıl oturtacağınızı uçtan uca inceler.

1. Modern e-ticaret neden headless mimariye geçiyor?

Monolitik platformda veritabanı, iş mantığı, sipariş, şablon ve arayüz tek kod tabanına bağlıdır. Küçük operasyonda kurulum hızlıdır. Platform büyüyünce şu darboğazlar çıkar:

• Arayüzdeki küçük bir yerleşim değişikliği, tüm uygulamanın yeniden derlenmesini ve test edilmesini gerektirir.
• Arayüz, işlemci ve belleği iş mantığı ve veritabanı sorgularıyla paylaşır.
• Mobil uygulama, cihaz veya pazaryeri için ayrı deneyim sunmak ara katmanları şişirir.

Headless commerce, arayüzü (head) ticaret mantığından (body) ayırır. İki katman yalnız REST veya GraphQL ile konuşur.

KULLANICI DENEYİMİ
    Next.js App Router (vitrin: SSR / RSC / statik)
        |  HTTPS / JSON
        v
API GATEWAY / BFF
    yetki, oran sınırı, veri orkestrasyonu
        |           |            |            |
        v           v            v            v
  Commerce     PIM          Arama         Ödeme
  motoru     (ürün verisi)  motoru        geçidi
        |           |
        +-----+-----+
              v
        ERP ve CRM
        stok, fiyat, muhasebe, müşteri

Headless ekosistemin rolleri

1. Vitrin: Next.js ile kurulan, etkileşimi yöneten, sunucu render'ı veya statik içerik sunan katman.
2. BFF / API gateway: Birden fazla servisten veriyi toplayıp tek optimize yanıta çeviren, istekleri süzen orkestrasyon.
3. Commerce motoru: Sepet, ödeme adımı, sipariş, promosyon ve müşteri profili. Medusa, commercetools, Saleor veya özel bir .NET ya da Go servisi bu rolü üstlenebilir.
4. PIM: Teknik özellik, çeviri, kategori ve zengin medyanın tek kaydı.
5. ERP: Nihai stok, fiyat listesi, fatura ve lojistiğin ana defteri.
6. Arama motoru: Filtre, anlık metin araması, yazım toleransı ve yönlendirilmiş gezinme. Meilisearch, Algolia veya Elasticsearch bu iş için ayrılmış indekslerdir.
7. Ödeme geçidi: PCI-DSS uyumlu kart işleme, 3D Secure ve alternatif ödeme.

Headless her senaryo için uygun mu?

Headless mutlak doğru değildir. Operasyon maliyeti önce tartılır.

• Kazanç: Tasarım özgürlüğü, modern frontend araçları, yüksek Core Web Vitals, bağımsız ölçek ve satıcı kilidinin olmaması.
• Bedel: Birden fazla servisin bakımı, karmaşık CI/CD, dağıtık log, daha yüksek ilk maliyet ve sürekli bir mühendislik ekibi.

Katalogda 50 ürün ve ayda birkaç yüz sipariş olan bir butik için headless aşırı mühendisliktir. Yüksek stok kodu, çok kanal ve yoğun trafik olan platform için ölçeklenmenin sürdürülebilir yoludur.

2. Next.js e-ticarette ne işe yarar?

Next.js yalnızca bir React derleyicisi değildir. Sunucu ile tarayıcı arasındaki köprüyü kuran bir web mimarisidir. E-ticaret projesinde üstlendiği işler şunlardır:

• React Server Components: App Router'da bileşen varsayılan olarak sunucuda derlenir. Sorgu veya dahili API çağrısı bileşenin içinde yapılır. İstemciye o iş için ekstra JavaScript gitmez. Sayfanın script yükü düşer.
• Streaming ve Suspense: Sunucu sayfanın tamamını bitirip tek parça göndermeyi beklemez. Kabuk (üst menü, ürün başlığı, ana görsel) hemen gider. Yorum, öneri veya kargo gibi yavaş parçalar Suspense sınırında akıtılır.
• Görsel optimizasyonu: E-ticaret sayfasının ağırlığının büyük bölümü ürün görselidir. next/image görseli AVIF veya WebP'ye çevirir, çözünürlüğe göre boyutlar ve yerleşim alanını zorunlu kılarak kaymayı azaltır.
• Font: next/font yazı tipini derlemede indirip yerelden sunar. Harici font isteği ve yüklenirken oluşan kayma azalır.
• Dinamik metadata: generateMetadata başlık, açıklama, Open Graph ve robots etiketlerini veri kaynağından üretir. Bot zengin içerikle karşılaşır.
• Route Handler: Webhook, sepet doğrulama ve harici API için proxy, ayrı bir sunucu kurmadan aynı çatıda çözülür.

Next.js bir e-ticaret altyapısı değildir. Yüksek performanslı bir vitrin motorudur. Sipariş durumu, kart saklama, stok mutabakatı ve muhasebe defteri barındırmaz. Bu işler bağımsız backend, headless ticaret motoru ve ERP ile sağlanır.

3. Performans ve render: SSR, SSG ve ISR

En sık hata, tüm siteye tek render stratejisi dayatmaktır. Her sayfayı dinamik sunucu render'ına zorlamak maliyeti ve ilk bayt süresini yükseltir. Her şeyi statik üretmek ise eski fiyat ve stok krizi yaratır.

App Router'da bu ayrım getServerSideProps ile değil, bileşen düzeyinde veri seçenekleri ve segment yapılandırmasıyla yönetilir.

STATİK (SSG / ISR)                    DİNAMİK (SSR / streaming)
derleme veya önbellek anında          her istekte sunucuda

Blog, sözleşme, kurumsal sayfa        Sepet
Kategori (ISR + etiket)               Hesap paneli
Kampanya iniş sayfası                 Ödeme adımları
                                      Canlı sipariş takibi

HİBRİT: ürün detay sayfası
  Statik kabuk: başlık, açıklama, medya
  Anlık parça: canlı fiyat ve kalan stok (Suspense)

Sayfa türüne göre önbellek

| Sayfa | Render | Önbellek | Güncellik | SEO | | --- | --- | --- | --- | --- | | Ana sayfa | Hibrit | Ana sayfa etiketi, istek üzerine yenileme | Kampanya değişince | Çok yüksek | | Kampanya inişi | Statik | CDN ve edge | Saatlik veya etiket | Yüksek | | Kategori listesi | ISR veya streaming | Sık filtre dinamik, gövde etiketli | Filtreye bağlı | Çok yüksek | | Ürün detayı | RSC ve Suspense | Gövde etiketli, fiyat ve stok canlı | Stok ve fiyat anlık | En yüksek | | Blog / rehber | Statik | Uzun ömür, içerik değişince etiket temizlenir | Düşük | Yüksek | | Sepet | Dinamik | Önbellek yok | Kullanıcıya özel | noindex | | Hesap | Dinamik | Önbellek yok, oturuma bağlı | Kişisel veri cache'lenmez | noindex | | Ödeme | Dinamik | Önbellek yok, doğrudan commerce motoru | Anlık | noindex |

SSR sıralamayı kendiliğinden yükseltir mi?

Sunucu render'ının Google sırasını otomatik artırdığı düşüncesi yanlıştır. Googlebot, ilk baytı hızlı gelen siteyi daha verimli tarar. Her istekte yavaş bir veritabanına gidilip ilk bayt 1,5 saniyeyi aşarsa SSR, SEO'ya fayda yerine zarar verir. Doğru iş, taranabilir metin ve görseli önbellekten hızlı vermek, kişisel veya anlık parçayı akışa bırakmaktır.

4. Teknik e-ticaret SEO'su

Binlerce dinamik sayfa, varyant ve filtre, teknik SEO hatasına en açık zemindir. App Router, tarama ve anlamlandırma için net API'ler sunar.

Dinamik metadata

Sabit başlık, yinelenen meta hatası üretir. generateMetadata, gelen parametreye göre ürünü okur ve title, description ve Open Graph etiketlerini basar.

// app/products/[slug]/page.tsx
import type { Metadata } from "next";

interface Props {
  params: Promise<{ slug: string }>;
}

async function getProduct(slug: string) {
  const res = await fetch(`https://api.ornek-magaza.com/v1/products/${slug}`, {
    next: { tags: [`product:${slug}`] },
  });
  if (!res.ok) return null;
  return res.json();
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const product = await getProduct(slug);

  if (!product) {
    return {
      title: "Ürün bulunamadı",
      robots: { index: false, follow: false },
    };
  }

  const primaryImage = product.images?.[0]?.url;

  return {
    title: `${product.title} | Mağaza`,
    description: `${product.title}. ${product.shortSpecs}. Hızlı kargo ve distribütör garantisi.`,
    alternates: {
      canonical: `https://ornek-magaza.com/products/${product.canonicalSlug || slug}`,
    },
    openGraph: {
      title: product.title,
      description: product.summary,
      url: `https://ornek-magaza.com/products/${slug}`,
      images: primaryImage
        ? [{ url: primaryImage, width: 1200, height: 630, alt: product.title }]
        : [],
      type: "website",
    },
  };
}

Canonical URL ve varyant

Oyuncu bilgisayarında aynı gövde iki bellekle satılabilir: 16 GB RAM / 512 GB SSD ve 32 GB RAM / 1 TB SSD. Mimari karar burada kesilir.

1. Tek ana URL ve sorgu parametresi. Örnek yol: /products/gaming-pc-x?ram=32gb. Tüm varyantlar tek sayfada toplanır. Canonical, parametresiz ana adresi göstermelidir: /products/gaming-pc-x. Adres çubuğu varyantla güncellense de otorite ana sayfada kalır.
2. Her varyant için ayrı URL. Örnek: /products/gaming-pc-x-32gb-1tb. Kullanıcı doğrudan "RTX 4080 32 GB laptop" arıyorsa ayrı sayfa haklıdır. Metin ve başlık kopya olmamalıdır. Aksi halde yinelenen içerik sayfayı dizinin dışında bırakır.

Filtreleme ve tarama bütçesi

Kategoride marka, fiyat, ekran kartı ve işlemci filtreleri vardır. Her seçim yeni bir kombinasyon üretir:

/kategori/gaming-laptop?marka=asus&ram=32&gpu=rtx4080&siralama=fiyat-artan

Bu kontrol edilmezse örümcek tuzağı oluşur. Bot sonsuz kombinasyonda kaybolur. Asıl sayfalara bütçe kalmaz.

• Sıralama, sayfalama ve önemsiz fiyat parametresi taşıyan adresler, canonical ile filtresiz kategori adresini göstermelidir.
• İndekslenmeyecek kombinasyonlara noindex, follow verilmelidir.
• Arama hacmi yüksek bir filtre (örneğin RTX 4080 laptoplar) için ayrı bir iniş sayfası açılmalı ve menüden bağlanmalıdır.

XML sitemap ve robots.txt

App Router, sitemap'i dosya olarak üretir. robots.txt içinde sepet, ödeme, hesap ve anlamsız sıralama parametreleri kapatılabilir.

// app/robots.ts
import type { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: "*",
        allow: "/",
        disallow: ["/cart", "/checkout", "/account/", "/api/"],
      },
    ],
    sitemap: "https://ornek-magaza.com/sitemap.xml",
  };
}

Disallow, bota o adresi taramamasını söyler. Sayfanın sonuçlarda çıkmayacağını garanti etmez. Dışarıdan link varsa sayfa başlıksız indekslenebilir. Dizine girmesini kesin kesmek için sayfa taranabilmeli ve yanıtta noindex olmalıdır.

On binlerce üründe tek sitemap, 50.000 URL veya 50 MB sınırını aşar. generateSitemaps ile sitemap dizini parçalanır.

Yapılandırılmış veri

Zengin sonuçta fiyat, stok ve puan için Product, Offer ve BreadcrumbList gerekir. Aşağıdaki bileşen, sayfada gerçekten duran alanları JSON-LD olarak basar. Sayfada görünmeyen puan şemaya yazılmaz. Google bunu aldatıcı yapılandırılmış veri sayar.

type ProductJsonLdProps = {
  product: {
    title: string;
    description: string;
    images: string[];
    sku: string;
    gtin?: string;
    brand: string;
    price: number;
    currency: string;
    inStock: boolean;
    ratingValue?: number;
    reviewCount?: number;
  };
  url: string;
};

export function ProductJsonLd({ product, url }: ProductJsonLdProps) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.title,
    image: product.images,
    description: product.description,
    sku: product.sku,
    gtin: product.gtin,
    brand: { "@type": "Brand", name: product.brand },
    offers: {
      "@type": "Offer",
      url,
      priceCurrency: product.currency,
      price: product.price.toFixed(2),
      availability: product.inStock
        ? "https://schema.org/InStock"
        : "https://schema.org/OutOfStock",
      itemCondition: "https://schema.org/NewCondition",
    },
    ...(product.ratingValue && product.reviewCount
      ? {
          aggregateRating: {
            "@type": "AggregateRating",
            ratingValue: product.ratingValue,
            reviewCount: product.reviewCount,
          },
        }
      : {}),
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  );
}

5. Core Web Vitals

Bu metrikler e-ticarette sepeti terk ile doğrudan ilişkilidir.

LCP  2,5 saniyenin altı
  Ana görsele priority
  WebP / AVIF
  İlk bayt için edge önbellek

INP  200 ms altı
  Az sayıda istemci bileşeni
  Ağır güncellemeyi startTransition ile ertelemek
  Üçüncü taraf scripti izole etmek

CLS  0,1 altı
  Görselde sabit genişlik ve yükseklik
  next/font
  Banner alanına min-height

Largest Contentful Paint

Ürün sayfasında LCP neredeyse her zaman ana görseldir. Görseli tembel yüklemek veya mobilde 4K indirmek hatadır. Ekranın üstündeki ana görsel öncelikli indirilmeli ve sizes cihaz genişliğine uymalıdır.

<Image
  src={product.mainImage}
  alt={product.title}
  width={600}
  height={600}
  priority
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 600px"
/>

Tarayıcı görselin kritik olduğunu anlar ve HTML gelir gelmez indirmeye başlar.

Interaction to Next Paint

INP, tıklama ile pikselin güncellenmesi arasındaki gecikmedir. Gereksiz use client dev paket üretir. Ana iş parçacığı script ayrıştırırken sepet düğmesi kilitlenir. Sık tetiklenen sepette ekleme ve varyant seçiminde useTransition, arayüzün kilitlenmesini engeller.

Cumulative Layout Shift

Geç gelen banner içeriği aşağı iter. Kullanıcı yanlış düğmeye basar. next/font yazı tipini kaymasız yükler. Boyutu değişebilecek banner ve kargo uyarısı için önceden min-height ayrılır.

Lighthouse ve gerçek kullanıcı

Geliştirme makinesinde 100 Lighthouse skoru, sitenin gerçekte hızlı olduğunu kanıtlamaz. Sıralamayı belirleyen veri, Chrome kullanıcı deneyimi raporundaki 28 günlük ölçüdür. Zayıf bir telefon ve 4G, asıl LCP ve INP'yi üretir. Mimari, sentetik skora değil gerçek kullanıcı izlemeye göre ayarlanır.

6. Stok ve fiyat: veriyi hızına göre ayırmak

Tüm verinin değişim hızı aynı değildir. Performans, statik kalabilen ile dinamik olmak zorunda olanı ayırmaktan gelir.

Bir dizüstü bilgisayarda:

• Statik: Ad, marka, işlemci, kasa ölçüsü, tanıtım videosu, kılavuz. Aylar boyu değişmez. CDN'de durabilir.
• Yarı dinamik: Puan, yorum, benzer ürün. Saatte bir veya yeni yorum onaylanınca yeter.
• Kritik: Anlık stok, kampanya fiyatı, sepete eklenebilirlik, geri sayım. Saniyelik gecikme, stokta olmayan ürünün satılmasına veya yanlış fiyattan siparişe yol açar.

ÜRÜN DETAYI
  STATİK KABUK (etiketle yenileme)
    başlık, açıklama, görseller, teknik tablo
  DİNAMİK PARÇA (Suspense, canlı servis)
    fiyat ve stok iskeleti, sonra güncel fiyat
    sorgu doğrudan Redis veya commerce backend

İstek üzerine önbellek düşürme

Veri getirirken etiketlenir. ERP bir ürünü güncellediğinde site yeniden derlenmez. Yalnız o etiketi düşer.

export async function getProductData(id: string) {
  const res = await fetch(`https://backend.internal/api/products/${id}`, {
    next: { tags: [`product:${id}`, "products"] },
  });
  if (!res.ok) throw new Error("Ürün bilgisi alınamadı");
  return res.json();
}

Webhook alıcısı gizli bir başlık doğrular ve etiketi temizler.

import { revalidateTag } from "next/cache";
import { NextResponse, type NextRequest } from "next/server";

export async function POST(request: NextRequest) {
  const secret = request.headers.get("x-revalidate-secret");
  if (secret !== process.env.INTERNAL_REVALIDATE_TOKEN) {
    return NextResponse.json({ message: "Yetkisiz istek" }, { status: 401 });
  }

  const body = await request.json();
  const productId = body.productId;
  if (!productId) {
    return NextResponse.json({ message: "Eksik parametre" }, { status: 400 });
  }

  revalidateTag(`product:${productId}`, { expire: 0 });
  return NextResponse.json({ revalidated: true, tag: `product:${productId}` });
}

Webhook vitrinin dışından geldiği için etiket hemen düşer. max profili eski veriyi yenilenene kadar sunar. Stok ve fiyat için bu gecikme fazla kaçar.

Sepet ve ödemede önbellek kapanır

Vitrinde fiyat 30 saniye gecikmeli gelse bile sepete ekleme ve ödeme başlatmada önbellek kapanır. Fiyat ve stok, istemciden gelen değere güvenilerek işlenmez. Commerce backend, ERP veya yetkili veritabanında anlık kilit ile doğrular.

7. Yüksek trafikli bir oyuncu bilgisayarı platformu

Somut model: hazır sistem ve OEM donanım satan bir vitrin.

• Katalog: 5.000 aktif ürün. Hazır sistem, notebook, ekran kartı, anakart, çevre birimi.
• Trafik: normalde 20.000 eşzamanlı kullanıcı. Yayıncı kampanyasında 100.000'i aşan dalga.
• Operasyon: döviz kuru değişince fiyatların güncellenmesi ve dinamik PC toplama.

Kullanıcı
    | HTTPS
    v
Edge CDN
    v
Next.js vitrin
    |-- Server Components: statik kabuk
    |-- Server Actions: sepet ve mutasyon
    |-- Route Handlers: webhook
    v
Commerce API
    |-- Redis: stok ve oturum
    |-- PostgreSQL: ana kayıt
    |-- Meilisearch veya Typesense: arama
ERP
    | kuyruk
    v
Worker
    |-- fiyat ve stok güncellemesi -> Commerce API
    |-- önbellek düşürme -> Next.js revalidate
Commerce API -> ödeme geçidi
Commerce API -> headless CMS (blog ve içerik)

Yığın neden böyle?

1. Next.js ve TypeScript: SEO, görsel zenginlik ve PC toplama sihirbazının durum yönetimi React ekosisteminde kalır.
2. .NET commerce API: Sipariş, sepet kilidi ve ödeme hacminde işlem kapasitesi ve tip güvenliği için.
3. Redis: Fiyat listesi, sepet ve stok sayacı, ana veritabanının önünde tampon.
4. Meilisearch: "AM5 soketli anakart" gibi filtre ve anlık arama. SQL LIKE veritabanını kilitlemez.
5. Kuyruk: ERP'den gelen toplu stok hareketi vitrini ve ana veritabanını yormaz. İş kontrollü hızda tüketilir.

8. ERP entegrasyonu

Operasyonun kalbi ERP'dir. Mağazada satılan ekran kartının stok düşüşü, saniyeler içinde sitedeki düğmeyi tükendi yapmalıdır.

1. Depo hareketi: ERP stoğu sıfıra iner.
2. Tetikleyici veya entegratör değişikliği yakalar.
3. Mesaj, tekillik anahtarıyla kuyruğa yazılır.
4. Worker mesajı yer: PostgreSQL ve Redis güncellenir.
5. Worker, Next.js revalidate ucuna imzalı istek atar.
6. İlgili ürün etiketi düşer.
7. İlk ziyaretçi güncel "stokta yok" bilgisini görür.
8. O anda sepette olanlar için ödeme adımında stok yeniden kontrol edilir.

Güvenilirlik

• ERP uçları tarayıcıdan veya istemci scriptinden çağrılmaz. Anahtar sızar ve kurumsal ağ açılır.
• Aynı stok bildirimi ağ kesintisinde üç kez gelebilir. Her mesaj bir işlem anahtarıyla karşılanır. İşlenmiş güncelleme yeniden çalışmaz.
• ERP çökünce vitrin durmamalıdır. Entegratör, ERP'ye ulaşamayınca istekleri keser. Son geçerli önbellek, stok teyidinin geçici olduğu uyarısıyla sunulur.

9. Vitrin güvenliği ve ödeme

Headless kurulumda açık, çoğunlukla istemci ile sunucu sınırının yanlış çizilmesinden gelir.

API anahtarları

Backend sırrının başına NEXT_PUBLIC_ koymak, anahtarı tarayıcı paketine yazar. Ödeme sırrı ve veritabanı adresi yalnız sunucuda okunur. NEXT_PUBLIC_ olmayan değişken, istemci paketinden temizlenir ve Node çalışma anında kalır.

Sepet tutarına güvenilmez

Kötü niyetli kullanıcı, ağ isteğindeki tutarı değiştirebilir. İstemciden gelen fiyat, indirim ve toplam her zaman yok sayılır. İstemci yalnız ürün kimliği ve adet gönderir. Server Action veya Route Handler, kimliği alıp yetkili kayıttan birim fiyatı çeker ve toplamı kendisi hesaplar. Ödeme geçidine giden tutar bu teyit edilmiş sayıdır.

Webhook imzası

Kart onayından sonra geçit, siteye asenkron bildirim yollar. İsteğin geçitten geldiği HMAC ile doğrulanır.

import { createHmac, timingSafeEqual } from "node:crypto";
import { NextResponse, type NextRequest } from "next/server";

export async function POST(req: NextRequest) {
  const rawBody = await req.text();
  const signature = req.headers.get("x-payment-signature") ?? "";
  const secret = process.env.PAYMENT_WEBHOOK_SECRET;
  if (!secret) {
    return NextResponse.json({ error: "Yapılandırma eksik" }, { status: 500 });
  }

  const expected = createHmac("sha256", secret).update(rawBody).digest("hex");
  const left = Buffer.from(signature);
  const right = Buffer.from(expected);
  if (left.length !== right.length || !timingSafeEqual(left, right)) {
    return NextResponse.json({ error: "Geçersiz imza" }, { status: 400 });
  }

  const payload = JSON.parse(rawBody) as { orderId?: string };
  if (!payload.orderId) {
    return NextResponse.json({ error: "Eksik sipariş" }, { status: 400 });
  }

  return NextResponse.json({ received: true });
}

Kart verisi Next.js sunucusunda tutulmaz. Lisanslı geçidin formu üzerinden şifrelenerek iletilir.

10. Next.js herkes için mi?

| Kriter | Next.js headless | Shopify | WooCommerce | Özel monolit | | --- | --- | --- | --- | --- | | İlk maliyet | Yüksek | Düşük-orta | Düşük | Çok yüksek | | Bakım | Mühendislik gerekir | SaaS, düşük | Eklenti yükü | Yüksek | | Ekip | Kıdemli React / Next.js | Temel veya ajans | Başlangıç | Dil uzmanı | | Özelleştirme | Sınırsız | Platform kuralı | Eklentiyle geniş | Sınırsız | | Ölçek | Yüksek SKU | Çok yüksek | Orta, zayıf uç | Altyapıya bağlı | | SEO ve URL | Tam kontrol | Kısıtlı yol yapısı | Yüksek | Tam kontrol | | Core Web Vitals | Maksimum esneklik | Temaya bağlı | Eklenti yüzünden zayıf | Mimariye bağlı |

• WooCommerce: Ayda bin siparişin altında, teknik personeli olmayan, standart eklentiyle yetinen küçük işletme.
• Shopify: Hızlı çıkış, altyapı bakımı istemeyen, standart süreci kabul eden orta marka.
• Next.js headless: Karmaşık konfigürasyon, yüksek trafik, ERP entegrasyonu ve deneyimi rekabet avantajı yapmak isteyen kurumsal platform.

11. Sık yapılan hatalar

1. Her bileşene use client eklemek. Kancalar için sayfa istemciye çevrilir. Yüzlerce kilobayt script iner, engelleme süresi artar, LCP düşer. Sayfa sunucu bileşeni kalır. Yalnız düğme, filtre veya modal istemci olur.
2. Şelale istekler. Ürün bitince kategori, sonra yorum çağrılır. İlk bayt saniyelere çıkar. Bağımsız istekler birlikte çalışır. İkincil veri Suspense ile akıtılır.
3. Fiyat ve stoku statik dondurmak. Derlemede üretilen sayfada yenileme yoktur. Tükenmiş ürün satılır veya bitmiş indirim eski fiyattan işlenir. Gövde statik kalır. Fiyat ve stok etiketle düşürülür veya canlı akar.
4. Varyantı ayrı sayfa yapıp canonical vermemek. Beş renk ve dört beden, yirmi taranabilir adres üretir. Tarama bütçesi tükenir. Varyant parametreye bağlanıp tek adrese canonical verilir. Ya da her sayfa özgün metin ve ProductGroup ile ayrılır.
5. Kontrolsüz görsel. Düz img veya sizes olmadan next/image, mobilde gereksiz büyük dosya indirir. Cihaz genişliğine uygun sizes yazılır.
6. Ağır kütüphane. Tarih için koca bir paket veya ikon için megabaytlık UI kiti eklenir. Modüler kütüphane seçilir. Paket boyutu sürüm öncesi analiz edilir.
7. Örümcek tuzağı. Her filtre yeni sorgu üretir ve indeks açıktır. Bot anlamsız sayfayı tarar, ana ürünü atlar. Kombine filtre noindex, follow alır. Anlamsız sıralama parametresi taramaya kapatılır.
8. ERP'ye tarayıcıdan gitmek. Vitrin, ERP REST ucuna canlı sorar. Şifre sızar, ERP çöker. Araya BFF ve Redis girer.
9. Yük testi olmadan canlıya çıkmak. Beş kullanıcıyla test yeter sanılır. Flaş indirimde bağlantı havuzu biter, 504 döner. Kampanya trafiği binlerce eşzamanlı kullanıcıyla denenir.
10. Yalnız masaüstü Lighthouse. Güçlü bilgisayarda 100 almak yetmez. Düşük segment telefonda INP kırmızıya düşer. Search Console üzerinden gerçek kullanıcı verisi izlenir.

12. Sıfırdan yol haritası

1. Analiz: katalog, SKU, varyant ağacı
2. Altyapı: Next.js, API gateway, Redis, veritabanı
3. ERP ve PIM: kuyruk, webhook, tekillik anahtarı
4. Vitrin: RSC, streaming, görsel
5. Teknik SEO: metadata, sitemap, JSON-LD
6. Sepet ve ödeme: sunucuda hesap, sanal POS, 3D Secure
7. Güvenlik ve yük: stres testi, oran sınırı
8. Dağıtım: edge, log, APM
9. İzleme: Core Web Vitals gerçek kullanıcı

1. SKU adedi, varyant derinliği, trafik beklentisi ve pazaryeri ihtiyacı listelenir. Veri modeli netleşir.
2. Commerce motoru, arama ve headless CMS seçilir. REST, GraphQL veya gRPC karara bağlanır.
3. Stok ve fiyat değişimini dinleyen kuyruk ve revalidateTag webhook'u yazılır.
4. Arayüz sistemi kodlanır. İstemci ve sunucu ayrımı katı tutulur. Görsel ve font biter.
5. Metadata, breadcrumb, Product şeması, canonical ve sitemap parçalama açılır.
6. Sunucuda sepet hesabı, webhook dinleyici ve sanal POS tamamlanır.
7. Kampanya trafiği simüle edilir. Oran sınırı ve girdi doğrulama gözden geçirilir.
8. DNS, CDN kuralları ve sertifika ile sistem kademeli açılır.
9. Search Console ve hata izleme, Core Web Vitals gerçek kullanıcı metriğini takip eder.