SEO-da İnqilab: Next.js App Router, Supabase və Ultra Sürətli Yüklənmə Arxitekturası

Rəqəmsal landşaftın sürətlə dəyişdiyi müasir dövrdə, axtarış motorlarında üst sıralarda yer almaq artıq sadəcə açar sözlərin düzgün paylanması və keyfiyyətli backlink profili ilə məhdudlaşmır. Google-un istifadəçi təcrübəsini (UX) əsas sıralama faktoru kimi qəbul etməsi və Core Web Vitals metriklərini alqoritmə daxil etməsi, veb saytların texniki arxitekturasını SEO-nun mərkəzinə gətirdi. Bu gün uğurlu bir rəqəmsal mövcudluq qurmaq istəyən startuplar və böyük müəssisələr üçün sürət, təhlükəsizlik və dinamik məzmunun indeksləşməsi həyati əhəmiyyət kəsb edir.

Bu məqalədə müasir veb texnologiyalarının ən güclü kombinasiyalarından biri olan Next.js App Router və Supabase arxitekturasının SEO performansına təsirini, sürətli yüklənmə strategiyalarını və axtarış motorlarının optimallaşdırılması üçün ən qabaqcıl metodologiyaları dərindən analiz edəcəyik.

---

1. Müasir SEO-nun Yeni Qaydaları: Core Web Vitals və Sürət Faktoru#

Google axtarış alqoritmləri illər ərzində məzmunun keyfiyyətindən texniki performansa doğru böyük bir təkamül keçmişdir. 2021-ci ildə rəsmən tətbiq olunmağa başlayan və mütəmadi olaraq yenilənən Core Web Vitals (Əsas Veb Metrikləri), real istifadəçi təcrübəsini ölçən üç əsas sütuna əsaslanır:

Core Web Vitals Metriklərinin Dərin Analizi

1. Largest Contentful Paint (LCP): Saytın əsas vizual məzmununun (məsələn, böyük bir qəhrəman şəkli və ya başlıq mətni) ekranda görünmə sürətini ölçür. Yaxşı bir istifadəçi təcrübəsi üçün LCP 2.5 saniyə və ya daha az olmalıdır.
2. Interaction to Next Paint (INP): İstifadəçinin saytla ilk qarşılıqlı əlaqəsindən (klikləmə, toxunma) sonra saytın verdiyi reaksiyanın sürətini ölçür. Bu metrik köhnə FID (First Input Delay) göstəricisini əvəz edib və 200 millisaniyə altında olmalıdır.
3. Cumulative Layout Shift (CLS): Səhifənin yüklənməsi zamanı elementlərin gözlənilmədən yerini dəyişməsini (vizual sabitliyi) ölçür. CLS balı 0.1-dən kiçik olmalıdır.

Statistik Fakt: Google-un araşdırmalarına görə, mobil cihazlarda yüklənmə müddəti 1 saniyədən 3 saniyəyə qalxdıqda, istifadəçinin saytı tərk etmə ehtimalı (Bounce Rate) tam 32% artır. Yüklənmə müddəti 5 saniyəyə çatdıqda isə bu göstərici 90%-ə yüksəlir.

Sürətli yüklənmə birbaşa olaraq axtarış motoru botlarının (məsələn, Googlebot) saytınızı tarama büdcəsinə (Crawl Budget) təsir edir. Sürətli cavab verən serverlər botların daha çox səhifəni daha qısa müddətdə indeksləşdirməsinə şərait yaradır.

---

2. Next.js App Router: SEO-nun Yeni Memarlıq Standartı#

React ekosisteminin ən populyar freymvorku olan Next.js, App Router arxitekturası ilə veb inkişaf etdiricilərə və SEO mütəxəssislərinə görünməmiş imkanlar təqdim etdi. Köhnə Pages Router-dən fərqli olaraq, App Router tamamilə React Server Components (RSC) konsepti üzərində qurulub.

React Server Components (RSC) və Sıfır-Sıfır JavaScript

Ənənəvi Single Page Application (SPA) arxitekturalarında (məsələn, standart React tətbiqləri) bütün JavaScript kodu brauzerə göndərilir və səhifə müştəri tərəfində (Client-side) render olunur. Bu, həm böyük JS fayllarının yüklənməsinə, həm də axtarış motorlarının məzmunu oxuya bilməməsi riskinə yol açır.

