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. Buyukweb'in yüksek performanslı VDS altyapısı, headless e-ticaret backend'inizi güçlü bir şekilde destekler.

---

Ilgili Buyukweb Hizmetleri:

• Guvenli hosting ile online magaza kurun
• E-ticaret VDS paketlerimizi inceleyin
• Tum hosting ve sunucu paketlerimiz

---

E-Ticaret Altyapi Rehberi

Platform Secimi

WooCommerce: Esnek, genis eklenti. Kucuk-orta isletmeler.
PrestaShop: Guclü stok, coklu dil.
OpenCart: Hafif, kolay kurulum.
Shopify: Hosted, teknik bilgi gerektirmez.

Odeme

iyzico, PayTR, Param sanal pos. 3D Secure zorunlu. Kapida odeme onemli. Taksit seceenekleri donusumu arttirir.

Marketplace Entegrasyonu

Amazon, Trendyol, Hepsiburada, N11 icin entegrator yazilimi. Stok senkronizasyonu kritik. Coklu kanal strateji.

Performans

4 GB RAM, 2 vCPU, NVMe SSD minimum. CDN ile gorsel hizi. Yuksek trafik donemlerinde kaynak artirin.

Guvenlik

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

SEO

Product schema ekleyin. Gorsel optimize edin. Meta bilgilerini ozellestirin. Google Shopping entegrasyonu.

Sik Sorulan Sorular

Hosting mi VDS mi?

500 altinda ziyaretci hosting yeterli. 1000+ veya marketplace entegrasyonu icin VDS oneriyoruz.

Marketplace entegrasyonu icin ne gerekir?

Sabit IP VDS, entegrator yazilimi, API erisimleri. Buyukweb E-Ticaret VDS bu icin tasarlanmistir.

Sonuc

Basarili e-ticaret guclü altyapi, dogru platform ve etkili pazarlama birlesimdir. VDS ile isletmenizi olceklendirin.

E-Ticaret Baslangic Kontrol Listesi

Yasal

• Sirket/sahis kurulumu
• Vergi levhasi
• Mesafeli satis sozlesmesi
• KVKK aydinlatma metni
• Cerez politikasi
• Iade kosullari

Teknik

• Hosting/VDS secimi
• 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

Ozellik	Ev Interneti	E-Ticaret VDS
IP	Dinamik	Sabit
Temizlik	Bilinmiyor	Temiz
Kesinti	Elektrik/internet	%99.8 uptime
Hiz	Degisken	1 Gbps
Guvenlik	Dusuk	DDoS korumali

Marketplace islemleri icin sabit ve temiz IP kritik. Ban riski en aza iner.

Profesyonel Hosting icin Onemli Kriterler

Veri Merkezi Kalitesi

Veri merkezinin tier seviyesi, sunucu barindirma kalitesini dogrudan etkiler. Tier 3 veri merkezleri yedekli guc, soğutma ve ag altyapisi ile %99.982 uptime garantisi sunar. Buyukweb'in Bursa Pendc Tier 3 veri merkezi bu standartlari karsilamaktadir.

Teknik Destek Kalitesi

7/24 ulasılabilir, Turkce ve teknik bilgi sahibi destek ekibi hosting hizmetinin vazgecilmez parcasidir. E-posta, canli destek ve telefon kanallarindan hizli yanit almak ozellikle is surekliligi acisından kritiktir.

Olceklenebilirlik

Isletmeniz buyudukce hosting ihtiyaclariniz da degisir. Paylasimli hostingten VDS'e, VDS'den dedicated sunucuya sorunsuz gecis yapabilmek uzun vadeli planlamaniz icin onemlidir. Buyukweb tum bu gecis sureclerini ucretsiz olarak yonetir.

Yedekleme ve Felaket Kurtarma

Gunluk otomatik yedekleme, tek tikla geri yukleme ve uzak yedekleme secenekleri veri guvenliginiz icin sart. JetBackup ile profesyonel yedekleme cozumu tum Buyukweb hosting paketlerinde standarttir.

Guvenlik Katmanlari

SSL sertifikasi, WAF korumasi, malware tarama, DDoS korumasi ve guvenlik duvari - tum bu katmanlar birlikte calisiarak web sitenizi korur. Buyukweb bu guvenliklerin hepsini standart olarak sunar.