Next.js React-a nə əlavə edir

React əvvəlcə istifadəçi interfeyslərinin qurulması üçün kitabxana olaraq yaradılmışdır. O, komponentlərin deklarativ render olunmasını və brauzerdə vəziyyətin (state) idarə edilməsini öz üzərinə götürdü, lakin marşrutlaşdırma (routing), server tərəfli render, layihənin yığılması (build), API ilə işləmə və resursların optimallaşdırılmasını əhatə etmədi. Təmiz React ilə tamveb tətbiq yaratmaq üçün tərtibatçılar əlavə olaraq React Router qoşmalı, Vite və ya Webpack sazlamalı, arxa tərəf (backend) arxitekturasını qurmalı və axtarış sistemlərinin optimallaşdırılması (SEO) çətinliklərini həll etməli idilər.

Next.js — Vercel şirkəti, open-source ictimaiyyəti və React komandası tərəfindən inkişaf etdirilən, sənaye standartı səviyyəsində React üçün fullstack freymvorkdur. O, müasir React-in ən güclü imkanlarını (Server Components, Server Actions, Suspense axını) hazır fayl əsaslı arxitektura, yüksək performans və server infrastrukturu ilə vahid bir sistemdə birləşdirir.

1. React və Next.js müqayisəsi: Kitabxana, yoxsa Freymvork?

Əsas fərq yanaşmadadır: kitabxana tək bir vəzifə üçün alətdir, freymvork isə tətbiqin bütün strukturunu və arxitekturasını müəyyən edir:

2. HTML müqayisəsi: Vite SPA və Next.js

Next.js-in əsas üstünlüyünü brauzerdə səhifənin ilkin mənbə koduna baxarkən («View Page Source» / Ctrl+U) aydın görmək olar.

Vite ilə qurulmuş SPA-nın ilkin kodu:

<!DOCTYPE html>
<html lang="az">
  <head>
    <meta charset="UTF-8" />
    <title>Mənim Mağazam</title>
  </head>
  <body>
    <!-- Brauzer tamamilə boş konteyner alır -->
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Brauzer bütün JavaScript paketini yükləməyənə qədər (bu bir neçə meqabayt ola bilər), istifadəçi yalnız ağ ekran və ya yüklənmə çarxı görür. Google kimi axtarış botları isə səhifədə heç bir faydalı mətn və ya məhsul məlumatı tapmır.

Next.js ilə qurulmuş səhifənin kodu:

<!DOCTYPE html>
<html lang="az">
  <head>
    <meta charset="utf-8" />
    <title>Noutbuklar | Next.js Mağaza</title>
    <meta name="description" content="Sürətli çatdırılma ilə noutbuklar alışı" />
  </head>
  <body>
    <header class="header">
      <nav><a href="/">Ana səhifə</a><a href="/catalog">Kataloq</a></nav>
    </header>
    <main>
      <h1>Noutbuklar kataloqu</h1>
      <article class="card">
        <h2>MacBook Pro 16</h2>
        <p class="price">4299 AZN</p>
      </article>
    </main>
  </body>
</html>

Server dərhal məhsullar, qiymətlər və başlıqlarla dolu hazır HTML göndərir. İstifadəçi məzmunu dərhal görür (First Contentful Paint), axtarış sistemləri isə səhifəni dərhal indeksləyir. Bundan sonra düymələri və formaları canlandırmaq üçün minimal zəruri JS kodu arxa planda yüklənir — bu mərhələ hidratasiya (hydration) adlanır.

3. Məlumatların asan yüklənməsi: Next.js Server Komponenti

Ənənəvi React SPA tətbiqində məlumat yükləmək üçün üç vəziyyət dəyişəni (data, isLoading, error) və useEffect tələb olunurdu. Next.js-də isə asinxron server komponenti məlumatları birbaşa funksiyanın daxilində oxuyur:

// app/products/page.tsx - Next.js Server Komponenti
export default async function ProductsPage() {
  // Sorğu səhifə render olunarkən birbaşa serverdə icra edilir
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return (
    <div className="grid grid-cols-3 gap-6 p-8">
      {products.map((item: { id: number; title: string; price: number }) => (
        <article key={item.id} className="p-4 rounded-xl border border-slate-700">
          <h2 className="text-xl font-bold">{item.title}</h2>
          <p className="text-emerald-400 mt-2">{item.price} AZN</p>
        </article>
      ))}
    </div>
  );
}