Next.js App Router-də isə komponentlər standart olaraq serverdə render olunur. Brauzerə yalnız hazır HTML və minimal JavaScript göndərilir. Bu metodologiya:

• TTFB (Time to First Byte) göstəricisini minimuma endirir.
• Müştəri tərəfində icra olunan JS miqdarını azaltdığı üçün INP və TBT (Total Blocking Time) ballarını mükəmməlləşdirir.
• Axtarış motoru botlarının heç bir JS icra etmədən birbaşa təmiz HTML məzmununu indeksləşdirməsini təmin edir.

Dinamik Metadata API və Strukturlaşdırılmış Data (JSON-LD)

Next.js App Router, SEO üçün kritik olan meta teqlərin idarə edilməsini olduqca asanlaşdırır. layout.tsx və ya page.tsx fayllarında statik və ya dinamik metadata obyektləri yaradaraq, hər bir səhifə üçün unikal başlıqlar, təsvirlər və Open Graph (OG) teqləri təyin etmək mümkündür.

Bundan əlavə, axtarış motorlarının saytın məzmununu daha yaxşı başa düşməsi üçün istifadə olunan JSON-LD strukturlaşdırılmış data (Schema Markup) birbaşa Server Komponentləri daxilində HTML-ə injeksiya edilə bilər. Bu, Google axtarış nəticələrində zəngin nəticələrin (Rich Snippets) görünmə şansını əhəmiyyətli dərəcədə artırır.

---

3. Supabase: SEO Performansı üçün Arxa Fonun Gücləndirilməsi#

SEO arxitekturasında verilənlər bazasının (database) sürəti və cavab vermə müddəti çox vaxt diqqətdən kənarda qalır. Lakin, dinamik məzmunlu saytlarda (məsələn, e-ticarət platformaları, xəbər portalları və ya böyük startup kataloqları) hər bir səhifə yüklənməsi arxa fonda bir verilənlər bazası sorğusuna (query) səbəb olur. Əgər verilənlər bazası ləngdirsə, server tərəfində render olunan səhifənin (SSR) istifadəçiyə çatması gecikəcək və bu da LCP göstəricisini pisləşdirəcək.

Supabase, açıq mənbəli (open-source) bir Firebase alternatividir və gücünü dünyanın ən qabaqcıl relyasiyalı verilənlər bazası olan PostgreSQL-dən alır.

Serverless PostgreSQL ilə Minimum Latency

Supabase, qlobal miqyasda paylanmış serverless infrastrukturu sayəsində verilənlər bazası sorğularını milisaniyələr daxilində icra edir. Next.js Server Komponentləri birbaşa Supabase-in daxili müştəri kitabxanası (Supabase Client) vasitəsilə verilənlər bazasına qoşulur. Heç bir əlavə API qatı (middleware) olmadan birbaşa server-to-database əlaqəsi qurulduğu üçün şəbəkə gecikməsi (network latency) minimuma enir.

Row Level Security (RLS) və Sürətli Data Oxunması

Supabase-in təqdim etdiyi RLS (Sətir Səviyyəsində Təhlükəsizlik) sayəsində həm təhlükəsizlik təmin olunur, həm də indeksləşdirilmiş PostgreSQL cədvəlləri vasitəsilə milyonlarla sətirlik məlumat arasından axtarış motorları üçün lazım olan ictimai (public) datalar saniyənin mində biri sürətində çəkilir.

---

4. Texnologiyaların Müqayisəsi: Ənənəvi Stack vs Modern Next.js + Supabase#

Arxitekturamızın üstünlüklərini daha aydın görmək üçün ənənəvi metodlarla müasir Next.js + Supabase arxitekturasını müqayisə edək:

---

5. Addım-Addım Tətbiq Planı və Kod Arxitekturası#

İndi isə Next.js App Router və Supabase istifadə edərək dinamik, SEO-ya uyğun və sürətli bir bloq/məhsul səhifəsinin necə qurulacağını praktik kod nümunəsi ilə nəzərdən keçirək.

