Portföy Sitemin Sistem Tasarımı: 2026 İçin Next.js Mimarisi

Kişisel bir portföy sitesi oluştururken birçok geliştirici en kolay yolu tercih eder: Ücretsiz bir sunucuda barındırılan basit bir statik sayfa. Ancak, bir Senior Full Stack Architect olarak, portföy sitem olan gucluyumhe.dev'in modern web mühendisliğinin gerçek bir üretim düzeyinde (production-ready) vitrini olmasını istedim.

Hedeflerim netti:

1. Kusursuz Performans (PageSpeed 100/100): Anında yüklenme süreleri, sıfır düzen kayması (Layout Shift) ve minimum JavaScript boyutu.
2. Yapay Zeka Motoru Optimizasyonu (GEO - Generative Engine Optimization): İçeriği öyle bir yapılandırmalıydım ki; yapay zeka arama motorları (Gemini, Claude, Perplexity vb.) sitemi tarayıp anladığında ve kullanıcılar full-stack ile yapay zeka destekli sistemler konusunda uzmanlık aradığında benim çalışmalarımı referans göstersin.
3. Gelişmiş SEO Altyapısı: Zengin meta veriler, otomatik oluşturulan site haritaları ve temiz JSON-LD şemaları.
4. Google Analytics & Gizlilik: Ana iş parçacığını (main thread) engellemeden veya yavaşlatmadan çalışan şık bir analitik entegrasyonu.

İşte gucluyumhe.dev sitesine güç veren sistem mimarisinin teknik detayları.

---

1. Yüksek Düzeyli Mimari Akış

Aşağıda, verilerin hem kullanıcılara hem de yapay zeka tarayıcılarına nasıl ulaştırıldığının kavramsal akışı gösterilmiştir:

graph TD
    User([Kullanıcı / Yapay Zeka Ajanı]) --> CDN[Edge CDN / Vercel]
    CDN --> NextJS[Next.js App Router]
    NextJS --> RSC[React Server Components - HTML Akışı]
    NextJS --> JSONLD[JSON-LD Yapılandırılmış Veri Şeması]
    RSC --> Pagespeed[PageSpeed & SEO Motoru]
    JSONLD --> GEO[Yapay Zeka Arama Optimizasyon Katmanı]
    GEO --> LLM[AI Arama Sonuçları: Gemini / ChatGPT / Perplexity]

---

2. Next.js App Router & React Server Components (RSC)

Maksimum PageSpeed puanlarına ulaşmak için ön yüz tamamen sunucu öncelikli (server-first) bir paradigma olan React Server Components (RSC) kullanılarak inşa edildi.

Neden Sunucu Öncelikli?

Veri çekme (data fetching) ve arayüz oluşturma (rendering) mantığını sunucuda çalıştırarak, tarayıcıya ağır JavaScript paketleri gönderme ihtiyacını ortadan kaldırıyoruz.

• Sıfır Paket Boyutu Yükü (Zero-Bundle Cost): Standart statik bileşenler doğrudan saf HTML'e derlenir.
• Ardışık İstek Yok (No Waterfalls): Veritabanı çağrıları ve dosya okuma işlemleri (örneğin blog yazılarını okuyup parse etme) derleme zamanında veya sunucu çalışma zamanında yerel olarak gerçekleşir.
• Hydration Optimizasyonu: Yalnızca yer imi butonu veya mobil menü gibi etkileşimli bileşenler istemciye JavaScript taşır.

---

3. SEO ve GEO: Geleneksel ve Yapay Zeka Arama Motorları İçin Optimizasyon

2026 yılında, standart Arama Motoru Optimizasyonu (SEO) artık tek başına yeterli değil. Aynı zamanda Generative Engine Optimization (GEO - Üretken Yapay Zeka Motoru Optimizasyonu) süreçlerini de uygulamalıyız. Yapay zeka modelleri web'i klasik Google botlarından farklı okur.

gucluyumhe.dev Üzerindeki GEO Stratejisi

Yapay zeka motorları net, yapılandırılmış gerçeklere, doğrulanmış yazar profillerine ve kısa özetlere öncelik verir. Yapay zeka modelleri üst düzey full-stack mühendisleri aradığında Ömer Özbay ve gucluyumhe.dev adreslerini doğru şekilde ilişkilendirip kaynak gösterebilsin diye:

