Headless E-Ticaret: Next.js ve WooCommerce GraphQL API

Headless E-Ticaret: Next.js ve WooCommerce GraphQL API

Headless e-ticaret, frontend ve backend'i ayırarak maksimum esneklik ve performans sağlar. Next.js ile WooCommerce GraphQL API entegrasyonu en popüler headless yaklaşımlardan biridir.

Headless E-Ticaret Neden?

Geleneksel (Monolithic):
WordPress + WooCommerce → Tema → PHP şablon → Tarayıcı

Headless:
WooCommerce (API/GraphQL) → Next.js/React → CDN → Tarayıcı

Headless avantajları:
✓ Çok daha hızlı yükleme (SSG + CDN)
✓ Daha iyi SEO (SSR ile)
✓ Teknoloji esnekliği
✓ Aynı backend → Web + Mobil + Kiosk
✓ Core Web Vitals mükemmel

Dezavantajları:
✗ Kurulum karmaşıklığı
✗ WooCommerce eklentileri çalışmayabilir
✗ Yüksek başlangıç maliyeti

WPGraphQL Kurulumu (Backend)

# WordPress'e WPGraphQL eklentisi kur
# wordpress.org/plugins/wp-graphql
# Ek: wp-graphql-woocommerce (WooCommerce)

# GraphQL endpoint: https://api.magazaniz.com/graphql
# GraphiQL IDE: https://api.magazaniz.com/graphql (geliştirme)

# Örnek GraphQL sorguları

# Ürün listesi
query GetProducts {
  products(first: 20) {
    nodes {
      id
      name
      slug
      ... on SimpleProduct {
        price
        regularPrice
        salePrice
        stockStatus
        image {
          sourceUrl
          altText
        }
      }
      productCategories {
        nodes {
          name
          slug
        }
      }
    }
  }
}

# Tek ürün
query GetProduct($slug: ID!) {
  product(id: $slug, idType: SLUG) {
    name
    description
    ... on SimpleProduct {
      price
      stockQuantity
      galleryImages {
        nodes { sourceUrl altText }
      }
    }
  }
}

# Sepet
mutation AddToCart($productId: Int!, $quantity: Int!) {
  addToCart(input: { productId: $productId, quantity: $quantity }) {
    cart {
      contents {
        nodes {
          product { node { name } }
          quantity
          total
        }
      }
      total
    }
  }
}

Next.js Frontend

// lib/graphql.js
const GRAPHQL_URL = process.env.NEXT_PUBLIC_GRAPHQL_URL;

export async function fetchAPI(query, variables = {}) {
  const res = await fetch(GRAPHQL_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // WooCommerce oturum
      ...(process.env.WC_SESSION && {
        'woocommerce-session': `Session ${process.env.WC_SESSION}`
      }),
    },
    body: JSON.stringify({ query, variables }),
  });

  const json = await res.json();
  if (json.errors) throw new Error(json.errors[0].message);
  return json.data;
}

// pages/products/[slug].js - Statik ürün sayfası
import { fetchAPI } from '../../lib/graphql';

export async function getStaticProps({ params }) {
  const data = await fetchAPI(`
    query GetProduct($slug: ID!) {
      product(id: "${params.slug}", idType: SLUG) {
        name
        description
        ... on SimpleProduct {
          price
          stockQuantity
        }
      }
    }
  `);

  return {
    props: { product: data.product },
    revalidate: 60, // ISR: 60 saniyede bir yenile
  };
}

export async function getStaticPaths() {
  const data = await fetchAPI(`
    query {
      products(first: 100) {
        nodes { slug }
      }
    }
  `);

  return {
    paths: data.products.nodes.map(p => ({ params: { slug: p.slug } })),
    fallback: 'blocking', // Yeni ürünler için SSR
  };
}

// Ürün bileşeni
export default function ProductPage({ product }) {
  return (
    <div>
      <h1>{product.name}</h1>
      <p dangerouslySetInnerHTML={{ __html: product.description }} />
      <div className="price">{product.price}</div>
      <AddToCartButton productId={product.id} />
    </div>
  );
}

Sepet Yönetimi (Client-Side)

// hooks/useCart.js
import { useState, useEffect } from 'react';
import { fetchAPI } from '../lib/graphql';

export function useCart() {
  const [cart, setCart] = useState(null);
  const [session, setSession] = useState(
    () => localStorage.getItem('woo-session')
  );

  const addToCart = async (productId, quantity = 1) => {
    const data = await fetchAPI(`
      mutation AddToCart($productId: Int!, $quantity: Int!) {
        addToCart(input: { productId: $productId, quantity: $quantity }) {
          cart {
            contents {
              nodes {
                product { node { name databaseId } }
                quantity
                total
              }
            }
            total
            subtotal
          }
        }
      }
    `, { productId, quantity });

    setCart(data.addToCart.cart);
  };

  const removeFromCart = async (cartItemKey) => {
    const data = await fetchAPI(`
      mutation RemoveFromCart($keys: [ID]!) {
        removeItemsFromCart(input: { keys: $keys }) {
          cart { total }
        }
      }
    `, { keys: [cartItemKey] });

    setCart(data.removeItemsFromCart.cart);
  };

  return { cart, addToCart, removeFromCart };
}