Bu nümunədə biz Incremental Static Regeneration (ISR) metodundan istifadə edəcəyik. ISR sayəsində səhifələr statik olaraq yaradılır (bu, ultra sürətli yüklənmə deməkdir), lakin müəyyən olunmuş vaxt intervalında (məsələn, hər 60 saniyədən bir) arxa fonda verilənlər bazasından yeni məlumatlar çəkilərək yenilənir.

Dinamik Səhifə Arxitekturası: app/blog/[slug]/page.tsx

import { createClient } from '@supabase/supabase-js';
import { Metadata } from 'next';
import { notFound } from 'next/navigation';

// Supabase müştərisinin yaradılması
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || '';
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || '';
const supabase = createClient(supabaseUrl, supabaseAnonKey);

interface Props {
  params: { slug: string };
}

// 1. SEO üçün Dinamik Metadata Yaradılması
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = params;
  
  // Supabase-dən məqalə məlumatlarını çəkirik
  const { data: post } = await supabase
    .from('posts')
    .select('title, description, image_url')
    .eq('slug', slug)
    .single();

  if (!post) {
    return {
      title: 'Məqalə Tapılmadı | MyStartup',
    };
  }

  return {
    title: `${post.title} | MyStartup`,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [{ url: post.image_url }],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.description,
      images: [post.image_url],
    },
  };
}

// 2. ISR (Incremental Static Regeneration) üçün Revalidation müddəti (Saniyə ilə)
export const revalidate = 3600; // Hər 1 saatdan bir səhifə arxa fonda yenilənir

// 3. Səhifə Komponenti (Server Component)
export default async function BlogPostPage({ params }: Props) {
  const { slug } = params;

  const { data: post, error } = await supabase
    .from('posts')
    .select('title, content, created_at, author')
    .eq('slug', slug)
    .single();

  if (error || !post) {
    notFound();
  }

  // Strukturlaşdırılmış Data (JSON-LD Schema Markup)
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    'headline': post.title,
    'datePublished': post.created_at,
    'author': {
      '@type': 'Person',
      'name': post.author,
    },
  };

  return (
    <article className="max-w-4xl mx-auto px-4 py-8">
      {/* JSON-LD-nin HTML-ə daxil edilməsi */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      
      <header className="mb-8">
        <h1 className="text-4xl font-bold mb-4 text-gray-900">{post.title}</h1>
        <p className="text-sm text-gray-500">
          Yayımlandı: {new Date(post.created_at).toLocaleDateString('az-AZ')}
        </p>
      </header>

      <div 
        className="prose lg:prose-xl text-gray-800 leading-relaxed"
        dangerouslySetInnerHTML={{ __html: post.content }}
      />
    </article>
  );
}

Kodun SEO və Performans Analizi

• Sıfır Şəbəkə Gecikməsi (Zero Client-side Fetching): Məlumatlar tamamilə server tərəfində çəkilir. İstifadəçi səhifəni açdıqda heç bir "Yüklənir..." (Loading spinner) yazısı görmür, birbaşa hazır məzmunla qarşılaşır.
• Dinamik Metadata: generateMetadata funksiyası sayəsində hər bir bloq yazısı üçün unikal başlıq və Open Graph şəkilləri avtomatik formalaşır. Bu, sosial şəbəkələrdə paylaşım zamanı kliklənmə nisbətini (CTR) artırır.
• JSON-LD İnteqrasiyası: Səhifə daxilində yerləşdirilən strukturlaşdırılmış data Googlebot-a məzmunun müəllifini, yayımlanma tarixini və strukturunu asanlıqla anlamağa kömək edir.

---

6. Startuplar üçün Real Keys (Case Study): 0-dan 100-ə Core Web Vitals#

Bu arxitekturanın real biznesə təsirini görmək üçün SaaS sahəsində fəaliyyət göstərən bir startupın (şərti adı: SaaSify) keçid hekayəsinə nəzər salaq.

Problem

SaaSify ilkin olaraq öz açılış səhifəsini (Landing Page) və bloq bölməsini standart bir Single Page Application (React + CRA) və köhnə bir verilənlər bazası üzərində qurmuşdu. Saytın mobil cihazlarda yüklənmə sürəti olduqca aşağı idi:

