Next.js 15 App Router — Azərbaycan Developer-ləri Üçün Tam Bələdçi

Next.js 15 App Router — Niyə Məhz İndi?

Salam, developer dostlar! 2026-cı ildə Bakının iş bazarına baxsanız, bir şeyi görəcəksiniz: Next.js bilən frontend developer-ə tələb heç vaxt bu qədər yüksək olmayıb. ABB, Kapital Bank, Bravo kimi şirkətlərin texniki vakansiyalarında Next.js artıq "nice to have" deyil, "must have" siyahısındadır.

Bu gün sizinlə Next.js 15-in ən vacib yeniliyi olan App Router-i başdan-ayağa keçəcəyik. Əgər hələ pages/ direktoriyasında yazırsınızsa — bu məqalə sizin üçündür.

---

App Router Nədir və Pages Router-dən Nə Fərqi Var?

Next.js 13-dən etibarən təqdim olunan App Router, Next.js 15-də tam stabil və defolt routing sistemidir. Əsas fərqlər:

• Server Components defolt-dur — komponentlər server-də render olunur, client-ə minimal JS göndərilir
• Nested Layouts — hər route-un öz layout-u ola bilər, səhifə keçidlərində yenidən render olunmur
• Loading & Error UI — loading.tsx və error.tsx faylları ilə avtomatik state management
• Server Actions — API route yazmadan birbaşa server-dən form submit etmək

Köhnə pages/ yanaşmasını bilən developer-lər üçün ən böyük dəyişiklik: fayl adı artıq route deyil, qovluq adı route-dur.

---

Layihə Strukturu: Real Nümunə

Təsəvvür edin, Bakıda bir e-commerce startup üçün işləyirsiniz. Layihənin app/ qovluğu belə görünəcək:

app/
├── layout.tsx          ← Root layout (navbar, footer)
├── page.tsx            ← Ana səhifə (/)
├── loading.tsx         ← Ana səhifə loading state
├── products/
│   ├── layout.tsx      ← Məhsullar layout-u
│   ├── page.tsx        ← Məhsullar siyahısı (/products)
│   └── [id]/
│       ├── page.tsx    ← Tək məhsul (/products/123)
│       └── loading.tsx ← Məhsul yüklənmə state-i
├── cart/
│   └── page.tsx        ← Səbət (/cart)
└── api/
    └── checkout/
        └── route.ts    ← API endpoint

---

Kod Nümunəsi: Məhsullar Səhifəsi

Gəlin real bir Server Component yazaq. Bu komponent heç bir useEffect və ya useState olmadan data fetch edir:

tsxKopyala
// app/products/page.tsx

interface Product {
  id: number;
  name: string;
  price: number;
  currency: string;
}

async function getProducts(): Promise<Product[]> {
  const res = await fetch('https://api.example.az/products', {
    next: { revalidate: 60 } // 60 saniyə cache
  });
  if (!res.ok) throw new Error('Məhsullar yüklənmədi');
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <section className="max-w-5xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Məhsullar</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {products.map((product) => (
          <div key={product.id} className="border rounded-lg p-4 hover:shadow-lg transition">
            <h2 className="text-xl font-semibold">{product.name}</h2>
            <p className="text-green-600 text-lg mt-2">
              {product.price} {product.currency}
            </p>
            <a
              href={`/products/${product.id}`}
              className="mt-3 inline-block text-blue-500 hover:underline"
            >
              Ətraflı bax →
            </a>
          </div>
        ))}
      </div>
    </section>
  );
}

Diqqət edin: bu komponentdə "use client" yoxdur. Defolt olaraq Server Component-dir. Brauzerə JavaScript göndərilmir — yalnız HTML. Bu, performans üçün böyük qələbədir.

---

Loading State — İstifadəçini Gözlətməyin

App Router-in ən gözəl xüsusiyyətlərindən biri — sadəcə loading.tsx faylı yaradın:

tsxKopyala
// app/products/loading.tsx

export default function Loading() {
  return (
    <div className="flex items-center justify-center min-h-[50vh]">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500" />
      <span className="ml-3 text-gray-500">Məhsullar yüklənir...</span>
    </div>
  );
}

Bu fayl avtomatik olaraq Suspense boundary kimi işləyir. Heç bir əlavə konfiqurasiya lazım deyil.

---

Server Actions: Formları Sadələşdirin

Next.js 15-də Server Actions tam stabil-dir. API route yazmadan form data-nı birbaşa server funksiyasına göndərin:

tsxKopyala
// app/cart/page.tsx
"use client";

import { addToCart } from './actions';

export default function CartPage() {
  return (
    <form action={addToCart}>
      <input type="hidden" name="productId" value="42" />
      <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded">
        Səbətə əlavə et
      </button>
    </form>
  );
}

tsKopyala
// app/cart/actions.ts
"use server";

import { revalidatePath } from 'next/cache';

export async function addToCart(formData: FormData) {
  const productId = formData.get('productId');
  // Database-ə yaz, API-yə göndər və s.
  console.log(`Məhsul ${productId} səbətə əlavə edildi`);
  revalidatePath('/cart');
}

---

Bakıda İş Bazarı: Next.js Bilmək Nə Qazandırır?

2026-cı ilin birinci rübünün statistikasına görə (jobsearch.az və LinkedIn Azerbaijan data-sı əsasında):

• Junior Frontend (React/Next.js): 800 – 1,200 AZN
• Middle Frontend (Next.js + TypeScript): 1,500 – 2,500 AZN
• Senior Frontend / Fullstack (Next.js): 3,000 – 5,000+ AZN
• Remote (xarici şirkətlər): $2,000 – $5,000/ay

Bakıdakı texnoloji şirkətlər — Azerconnect, PASHA Holding IT, Expressbank Digital, SABAH.hub startupları — demək olar ki, hamısı ya Next.js istifadə edir, ya da migrasiya planlaşdırır. App Router bilmək sizi rəqiblərdən bir addım öndə saxlayır.

---

Tez Başlamaq Üçün: 5 Dəqiqəlik Plan

1. Layihə yarat:

   bashKopyala
   npx create-next-app@latest my-app --typescript --tailwind --app
   cd my-app && npm run dev

2. app/page.tsx faylını aç və ilk Server Component-ini yaz
3. Dynamic route yarat: app/blog/[slug]/page.tsx
4. loading.tsx əlavə et — fərqi hiss edəcəksən
5. Server Action yaz — form submit-i API route-suz et

---

Nəticə

Next.js 15 App Router sadəcə yeni routing sistemi deyil — web development-in düşüncə tərzini dəyişir. Server-first yanaşma, avtomatik code splitting, nested layout-lar və Server Actions sizin layihələrinizi daha sürətli, daha sadə və daha scalable edir.

Bakının developer community-si sürətlə böyüyür. Bu texnologiyanı indi öyrənsəniz, 2026-cı ilin sonuna kimi həm yerli, həm remote bazarda ciddi üstünlüyünüz olacaq.

Sualınız varsa, şərhlərdə yazın — hər birinə cavab verəcəyik. Kod yazmağa davam! 🚀

---

Müəllif: Baku Stack Redaksiyası | 10 Aprel 2026