PROWIDIT Education Academy

Bloq
Haqqımızda
Necə işləyir?
FAQ

+994 77 333 38 36 Sınaq dərsi Kabinet

AZ RU EN

Kursu dəyişinNext.js kursu

Proqramçılar üçün AI kursu104
Alqoritmlər və verilənlər strukturları kursu129
Django & FastAPI kursu140
Docker və Deploy kursu103
Full Stack Developer kursu270
Git & GitHub kursu103
HTML & CSS kursu154
JavaScript kursu169
Laravel kursu136
Operator şəbəkələri: MPLS, BGP və BNG81
Next.js kursu113
Node.js kursu123
PHP kursu144
Python kursu153
React kursu122
SQL və verilənlər bazaları kursu122
TypeScript kursu112
Vue.js kursu111

Next.js ilə tanışlıq
Next.js React-a nə əlavə edir Pulsuz
Layihənin yaradılması: create-next-app
Layihənin strukturu: app, public və konfiqurasiya faylları
dev, build və start əmrləri: inkişaf rejimi və production build
Next.js səhifəni necə render edir: server, HTML və hidratasiya
Layihədə next.config.ts, TypeScript və ESLint
Marşrutlaşdırma və naviqasiya
Fayl əsaslı marşrutlaşdırma: qovluqlar, page.tsx və iç-içə marşrutlar
Layout: kök və iç-içə layout-lar
Link komponenti ilə naviqasiya
Proqram vasitəsilə naviqasiya: useRouter, usePathname, useParams
Dinamik seqmentlər: [id] və asinxron params
Catch-all seqmentlər: [...slug] və [[...slug]]
Marşrut qrupları və özəl qovluqlar
Sorğu parametrləri: searchParams və URL-də vəziyyət
Yönləndirmələr və rewrite-lar: redirect(), permanentRedirect() və next.config
Layihə: çoxsəhifəli portfolio saytı
Xüsusi fayllar və qabaqcıl marşrutlaşdırma
Yüklənmə vəziyyəti: loading.tsx və skeleton-lar
Xətaların emalı: error.tsx və global-error.tsx
404 səhifəsi: notFound() və not-found.tsx
template.tsx və xüsusi faylların iyerarxiyası
Paralel marşrutlar: @folder slotları və default.tsx
Intercepting routes: öz URL-i olan modal pəncərələr
Layihə: modal baxışlı foto qalereya
Server və Client komponentləri
Server Components: serverdə işləyən komponentlər
'use client' direktivi və client sərhədləri
Server komponentlərindən client komponentlərinə məlumat ötürülməsi
Kompozisiya pattern-ləri: client komponentlərinin içində server komponentləri
App Router-də kontekst və provider-lər
Üçüncü tərəf kitabxanaları və next/dynamic
Hidratasiya xətaları: səbəblər və həlli
Layihə: React SPA-nın Server Components-ə keçirilməsi
Stillər, şriftlər və şəkillər
Next.js-də Tailwind CSS v4: quraşdırma və tema
CSS Modules, qlobal stillər və Sass
UI komponentləri: shadcn/ui, cn() və cva ilə variantlar
next-themes ilə tünd tema
Şriftlər: next/font/google və lokal şriftlər
Şəkillər: next/image komponenti
Üçüncü tərəf skriptləri: next/script və @next/third-parties
Məlumatların yüklənməsi və streaming
Mühit dəyişənləri: .env və NEXT_PUBLIC_
Server komponentlərində məlumatların yüklənməsi
Asinxron Request API-ləri: cookies(), headers(), params
Paralel və ardıcıl yükləmə: şəlalə effektindən qaçmaq
Suspense ilə streaming: səhifənin hissə-hissə göstərilməsi
use() hook-u: promise-lərin client komponentlərinə ötürülməsi
Client tərəfində məlumat yükləmə: TanStack Query və SWR
Layihə: valyuta məzənnələri və hava proqnozu paneli
Route Handlers və proxy (middleware)
Route Handlers: app qovluğunda API endpoint-ləri
Route Handlers: parametrlər, sorğunun gövdəsi və cavablar
Route Handlers-də CORS, webhook-lar və streaming cavablar
Proxy (əvvəlki middleware): sorğuların render-dən əvvəl emalı
Proxy praktikada: yönləndirmələr, A/B testlər və başlıqlar
Render və keşləmə
Statik və dinamik render
generateStaticParams: dinamik marşrutlar üçün statik səhifələr
Next.js-də keşləmə necə işləyir
fetch keşləməsi: cache, revalidate və tags
ISR: vaxta görə inkremental regenerasiya
Tələb üzrə revalidasiya: revalidatePath və revalidateTag
'use cache' direktivi: cacheLife və cacheTag
Partial Prerendering: statik qabıq və dinamik hissələr
Layihə: ISR və revalidasiya ilə xəbər saytı
Verilənlər bazası: PostgreSQL, Prisma və Drizzle
PostgreSQL və Prisma: layihəyə qoşulma
Prisma sxemi, miqrasiyalar və ilkin məlumatlar (seed)
Prisma sorğuları: oxuma, yaratma, yeniləmə, silmə
Prisma-da əlaqələr: birə-çox və çoxa-çox
Tranzaksiyalar və verilənlər bazası xətalarının emalı
Drizzle ORM: TypeScript-də sxem və SQL-ə bənzər sorğular
Məlumatlara giriş qatı: DAL, DTO və React cache()
Verilənlər bazası tərəfində axtarış, filtrlər və səhifələmə
Layihə: axtarış və filtrlərlə məhsul kataloqu
Server Actions və formalar
Server Actions: 'use server' direktivi və formalar
Məlumatların dəyişdirilməsi: Server Action, revalidatePath və redirect
Zod ilə formaların server tərəfində validasiyası
useActionState və useFormStatus: formanın vəziyyəti
Formalardan kənar Server Actions: useTransition və bind
useOptimistic ilə optimistik yeniləmələr
Mürəkkəb formalar: React Hook Form, Zod və Server Actions
Server Actions ilə faylların yüklənməsi
Server Actions və təhlükəsizlik
Layihə: Server Actions ilə full-stack tapşırıq meneceri
Autentifikasiya və avtorizasiya
Autentifikasiyanın əsasları: sessiyalar, cookie və JWT
Auth.js v5: quraşdırma və GitHub ilə giriş
Server və client komponentlərində istifadəçi sessiyası
Verilənlər bazasında istifadəçilər: Prisma Adapter və callback-lər
Bir neçə provider, Google və xüsusi giriş səhifəsi
Email və parol ilə qeydiyyat və giriş
Marşrutların qorunması: proxy, DAL və Server Actions
Avtorizasiya: rollar, giriş hüquqları və məlumatlara sahiblik
Layihə: rollarla qorunan idarəetmə paneli
SEO, kontent və çoxdillilik
Metadata API: başlıqlar, təsvirlər və Open Graph
Dinamik metadata: generateMetadata
sitemap.xml, robots.txt, ikonlar və manifest
ImageResponse ilə dinamik OG şəkilləri
JSON-LD strukturlaşdırılmış məlumatlar və SEO yoxlama siyahısı
MDX: React komponentləri ilə Markdown məqalələri
Layihə: MDX əsasında bloq
Çoxdillilik (i18n): [locale] marşrutları və dilin təyini
next-intl ilə tərcümələr: mesajlar, rəqəmlər və tarixlər
Çoxdilli saytın SEO-su: hreflang və lokallaşdırılmış URL-lər
Layihə: çoxdilli landing səhifə (az/ru/en)
Peşəkar təcrübələr: testlər, performans, təhlükəsizlik
Loqlama və xətaların monitorinqi: instrumentation.ts və Sentry
Unit testlər: Vitest və React Testing Library
Playwright ilə E2E testlər
Core Web Vitals: ölçmə və optimallaşdırma
Daha az JavaScript: bundle analizi və React Compiler
Tətbiqin təhlükəsizliyi: HTTP başlıqları, CSP və məlumatların qorunması
Pages Router və App Router: müqayisə və miqrasiya
Deploy və final layihə
Vercel-ə deploy
Self-hosting: Node.js server, standalone və Nginx
Docker: Next.js və PostgreSQL üçün konteyner
Statik eksport: output: 'export'
Final layihə: ideya, arxitektura və məlumat sxemi
Final layihə: əsas funksiyaların hazırlanması
Final layihə: testlər, optimallaşdırma, deploy və təqdimat