4. Next.js tərtibatçıya nə təqdim edir?

1. Susmaya görə Server Komponentləri (Server Components): Komponentlər serverdə icra olunur. Onların kodu istifadəçinin brauzerinə göndərilmir, bu da səhifənin həcmini azaldır və mobil cihazlarda sürəti artırır.
2. Fayl əsaslı marşrutlaşdırma (App Router): app/blog/page.tsx faylını yaratmaq kifayətdir ki, səhifə dərhal /blog ünvanında əlçatan olsun. Daxili tərtibatlar (layout.tsx), xəta idarəetməsi (error.tsx) və skelet yüklənmələri (loading.tsx) avtomatik işləyir.
3. Server Actions: Formalardan və düymə kliklərindən birbaşa server funksiyalarını çağırmaq imkanı. Əlavə olaraq fetch('/api/...') və xüsusi Express nəzarətçiləri (controller) yazmağa ehtiyac qalmır.
4. Resursların avtomatik optimallaşdırılması: <Image> komponenti şəkilləri avtomatik olaraq WebP/AVIF formatına çevirir, ekran ölçüsünə uyğunlaşdırır və tərtibat sıçrayışının (CLS) qarşısını alır. next/font şriftləri yığılma mərhələsində yükləyir və kənar Google Fonts sorğularını aradan qaldırır.
5. Daxili Turbopack yığıcısı: Rust dilində yazılmış yeni nəsil yığıcı inkişaf serverini saniyənin kiçik hissəsində işə salır və dəyişiklikləri dərhal yeniləyir (Fast Refresh).

5. Next.js-in inkişafı: App Router, versiya 15 və 16

Əvvəllər Next.js-də 2016-cı ildən mövcud olan Pages Router (pages/ qovluğu) istifadə olunurdu. O, getServerSideProps və getStaticProps kimi metodlara əsaslanırdı.

Next.js 13 versiyasından etibarən müasir standart App Router (app/ qovluğu) oldu:

• Next.js 15 və 16 versiyalarında asinxron sorğu parametrləri (params, searchParams, cookies()) tam sabitləşdirildi, yeni 'use cache' direktivi təqdim edildi, React 19 dəstəyi təkmilləşdirildi və Turbopack susmaya görə aktivləşdirildi.
• Müasir veb-tərtibatçılar üçün əsas fokus məhz App Router yanaşmasıdır. Pages Router yalnız köhnə layihələrin dəstəklənməsi üçün saxlanılır.

💡 Vercel şirkətinin rolu: Vercel Next.js freymvorkunu maliyyələşdirir, React komandasının əsas mühəndislərini cəlb edir və bulud infrastrukturunu təqdim edir. Bununla belə, Next.js tamamilə açıq mənbəlidir (MIT lisenziyası) və Vercel-ə bağlı olmadan istənilən Docker konteynerində, VPS və ya Node.js serverində yerləşdirilə bilər.

6. Next.js nə zaman artıqdır?

Next.js hər layihə üçün tək çıxış yolu deyil. Bəzi hallarda o, həddindən artıq mürəkkəb ola bilər:

• Kənar saytlara yerləşdirilən vidcetlər: Əgər başqa saytlara bir <script src="widget.js"> ilə qoşulan çat-bot və ya kalkulyator hazırlayırsınızsa.
• Daxili korporativ idarəetmə panelləri (CRM/ERP): Əgər sayt yalnız şifrə ilə qorunur, axtarış sistemlərinin indeksləməsi (SEO) vacib deyil və məlumatlar daim müştəri tərəfdə yenilənirsə, klassik Vite + React SPA tamamilə kifayətdir.
• Dinamikası olmayan sadə tək səhifəli vizit saytlar: Belə səhifələr üçün təmiz HTML/CSS və ya Astro daha yüngül seçimdir.

Bütün digər hallarda — onlayn mağazalar, xəbər və media portalları, bloqlar, ictimai SaaS platformaları — Next.js müasir sənaye standartıdır.