Next.js kursi

React asosida fullstack framework. SSR, SSG, API routes va zamonaviy web ilovalar.

O'rta · 75 ta dars · ~6 hafta

Mavzular: Pages va Routing, SSR va SSG, API Routes, Data Fetching, Image Optimization, Middleware, App Router, Server Components, Deployment, Performance

Kirish va Asoslar

  1. Next.js nima? React dan farqi, SSR, SSG, ISR, CSR tushunchalari
  2. Loyiha yaratish — create-next-app, tuzilishi, app va pages router farqi
  3. App Router — nima uchun yangi, pages router dan ustunligi
  4. File-based Routing — papka va fayl orqali route yaratish
  5. page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx — har birining roli
  6. Link komponenti va useRouter — navigatsiya, prefetching
  7. Image komponenti — optimizatsiya, lazy loading, placeholder
  8. Font optimizatsiya — next/font, Google Fonts, mahalliy shriftlar
  9. Metadata — title, description, Open Graph, Twitter Card

Rendering Strategiyalari

  1. Server Component — nima, qanday ishlaydi, qachon ishlatiladi
  2. Client Component — "use client", qachon kerak, Server Component dan farqi
  3. Server va Client Component birga ishlatish — composition pattern
  4. Static Rendering — build vaqtida generatsiya, qachon mos
  5. Dynamic Rendering — har so'rovda generatsiya, qachon mos
  6. Streaming — Suspense bilan, foydalanuvchi tajribasini yaxshilash
  7. ISR — Incremental Static Regeneration, revalidate, on-demand

Ma'lumot Olish

  1. Server Component da fetch — caching, revalidate, no-store
  2. Parallel va Sequential data fetching — farqi, qachon qaysinisi
  3. Loading UI va Suspense — skeleton, fallback
  4. Error Handling — error.tsx, global-error.tsx, try/catch
  5. TanStack Query — Next.js bilan ishlash, server va client farqi
  6. Server Action — nima, qanday ishlaydi, form bilan ishlatish
  7. Server Action — optimistic update, revalidatePath, revalidateTag

Routing Chuqurroq

  1. Dynamic Route — [id], [...slug], [[...slug]] — farqlari
  2. Route Group — (group) — URL ga ta'sir qilmasdan guruhlash
  3. Parallel Route — @slot — bir sahifada bir nechta kontent
  4. Intercepting Route — (.) (..) — modal pattern
  5. Middleware — request kelganda ishlaydigan kod, matcher (tez kunda)
  6. useParams, useSearchParams, usePathname — client da routing (tez kunda)
  7. Redirect va notFound — server va client da ishlatish (tez kunda)

API Routes

  1. Route Handler — route.ts, GET, POST, PUT, DELETE (tez kunda)
  2. Route Handler — request, response, NextRequest, NextResponse (tez kunda)
  3. Route Handler — dynamic route, params, searchParams (tez kunda)
  4. Route Handler — middleware, CORS, rate limiting (tez kunda)
  5. Webhook — tashqi xizmatlardan kelgan so'rovlarni qabul qilish (tez kunda)
  6. API versiyalash — /api/v1, /api/v2 arxitekturasi (tez kunda)

Autentifikatsiya

  1. Autentifikatsiya qanday ishlaydi Next.js da — umumiy tushuncha (tez kunda)
  2. NextAuth.js — o'rnatish, sozlash, Session Provider (tez kunda)
  3. NextAuth.js — Credentials Provider — email va parol (tez kunda)
  4. NextAuth.js — OAuth Provider — Google, GitHub (tez kunda)
  5. NextAuth.js — JWT va Database Session farqi (tez kunda)
  6. Middleware bilan route himoyalash (tez kunda)
  7. Server Component da session olish (tez kunda)
  8. Client Component da session olish — useSession (tez kunda)

Ma'lumotlar Bazasi

  1. Prisma — Next.js bilan sozlash, PrismaClient singleton (tez kunda)
  2. Prisma — Server Component da CRUD (tez kunda)
  3. Prisma — Server Action da CRUD (tez kunda)
  4. Vercel Postgres, Supabase, PlanetScale — qaysinisi qachon (tez kunda)
  5. Drizzle ORM — Prisma dan farqi, qachon afzal (tez kunda)

Stilizatsiya

  1. CSS Modules — Next.js da ishlash (tez kunda)
  2. Tailwind CSS — Next.js bilan sozlash, darkMode (tez kunda)
  3. Shadcn/ui — o'rnatish, komponentlar, customizatsiya (tez kunda)
  4. CSS Variables va Theming — dark/light mode (tez kunda)

Performance va Optimizatsiya

  1. Core Web Vitals — LCP, FID, CLS Next.js da (tez kunda)
  2. Bundle analiz — @next/bundle-analyzer (tez kunda)
  3. Dynamic Import — komponentlarni bo'laklash (tez kunda)
  4. Image optimizatsiya — chuqurroq, sizes, priority (tez kunda)
  5. Script optimizatsiya — next/script, strategy (tez kunda)
  6. Caching — Request Memoization, Data Cache, Full Route Cache (tez kunda)
  7. Edge Runtime — nima, Node.js dan farqi, qachon kerak (tez kunda)

Testing

  1. Vitest — Next.js bilan sozlash (tez kunda)
  2. React Testing Library — Server Component testlash (tez kunda)
  3. Playwright — End-to-End testing, brauzerda test (tez kunda)
  4. MSW — API mock qilish Next.js da (tez kunda)

Deployment va DevOps

  1. Environment Variables — .env, .env.local, .env.production (tez kunda)
  2. Vercel — deploy qilish, environment, domain sozlash (tez kunda)
  3. Docker — Next.js ni containerlashtirish (tez kunda)
  4. Self-hosted — VPS da deploy, Nginx sozlash (tez kunda)
  5. CI/CD — GitHub Actions bilan avtomatik deploy (tez kunda)

Ilg'or mavzular

  1. Internationalization — next-intl bilan ko'p tilli ilova (tez kunda)
  2. next.config.js — redirects, rewrites, headers, env (tez kunda)
  3. Turbopack — nima, webpack dan farqi, sozlash (tez kunda)
  4. Draft Mode — CMS bilan preview rejimi (tez kunda)
  5. OpenTelemetry — monitoring va tracing (tez kunda)
  6. Real loyiha arxitekturasi — papkalar tuzilishi, best practices (tez kunda)