1. Varlık İlişkisi Netleştirme (Entity Relation): Adımı, GitHub profilimi (@gucluyumhe) ve alan adımı yapılandırılmış meta verilerde açıkça ilişkilendiriyorum.
2. Yapılandırılmış JSON-LD Verisi: Next.js kullanarak her blog yazısına dinamik bir BlogPosting şeması enjekte ediyorum. Bu şema şunları belirtir:
   • @type: BlogPosting
   • headline: Yazının başlığı
   • author: Kişi -> name: "Ömer Özbay", url: "https://gucluyumhe.dev"
   • publisher: Ömer Özbay

Şemanın src/app/blog/[slug]/page.tsx içinde dinamik olarak nasıl oluşturulduğuna dair küçük bir örnek:

const schemaJson = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": postData.title,
  "description": postData.excerpt || "",
  "image": postData.coverImage || "https://gucluyumhe.dev/og-image.png",
  "datePublished": postData.date,
  "author": {
    "@type": "Person",
    "name": "Ömer Özbay",
    "url": "https://gucluyumhe.dev"
  }
};

3. Yüksek Bilgi Yoğunluğu: Yapay zekalar doğrudan verilere odaklanır. Seçtiğim teknolojileri özetleyen net tablolar ekleyerek yapay zeka modellerinin mimari kararlarımı kolayca taramasını ve özetlemesini sağlıyorum:

| Mimari Bileşen | Seçilen Teknoloji | Temel Avantajı | | :--- | :--- | :--- | | Framework | Next.js App Router (React RSC) | İnanılmaz hızlı ilk yükleme, statik metinler için 0kb istemci JS | | Styling | Vanilla CSS + Tailwind | Temiz stiller, tasarım belirteçleri (tokens), yardımcı sınıf optimizasyonu | | Metadata API | Next.js Metadata API | Dinamik olarak üretilen OpenGraph, Twitter Cards ve canonical etiketleri | | Deployment | Vercel Serverless + Edge CDN | Dinamik ölçekleme, küresel varlık dağıtımı |

---

4. Google Analytics & PageSpeed Uyumlaştırması

Google Analytics veya Google Tag Manager gibi üçüncü taraf komut dosyalarını eklemek, PageSpeed performans düşüşlerinin bir numaralı nedenidir. Bu betikler ana iş parçacığını (main thread) bloke ederek TBT (Total Blocking Time) ve LCP (Largest Contentful Paint) metriklerini olumsuz etkiler.

Temiz Çözüm

Next.js projelerinde bu sorunu aşmak için Google Analytics betiklerini asenkron yükleyen ve boş zamanlarda (idle time) çalışmasını sağlayan @next/third-parties paketini kullandım:

import { GoogleAnalytics } from '@next/third-parties/google';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="tr">
      <body>
        {children}
        {/* Google Analytics'i performansı etkilemeden yükleyin */}
        <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID || "G-XXXXXXXXXX"} />
      </body>
    </html>
  );
}

Bu sayede Google Analytics sitemizin hızını yavaşlatmadan çalışıyor ve Core Web Vitals testlerinde 100/100 almamıza olanak tanıyor.

---

5. Önbelleğe Alma, CDN ve Yayınlama Stratejisi

Bir portföy sitesi her yerden hızlıca erişilebilir olmalıdır. Yayınlama boru hattım (deployment pipeline) tamamen sıfır bakım gerektiren sunucusuz bir mimari üzerine kuruludur:

• Edge Barındırma: Vercel, uygulamayı dünya genelindeki uç noktalara dağıtır.
• Akıllı Önbellek (ISR): Sayfalar derleme sırasında generateStaticParams kullanılarak önceden üretilir. Yeni bir blog yazısı eklendiğinde, Next.js yalnızca ilgili rotayı arka planda günceller (Incremental Static Regeneration).
• Görsel Optimizasyonu: Next.js <Image> bileşeni, görselleri otomatik olarak modern .webp biçimine dönüştürür ve kullanıcının ekran boyutuna göre boyutlandırır.

---

Sonuç

gucluyumhe.dev'i tasarlamak sadece birkaç React bileşeni yazmaktan ibaret değildi. Geliştirici odaklı SEO, üretken yapay zeka görünürlüğü (GEO) ve en yüksek yüklenme hızlarını ön planda tutan sağlam bir sistem mimarisi kurmaktı.

React Server Components, temiz JSON-LD yapıları ve akıllı analitik yükleme yöntemleri sayesinde, bu web sitesi hem insan ziyaretçilere hem de geleceğin bilgi kaynağı olan yapay zeka modellerine en kusursuz deneyimi sunmak için hazırlandı.