Next.js kursu · Server və Client komponentləri

Hidratasiya xətaları: səbəblər və həlli

🔒 Bu, dərsin əvvəlidir. Tam versiyası abunə ilə əlçatandır.

Hesab yarat Daxil ol

← Əvvəlki dərs🔒 Üçüncü tərəf kitabxanaları və next/dynamic Növbəti dərs →🔒 Layihə: React SPA-nın Server Components-ə keçirilməsi

PROWIDIT Education Academy

Bakıda onlayn proqramlaşdırma kursları. Canlı dərslər, 80% praktika, mentor dəstəyi və işə düzəlməyə kömək.

Front End

HTML & CSS JavaScript TypeScript React Next.js Vue.js

Back End

SQL (PostgreSQL, MySQL) PHP Laravel Python Alqoritmlər Django & FastAPI Node.js Full Stack

Alətlər və AI

Git & GitHub Docker və Deploy Proqramçılar üçün AI

Faydalı

Pulsuz sınaq dərsi Mentorluq və müsahibəyə hazırlıq Şirkətlər üçün Bloq FAQ

Əlaqə

+994 77 333 38 36 info@prowid.com Video dərslər Müraciət göndər

© 2021 – 2026 Prowid — IT Education Academy. Bütün hüquqlar qorunur. Bakı, Azərbaycan