Ödeme Akışı

// Checkout → WooCommerce REST API (GraphQL ile checkout zor)
// İki yaklaşım:

// 1. WooCommerce REST API Checkout
const checkoutOrder = async (customerData) => {
  const response = await fetch('/api/checkout', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(customerData),
  });
  return response.json();
};

// pages/api/checkout.js (Next.js API Route)
export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).end();

  const orderRes = await fetch(`${process.env.WC_URL}/wp-json/wc/v3/orders`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Basic ' + Buffer.from(
        `${process.env.WC_KEY}:${process.env.WC_SECRET}`
      ).toString('base64'),
    },
    body: JSON.stringify(req.body),
  });

  const order = await orderRes.json();
  res.json({ orderId: order.id });
}

Sonuç

Headless e-ticaret, Next.js ve WooCommerce GraphQL API ile maksimum performans ve SEO puanı sağlar. SSG ve ISR stratejileriyle ürün sayfaları CDN'den servis edilerek sub-second yükleme sürelerine ulaşılır. Büyükweb'in yüksek performanslı VDS altyapısı, headless e-ticaret backend'inizi güçlü bir şekilde destekler.

---

Ilgili Büyükweb Hizmetleri:

• [Güvenli hosting ile online magaza kurun](
  MASK11)
• [E-ticaret VDS paketlerimizi inceleyin](
  MASK12)
• [Tüm hosting ve sunucu paketlerimiz](
  MASK13)

---

E-Ticaret Altyapı Rehberi

Platform Seçimi

WooCommerce: Esnek, geniş eklenti. Küçük-orta işletmeler.
PrestaShop: Güçlü stok, çoklu dil.
OpenCart: Hafif, kolay kurulum.
Shopify: Hosted, teknik bilgi gerektirmez.

Odeme

iyzico, PayTR, Param sanal pos. 3D Secure zorunlu. Kapida odeme önemli. Taksit seceenekleri dönüşumu arttirir.

Marketplace Entegrasyonu

Amazon, Trendyol, Hepsiburada, N11 icin entegrator yazılimi. Stok senkronizasyonu kritik. Çoklu kanal strateji.

Performans

4 GB RAM, 2 vCPU, NVMe SSD minimum. CDN ile görsel hizi. Yüksek trafik dönemlerinde kaynak artırin.

Güvenlik

PCI DSS uyumu. Odeme bilgisi saklamayin. SSL, WAF, KVKK uyumlulugu zorunlu.

SEO

Product schema ekleyin. Görsel optimize edin. Meta bilgilerini özellestirin. Google Shopping entegrasyonu.

Sik Sorulan Sorular

Hosting mi VDS mi?

500 altında ziyaretci hosting yeterli. 1000+ veya marketplace entegrasyonu icin VDS oneriyoruz.

Marketplace entegrasyonu icin ne gerekir?

Sabit IP VDS, entegrator yazılimi, API erisimleri. Büyükweb E-Ticaret VDS bu icin tasarlanmistir.

Sonuc

Başarıli e-ticaret güçlü altyapı, dogru platform ve etkili pazarlama birlesimdir. VDS ile işletmenizi ölçeklendirin.

E-Ticaret Başlangıç Kontrol Listesi

Yasal

• Şirket/sahis kurulumu
• Vergi levhasi
• Mesafeli satis sozlesmesi
• KVKK aydinlatma metni
• Cerez politikasi
• Iade koşullari

Teknik

• Hosting/VDS seçimi
• SSL sertifikasi
• E-ticaret platformu
• Sanal pos (3D Secure)
• Kargo entegrasyonu
• E-fatura entegrasyonu
• Google Analytics + Search Console

Pazarlama

• Google Business Profile
• Sosyal medya hesaplari
• Google Shopping
• Facebook/Instagram Shop
• E-posta pazarlama

E-Ticaret VDS vs Ev Interneti

Özellik	Ev Interneti	E-Ticaret VDS
IP	Dinamik	Sabit
Temizlik	Bilinmiyor	Temiz
Kesinti	Elektrik/internet	%99.8 uptime
Hiz	Değişken	1 Gbps
Güvenlik	Düşük	DDoS korumali

Marketplace işlemleri icin sabit ve temiz IP kritik. Ban riski en aza iner.

Profesyonel Hosting icin Önemli Kriterler

Veri Merkezi Kalıtesi

Veri merkezinin tier seviyesi, sunucu barindirma kalıtesini dogrudan etkiler. Tier 3 veri merkezleri yedekli guc, soğutma ve ag altyapısi ile %99.982 uptime garantisi sunar. Büyükweb'in Bursa Pendc Tier 3 veri merkezi bu standartlari karşılamaktadir.

Teknik Destek Kalıtesi