• LCP: 4.8 saniyə
• CLS: 0.25 (səhifə yüklənərkən şəkillər və şriftlər sürüşürdü)
• Google Lighthouse Performans Balı: 42/100
• Ümumi Orqanik Trafik: Aylıq 5,000 istifadəçi

Həll və Keçid Prosesi

Startup komandası bütün texnoloji infrastrukturu Next.js App Router və Supabase kombinasiyasına keçirmək qərarına gəldi. Keçid zamanı aşağıdakı optimallaşdırmalar tətbiq olundu:

1. Next.js Image Komponenti: Bütün şəkillər next/image ilə əvəz olundu. Bu, şəkillərin avtomatik olaraq WebP formatına çevrilməsini və ölçülərinin optimallaşdırılmasını təmin etdi. CLS balı dərhal 0-a düşdü.
2. Supabase Edge Caching: Supabase verilənlər bazasından gələn statik məlumatlar CDN səviyyəsində keşləndi.
3. Streaming və Suspense: Ağır komponentlər Suspense daxilinə alınaraq HTML-in hissə-hissə (streaming) brauzerə göndərilməsi təmin olundu. Bu, TTFB-ni əhəmiyyətli dərəcədə azaltdı.

Nəticələr (3 Ay Sonra)

• LCP: 1.1 saniyəyə düşdü (Mükəmməl yaşıl zona).
• Google Lighthouse Performans Balı: 98/100.
• Bounce Rate: 58%-dən 24%-ə qədər azaldı.
• Orqanik Trafik: Google-da mövqelərin yüksəlməsi nəticəsində orqanik trafik aylıq 5,000-dən 28,000-ə yüksəldi (5.6 dəfə artım).

"Sürət sadəcə texniki bir göstərici deyil. Sürət birbaşa konversiyadır. Next.js və Supabase arxitekturasına keçdikdən sonra qeydiyyatdan keçən istifadəçilərimizin sayında 40% artım müşahidə etdik." — SaaSify CTO-su

---

7. Nəticə və Gələcəyə Baxış#

SEO dünyasında rəqabət hər gün daha da sərtləşir. Google-un süni intellekt əsaslı axtarış sistemlərinə (SGE - Search Generative Experience) keçid etdiyi bu dövrdə, veb saytların texniki mükəmməlliyi və məlumat ötürmə sürəti həlledici rol oynayır.

Next.js App Router və Supabase birliyi, müasir veb inkişafında SEO və performansı eyni anda maksimuma çatdırmaq üçün ən ideal həllərdən biridir. React Server Components-in gətirdiyi sıfır JavaScript yükü, Next.js-in güclü keşləmə mexanizmləri və Supabase-in sürətli PostgreSQL infrastrukturu sizə rəqiblərinizdən bir addım öndə olmaq imkanı verir.

Startuplar və SEO Mütəxəssisləri üçün Konkret Tövsiyələr:

• Server-First Düşüncəsi: Komponentlərinizi yaradarkən həmişə standart olaraq Server Komponenti kimi saxlayın. Yalnız istifadəçi interaktivliyi (məsələn, klikləmə, form doldurma) tələb olunduqda 'use client' direktivindən istifadə edin.
• Şəkillərin Optimallaşdırılması: Heç vaxt standart <img> teqindən istifadə etməyin. Həmişə Next.js-in daxili <Image /> komponentinə üstünlük verin.
• Düzgün Keşləmə Strategiyası: Məlumatlarınızın yenilənmə tezliyinə uyğun olaraq ISR (Incremental Static Regeneration) və ya SSR (Server-Side Rendering) seçimlərini düzgün balanslaşdırın.
• Supabase İndeksləri: Verilənlər bazasında tez-tez sorğu edilən sütunları (məsələn, slug, category_id) mütləq indeksləşdirin (PostgreSQL Indexes). Bu, sorğu sürətini 10-100 dəfə artıra bilər.

Bu texnoloji arxitekturanı mənimsəməklə, siz sadəcə bu günün deyil, həm də gələcəyin rəqəmsal tələblərinə tam cavab verən, ultra sürətli və SEO-dostu platformalar inşa edə bilərsiniz.