React & Next.js — yüksək performanslı veb tətbiqlər
Bütün frontend layihələrində React 18 və Next.js 15 (App Router) istifadə edirik: təqdimat saytlarından on minlərlə istifadəçiyə xidmət göstərən mürəkkəb SaaS-lara qədər. Kod ciddi TypeScript ilə yazılır, testlər və yerləşdirmə avtomatlaşdırılıb.
Layihələrimiz üçün niyə Next.js
App Router ilə Next.js 15 unikal hibrid model təqdim edir: statik səhifələr (SSG) CDN-dən ani verilir, dinamik səhifələr brauzerə lazımsız JavaScript göndərməyən Server Components kimi işləyir, real vaxt səhifələri isə izolyasiya olunmuş Client Components-dən istifadə edir.
Şəkillər `<Image>` komponenti ilə avtomatik optimallaşdırılır (WebP/AVIF, adaptiv srcSet, lazy-loading), şriftlər `next/font` ilə kritik CSS-ə daxil edilir, üçüncü tərəf skriptləri isə prioritet strategiyaları ilə yüklənir.
- Marketinq səhifələri üçün Server Components — sıfır client JS, serverdə hazırlanan tam HTML
- Canlı məlumatlı idarə panelləri üçün Suspense ilə Streaming SSR
- Yarı dinamik məzmun üçün Incremental Static Regeneration (ISR)
- Yenidən render olmadan mürəkkəb layihələr üçün Route Groups və Parallel Routes
Ciddi TypeScript — səssiz xətalar yoxdur
Bütün layihələrimizdə `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` və `noUncheckedIndexedAccess` ilə TypeScript istifadə olunur. Bu parametrlər icra zamanı xətaların bütöv kateqoriyalarını kompilyasiya mərhələsində bloklayır: undefined-a müraciət, API cavablarında natamam tiplər, yanlış müqayisələr. Tipik layihədə CI-də hər hansı testdən əvvəl 0 TypeScript xətası olur.
State idarəsi üçün Zustand (yüngül, artıq kodsuz) və ya lokal state üçün React Context istifadə edirik. Məlumatların alınması TanStack Query ilə həyata keçirilir (avtomatik keş, ağıllı invalidasiya, stale-while-revalidate). Formalar React Hook Form + Zod sxem validasiyası ilə qurulur — təkrarlanan kod olmadan sinxron və asinxron validasiya.
- Qadağan olunmuş şablonlar (any, console.log, magic strings) üçün xüsusi qaydalarla ESLint
- Vahid konfiqurasiya ilə Prettier — formatlaşdırmaya görə rədd edilən PR yoxdur
- Xarici API-lərdən gələn məlumatların icra zamanı validasiyası üçün Zod
- Path alias-lar (`@/components/...`) — `../../..` olmadan təmiz import-lar
Avtomatlaşdırılmış testlər və CI/CD
Vitest ilə unit testlər (sürətli, Jest API ilə uyğun), React Testing Library ilə komponent testləri, 3 brauzerdə (Chromium, Firefox, WebKit) Playwright ilə E2E. GitHub Actions pipeline-ı hər PR-da bütün testləri işlədir; hər hansı biri uğursuz olarsa, merge bloklanır. Biznes məntiqində minimum 80% əhatə.
- Lighthouse CI — 90-dan aşağı bal staging-ə yerləşdirməni bloklayır
- Avtomatik bundle analizatoru — bundle main ilə müqayisədə 5%-dən çox artarsa, xəbərdarlıq
- UI komponentləri üçün Storybook — canlı vizual sənədləşmə
Üstünlüklər və məhdudiyyətlər
Üstünlüklər
- Şəkillər (Image), şriftlər (next/font) və üçüncü tərəf skriptləri üçün daxili optimallaşdırma alətləri.
- Nativ SSR və SSG — crawler-lər ilkin cavabda tam HTML alır.
- Ciddi TypeScript xətaları istehsalda deyil, kompilyasiya mərhələsində tutur.
- Yetkin ekosistem: Vercel, minlərlə paket, böyük icma.
Məhdudiyyətlər
- App Router və Server Components üzrə öyrənmə əyrisi sərtdir.
- Major versiyalar arasında tez-tez uyğunsuz dəyişikliklər olur — baxım tələb edir.
- Sadə statik sayt üçün Next.js sadə HTML ilə müqayisədə artıq ola bilər.
- Böyük build-lər kompilyasiya vaxtını və CI xərcini artırır.
Qısa nəticə
Sürətli, indeksləmə üçün əlverişli və miqyaslana bilən saytlar və veb tətbiqlər üçün React & Next.js seçin. İnteraktivliyi olmayan tək statik landing səhifə üçün daha sadə alət kifayətdir.
Spesifikasiyalar cədvəli
| Imkan | Limit / hədd | Tipik istifadə | |
|---|---|---|---|
| Render | SSR, SSG, ISR, CSR | Server Components brauzer API-lərini məhdudlaşdırır | Statik marketinq + dinamik idarə paneli |
| Performans | Image komponenti, next/font, skriptlərin prioritetli yüklənməsi | Hydration JS interaktivliklə artır | Yüksək trafikli, SEO üçün kritik saytlar |
| Miqyaslama | On minlərlə istifadəçi, edge CDN | Node və ya serverless hosting tələb edir | SaaS, portallar, e-ticarət |
| Tipik xərc | Açıq mənbə, hosting ~€0-dan | Serverless funksiyalar istifadəyə görə hesablanır | Kiçik layihələrdən enterprise-a qədər |
Next.js və alternativlər
| Meyar | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| Bir framework-də SSR + SSG | Bəli, nativ | Qismən (Nuxt bəli, Vite xeyr) |
| React ekosistemi | Tam | Vue (Nuxt) və ya çox framework-lü (Astro) |
| Sırf statik sayt üçün ən yaxşısı | Yaxşı | Astro daha yüngüldür |
Tez-tez verilən suallar
Niyə sadə React (Vite) deyil, Next.js?
Vite ilə React yalnız client tərəfdə render olunur, ona görə ilkin HTML boşdur — SEO və GEO üçün zəifdir. Next.js SSR və SSG əlavə edir və ilkin cavabda tam HTML göndərir.
Next.js SEO üçün yaxşıdır?
Bəli. SSR/SSG indeksləmə üçün əlverişli HTML göndərir, metadata və JSON-LD isə serverdə yaradılır.
Mövcud saytı Next.js-ə köçürmək olarmı?
Bəli, mərhələli şəkildə: səhifələr bir-bir köçürülür, URL-lər və 301 yönləndirmələr saxlanılır ki, mövcud linklər qırılmasın.
Next.js hansı hosting tələb edir?
Statik səhifələr istənilən CDN-də işləyir. Dinamik funksiyalar (SSR, API routes) Node.js və ya Vercel, Netlify kimi serverless mühit, yaxud Docker konteyneri tələb edir.