7/24 ulasılabilir, Turkce ve teknik bilgi sahibi destek ekibi hosting hizmetinin vazgecilmez parcasidir. E-posta, canli destek ve telefon kanallarindan hızlı yanit almak özellikle is sürekliligi acisından kritiktir.

Ölçeklenebilirlik

Işletmeniz buyudukce hosting ihtiyaçlariniz da değişir. Paylasimli hostingten VDS'e, VDS'den dedicated sunucuya sorunsuz gecis yapabilmek uzun vadeli planlamaniz icin önemlidir. Büyükweb tüm bu gecis süreçlerini ücretsiz olarak yönetir.

Yedekleme ve Felaket Kurtarma

Günlük otomatik yedekleme, tek tikla geri yukleme ve uzak yedekleme seçenekleri veri güvenliginiz icin sart. JetBackup ile profesyonel yedekleme çözümu tüm Büyükweb hosting paketlerinde standarttir.

Güvenlik Katmanlari

SSL sertifikasi, WAF korumasi, malware tarama, DDoS korumasi ve güvenlik duvari - tüm bu katmanlar birlikte çalışiarak web sitenizi korur. Büyükweb bu güvenliklerin hepsini standart olarak sunar.

Headless E-Ticaret SEO Stratejisi

Headless mimaride frontend (Next.js/Nuxt/Astro) ayrı, backend ayrıdır. Bu yapı SEO için bazı özel dikkat noktaları getirir:

Server-Side Rendering (SSR) zorunlu

Next.js'te SSG (Static Site Generation) veya SSR (Server-Side Rendering) kullanmadan sadece CSR (Client-Side Rendering) yaparsanız Google Bot bazı içerikleri göremeyebilir. Tercih:

• Ürün sayfaları: SSG + ISR (Incremental Static Regeneration) ile build-time render + revalidate
• Kategori listeleri: SSR (filtreler değişebildiği için)
• Ana sayfa: SSG, 1-6 saat revalidate

Meta Tag Yönetimi

Headless'da meta tag'ler genellikle CMS'ten (WooCommerce, Strapi, Sanity vb.) gelir. Tüm ürünler için:

// Next.js App Router metadata
export async function generateMetadata({ params }) {
  const product = await fetchProduct(params.slug);
  return {
    title: product.seoTitle || `${product.name} | Marka`,
    description: product.seoDescription,
    openGraph: { images: [product.imageUrl] },
    alternates: { canonical: `https://siteniz.com/urun/${params.slug}` },
  };
}

JSON-LD Schema Otomatik Üretimi

Her ürün için Product + Offer + AggregateRating schema otomatik üretilmeli:

const schema = {
  "@context": "https://schema.org",
  "@type": "Product",
  "name": product.name,
  "image": product.images,
  "offers": { "@type": "Offer", "price": product.price, "priceCurrency": "TRY", "availability": "https://schema.org/InStock" },
};

Performans: Core Web Vitals

Headless mimari avantajı: ön tarafın özelleştirilebilir olması. Hedef:

Metrik	Hedef
LCP (Largest Contentful Paint)	< 2.5 sn
FID/INP	< 200 ms
CLS (Cumulative Layout Shift)	< 0.1
TTFB	< 200 ms

TTFB için backend hızı kritik — Büyükweb VDS sunucu NVMe SSD altyapısı API yanıt sürelerini 50-100 ms aralığına çeker.

Image Optimizasyon

Next.js <Image> componenti kullanın; otomatik WebP/AVIF dönüştürme ve responsive size yapar:

<Image src={product.image} alt={product.name} width={600} height={600} priority={isAboveFold} />

CDN cache header'ları için Büyükweb hosting paneli üzerinden .htaccess veya Nginx config ile 1 yıl cache süresi ayarlayın.

Sıkça Sorulan Sorular

Headless e-ticaret hosting'i klasiğinden farklı mı?

Frontend ayrı host edilir (Vercel/Netlify gibi platformlar veya kendi VDS), backend için ayrı sunucu (WooCommerce/Strapi). Büyükweb E-Ticaret VDS backend için optimize edilmiştir.

Türkiye'de headless yapanlar nelere dikkat etmeli?

KVKK uyumu için müşteri verisi yurt içinde olmalı. Büyükweb VDS Türkiye lokasyonu bu kriteri karşılar. Frontend hızı için Türkiye edge node sunan CDN tercih edin.

Headless WordPress (WooCommerce) altyapısı ne ister?

WooCommerce REST API hızlı yanıt için: Redis cache + LiteSpeed + 4+ GB RAM. Büyükweb WordPress Hosting bu konfigürasyonla optimize gelir.

İlgili Büyükweb Hizmetleri

E-ticaret sitenizin yükü için ölçeklenebilir Türkiye lokasyonlu paketler:

• E-Ticaret VDS
• WooCommerce için WordPress Hosting
• VDS Sunucu
• cPanel Web Hosting
• Yüksek Hacim için Dedicated

Sorularınız için 0850 302 60 70 numaralı destek hattımıza veya iletişim sayfamıza yazabilirsiniz.