WisarWisar
Dasturlash kitobi/13-QISM — NextJS34 daqiqa

13.1-bob: Next.js kirish — nega Next

13-QISM — Next.js · 1-mavzu

1. Kirish va motivatsiya

11-QISM (React)va 12-QISM (State Management)da biz React'ni chuqur o'rgandik va u bilan SPA (Single Page Application — bir sahifali ilova — 11.3: 2.10) qurdik: Vite + React + Router + Query. Bu juda kuchli, lekin SPA'ning bir necha tug'ma cheklovi bor edi: (1) SEO qiyin — server bo'sh index.html beradi, qidiruv tizimi (Google) dastlab bo'sh sahifa ko'radi (kontent JavaScript ishlagandan keyin paydo bo'ladi — qidiruv uni yaxshi indekslamaydi); (2) boshlang'ich yuk sekin — foydalanuvchi butun JavaScript bundle'ni yuklab, React ishlab, keyin ma'lumotni olib, keyin ko'radi (oq ekran kutish); (3) server'da hech narsa render bo'lmaydi — barchasi brauzerda (mijoz quvvatiga bog'liq). Aynan shu cheklovlarni Next.js hal qiladi.

Next.js — React ustiga qurilgan production framework (meta-framework): u React'ning o'zini (komponent, hook, JSX) saqlaydi, lekin unga server imkoniyatlari (server'da render, API, ma'lumot olish), fayl-asosli routing (papka = sahifa — qo'lda Router sozlash kerak emas), avtomatik optimizatsiya (rasm, shrift, kod bo'lish), va to'liq full-stack (frontend + backend bitta loyihada) qo'shadi. Eng muhim g'oya — server-first (server'da render — SEO va tezlik) + client interaktivlik (kerakli joyda). Next.js — Vercel kompaniyasi tomonidan ishlab chiqilgan va bugun eng keng ishlatiladigan React framework (deyarli har yirik sayt — Netflix, TikTok, Twitch, Notion — Next.js'da). Next.js — zamonaviy React dasturchining majburiy ko'nikmasi.

Bu bob: nega Next.js (SPA cheklovi — SEO, boshlang'ich yuk), Next.js nima (React framework — meta-framework), u hal qiladigan muammolar (SSR, fayl-routing, optimizatsiya, full-stack), server-first falsafa, setup (create-next-app), loyiha tuzilishi (app/, public/, next.config), App Router vs Pages Router (App — joriy), Next.js ekotizimi (Vercel), qachon Next.js vs SPA (qaror), va Next.js versiyalari (14/15 — joriy) mavzularini to'liq, falsafa va amaliy holatda ochadi. Va bu bobdan boshlab har kod misolida uning maqsadi (nima uchun) va qadam-baqadam tushuntirishi (qaysi qism nima qiladi) bo'ladi.

O'xshatish: SPA (Vite/React) — bu bo'sh restoran + retsept kitobi. Mehmon (foydalanuvchi) keladi, lekin restoran bo'sh (index.html bo'sh) — unga retsept kitobi (JavaScript bundle) beriladi va "o'zingiz pishir" deyiladi (brauzer React'ni ishlab, UI'ni quradi). Mehmon kutadi (oq ekran), va tashqi nazoratchi (Google — SEO) bo'sh restoranni ko'rib "bu yerda hech narsa yo'q" deb o'ylaydi. Next.js — bu tayyor taom bilan kutib oluvchi restoran: oshpaz (server) taomni oldindan pishirib qo'yadi (server'da render — SSR), mehmon kelganda tayyor taom (to'liq HTML) ko'radi (tez, oq ekran yo'q), va nazoratchi (Google) to'liq menyuni (kontentni) ko'radi (yaxshi SEO). Va kerak bo'lganda mehmon o'zi ham qo'shimcha qila oladi (client interaktivlik — masalan ovqatga ziravor). Tayyor taom + interaktivlik — Next.js'ning ikki kuchi.

Nega muhim?

  • SEO va tezlik — Next.js SPA'ning eng katta ikki muammosini (SEO, boshlang'ich yuk) hal qiladi.
  • Eng keng React framework — yirik saytlarning katta qismi Next.js'da (ish bozorida eng talab qilinadi).
  • Full-stack React — frontend + backend bitta loyihada (API, server logic — Node.js o'rniga ham).
  • Zamonaviy stack'ning bir qismi — Next.js zamonaviy React'ning cho'qqisi (frontend ish e'lonlarida eng ko'p so'raladigan framework).

2. Nazariya — chuqur tushuntirish

2.1. SPA cheklovlari (nega Next kerak)

text
  SPA (Vite/React — 11.3: 2.10) — bo'sh HTML + JS brauzerda quradi:

  Brauzer ──► index.html (BO'SH: <div id="root"></div>) ──► JS yuklanadi
         ──► React ishlaydi ──► ma'lumot olinadi ──► UI paydo bo'ladi
         (foydalanuvchi KUTadi — oq ekran; Google BO'SH HTML ko'radi)

  3 ASOSIY MUAMMO:
  1. SEO — Google dastlab BO'SH index.html ko'radi (kontent JS'dan keyin)
      blog, e-commerce, marketing sayt — SEO KRITIK (qidiruvda topilishi kerak)
  2. BOSHLANG'ICH YUK — to'liq JS bundle + React + ma'lumot = sekin (oq ekran)
      ayniqsa sekin internet/telefonda (mijoz quvvatiga bog'liq)
  3. SERVER YO'Q — hammasi brauzerda (server render, server logic yo'q)

   SPA — interaktiv ilova (dashboard, admin)da zo'r; lekin SEO/tezlik kritik bo'lsa — cheklangan
   Next.js — server'da render (SSR)  SEO + tez boshlang'ich yuk (SPA muammosini hal qiladi)

SPA cheklovlari — Next.js'ning mavjudlik sababini tushunish. SPA (Vite/React — 11.3: 2.10) modelida server bo'sh index.html (<div id="root"></div>) beradi, va React butun UI'ni brauzerda quradi (JS yuklash React ishlash ma'lumot olish UI). Bu uch muammoni keltiradi: (1) SEO — Google va boshqa qidiruv tizimlari sahifani indekslash uchun dastlab bo'sh HTML ko'radi (kontent faqat JavaScript ishlagandan keyin paydo bo'ladi); blog, e-commerce, marketing sayt kabilarda SEO kritik (qidiruvda topilishi — biznesning hayoti), va SPA bunda zaif. (2) Boshlang'ich yuk — foydalanuvchi to'liq JavaScript bundle'ni yuklab, React ishlab, ma'lumot olib, keyin ko'radi (oq ekran kutish — ayniqsa sekin internet yoki telefonda — mijoz quvvatiga bog'liq). (3) Server yo'q — hammasi brauzerda (server'da render yoki server logic yo'q). Ikki nuqta: (1) SPA — interaktiv ilova (dashboard, admin panel — foydalanuvchi tizimga kirgan, SEO kerak emas) uchun zo'r; lekin SEO va tezlik kritik bo'lgan ommaviy sayt uchun cheklangan; (2) Next.js — server'da render qiladi (SSR — 2.4) SEO yaxshi (Google to'liq HTML ko'radi) va boshlang'ich yuk tez (server tayyor HTML beradi). Bu — Next.js ning asosiy qiymati.

2.2. Next.js nima — React framework

text
  NEXT.JS — React ustiga qurilgan PRODUCTION FRAMEWORK (meta-framework):

  REACT (kutubxona — 11.2) — faqat UI (komponent, hook, state)
       +
  NEXT.JS — React'ga QO'SHADI:
   Server'da render (SSR/SSG/ISR — 2.4) — SEO + tezlik
   Fayl-asosli routing (papka = sahifa — Router sozlash yo'q — 13.2)
   Server Components (server'da ishlaydi — ma'lumot to'g'ridan — 13.3)
   Optimizatsiya (rasm, shrift, kod bo'lish — AVTOMATIK — 13.10)
   Full-stack (API route, Server Actions — backend ham — 13.5, 13.6)
   Built-in (TypeScript, ESLint, bundling — sozlash minimal)

  ┌────────────────────────────────────────────────────────────┐
  │ React: UI kutubxonasi (hamma narsani o'zingiz sozlaysiz)     │
  │ Next.js: to'liq framework (React + server + konventsiyalar)   │
  └────────────────────────────────────────────────────────────┘

   Next.js — React'ni O'RNINI ALMASHTIRMAYDI (React ustiga; komponent/hook bir xil)
   "Meta-framework" — kutubxona (React) ustiga qurilgan to'liq framework

Next.js nima — React framework — Next.js'ning mohiyatini tushunish. React 11.2-bob — bu UI kutubxonasi: u faqat foydalanuvchi interfeysini (komponent, hook, state) beradi; routing, server, optimizatsiya, build — bularning hammasini siz sozlaysiz (yoki boshqa vositalar bilan — Router, Vite). Next.js — React ustiga qurilgan to'liq framework ("meta-framework" — kutubxona ustiga qurilgan framework): u React'ga qo'shadi: (1) server'da render (SSR/SSG/ISR — 2.4 — SEO va tezlik); (2) fayl-asosli routing (papka = sahifa — qo'lda Router sozlash kerak emas — 13.2); (3) Server Components (server'da ishlaydi — 13.3); (4) avtomatik optimizatsiya (rasm, shrift, kod bo'lish — 13.10); (5) full-stack (API route, Server Actions — backend ham — 13.5, 13.6); (6) built-in sozlama (TypeScript, ESLint, bundling — minimal konfiguratsiya). Ikki muhim nuqta: (1) Next.js React'ni o'rnini almashtirmaydi — u React ustiga qurilgan (komponent, hook, JSX — barchasi bir xil; React'ni bilsangiz, Next.js'ning yarmini bilasiz); (2) "framework" (kutubxonadan farqli) — u konvensiyalar beradi (qanday qilish kerakligini belgilaydi — masalan fayl-routing) va ko'p qarorni o'zi qiladi (kam sozlama). Next.js — React'ni production'ga tayyor qiladi (real, ommaviy sayt uchun zarur narsalar bilan).

2.3. Next.js hal qiladigan muammolar (umumiy)

text
  NEXT.JS — 4 katta muammoni hal qiladi:

  1. SEO + TEZLIK (server render — SSR/SSG — 2.4):
      server tayyor HTML beradi  Google ko'radi + tez boshlang'ich yuk

  2. ROUTING (fayl-asosli — 13.2):
      app/products/page.tsx = /products (qo'lda Router sozlash yo'q)

  3. MA'LUMOT OLISH (Server Components — 13.3, 13.5):
      server'da to'g'ridan DB/API'dan (useEffect+fetch, loading yo'q — soddaroq)

  4. OPTIMIZATSIYA (avtomatik — 13.10):
      rasm (next/image), shrift, kod bo'lish, prefetch — built-in

  + FULL-STACK (13.5, 13.6):
      API route, Server Actions — backend ham Next.js'da (alohida server kerak emas)

   Next.js — SPA'ning cheklovlarini (SEO/tezlik) + qo'lda ishlarni (routing/optimizatsiya) hal qiladi
   Bitta loyiha — frontend + backend + optimizatsiya (to'liq tizim)

Next.js hal qiladigan muammolar — Next.js to'rt katta muammoni hal qiladi (har biri keyingi boblarda chuqur). (1) SEO + tezlik (server render — SSR/SSG — 2.4): server tayyor HTML beradi, shuning uchun Google to'liq kontentni ko'radi (SEO) va foydalanuvchi tez ko'radi (boshlang'ich yuk). (2) Routing (fayl-asosli — 13.2): app/products/page.tsx fayli avtomatik /products sahifasiga aylanadi (qo'lda React Router sozlash — 11.9 — kerak emas). (3) Ma'lumot olish (Server Components — 13.3, 13.5): server'da to'g'ridan ma'lumotlar bazasidan yoki API'dan ma'lumot olinadi (useEffect+fetch, loading/error — 11.5 — kerak emas, soddaroq). (4) Optimizatsiya (avtomatik — 13.10): rasm (next/image), shrift, kod bo'lish, prefetch — built-in (qo'lda optimizatsiya kerak emas). Va qo'shimcha — full-stack (13.5, 13.6): API route va Server Actions bilan backend ham Next.js'da (alohida Node.js server kerak emas — kichik/o'rta loyihada). Ikki nuqta: (1) Next.js — SPA'ning cheklovlarini (SEO/tezlik) va qo'lda qilinadigan ishlarni (routing, optimizatsiya) hal qiladi; (2) bitta loyihada frontend + backend + optimizatsiya (to'liq, integratsiyalangan tizim). Bu — Next.js'ni "to'liq yechim" qiladi.

2.4. Rendering strategiyalari (umumiy — 13.4'da chuqur)

text
  NEXT.JS — sahifani QAYERDA va QACHON render qilishni tanlay oladi (4 strategiya):

  1. CSR (Client-Side Rendering) — brauzerda (SPA kabi — 11.3):
      interaktiv, lekin SEO/boshlang'ich yuk muammosi (faqat kerakli joyda)

  2. SSR (Server-Side Rendering) — HAR so'rovda server'da render:
      har doim yangi ma'lumot (dinamik); SEO + tez (lekin server yuki)

  3. SSG (Static Site Generation) — BUILD paytida (oldindan HTML):
      eng tez (statik fayl); o'zgarmaydigan kontent (blog, docs, marketing)

  4. ISR (Incremental Static Regeneration) — SSG + davriy yangilash:
      statik tezlik + vaqti-vaqti yangilanish (e-commerce mahsulot)

  ┌────────────────────────────────────────────────────────────┐
  │ CSR: brauzer | SSR: har so'rov server | SSG: build | ISR: SSG+yangilanish│
  │ Next.js — har sahifaga MOS strategiyani tanlaysiz (moslashuvchan)│
  └────────────────────────────────────────────────────────────┘

   Next.js — har sahifaga AYRIM render strategiya (statik blog SSG, dinamik feed SSR)
   SPA — faqat CSR; Next.js — 4 strategiya (kontentga mos — 13.4 chuqur)

Rendering strategiyalari — Next.js'ning eng kuchli imkoniyatlaridan biri (13.4'da chuqur). SPA faqat bitta usulda (CSR — brauzerda render) ishlaydi; Next.js esa sahifani qayerda va qachon render qilishni tanlay oladi (4 strategiya): (1) CSR (Client-Side Rendering) — brauzerda (SPA kabi — interaktiv, lekin SEO/boshlang'ich yuk muammosi — faqat kerakli joyda — masalan dashboard); (2) SSR (Server-Side Rendering) — har so'rovda server'da render (har doim eng yangi ma'lumot — dinamik kontent; SEO yaxshi va tez, lekin server yuki); (3) SSG (Static Site Generation) — build paytida oldindan HTML generatsiya (eng tez — statik fayl; o'zgarmaydigan kontent — blog, docs, marketing sahifa); (4) ISR (Incremental Static Regeneration) — SSG + davriy yangilash (statik tezlik + vaqti-vaqti yangilanish — e-commerce mahsulot sahifasi — statik, lekin har soatda yangilanadi). Ikki nuqta: (1) Next.js har sahifaga ayrim strategiya tanlash imkonini beradi (statik blog — SSG, dinamik feed — SSR, dashboard — CSR — bitta ilovada aralash); (2) SPA — faqat CSR, Next.js — to'rt strategiya (kontent turiga mos — eng yaxshi tezlik va SEO). Bu moslashuvchanlik — Next.js'ni har turdagi saytga (statik blogdan dinamik dashboardgacha) mos qiladi.

2.5. Setup — create-next-app

text
  YANGI LOYIHA (create-next-app — rasmiy yaratuvchi):
  npx create-next-app@latest my-app

  INTERAKTIV SAVOLLAR (zamonaviy default tavsiya):
   TypeScript?  Ha (type-safe — 11.14)
   ESLint?  Ha (kod sifati — 15.3)
   Tailwind CSS?  Ha (stil — 1.7, zamonaviy stack)
   src/ directory?  ixtiyoriy (tartibli — tavsiya)
   App Router?  Ha (zamonaviy — 13.2; Pages Router eski)
   import alias (@/*)?  Ha (qisqa import — 11.3: 2.8)

  KEYIN:
  cd my-app
  npm run dev           http://localhost:3000 (dev server)

  ┌────────────────────────────────────────────────────────────┐
  │ create-next-app — TypeScript+ESLint+Tailwind+App Router tayyor│
  │ npm run dev (3000) | npm run build | npm start (production)  │
  └────────────────────────────────────────────────────────────┘

   create-next-app — hamma narsa tayyor (sozlash minimal — Vite'dan ko'p built-in)
   App Router tanlang (zamonaviy — bu QISM App Router'ga asoslangan; Pages Router eski)

Setup — create-next-app — Next.js loyihasini yaratish. Rasmiy yaratuvchi — npx create-next-app@latest my-app — bu interaktiv savollar bilan loyihani sozlaydi. Zamonaviy default tavsiyalar: TypeScript (Ha — type-safe — 11.14), ESLint (Ha — kod sifati — 15.3), Tailwind CSS (Ha — zamonaviy stil — 1.7), src/ directory (ixtiyoriy — tartibli — tavsiya), App Router (Ha — zamonaviy routing — 13.2; "Pages Router" — eski, yangi loyihada ishlatilmaydi), import alias @/* (Ha — qisqa import — 11.3: 2.8). So'ng: cd my-app npm run dev (dev server — http://localhost:3000). Skriptlar: npm run dev (development), npm run build (production build), npm start (production serverni ishga tushirish). Ikki nuqta: (1) create-next-app — hamma narsa tayyor (TypeScript, ESLint, Tailwind, App Router — sozlash minimal, Vite'dan ko'proq built-in — chunki Next.js to'liq framework); (2) App Router tanlang (zamonaviy — bu butun QISM App Router'ga asoslangan; eski "Pages Router" hali ishlaydi, lekin yangi loyihada App Router). Setup — bir buyruqda tayyor, ish maydoni darrov tayyor.

2.6. Loyiha tuzilishi — app, public, config

text
  NEXT.JS (App Router) LOYIHA TUZILISHI:

  my-app/
  ├── app/                     ROUTING + sahifalar (App Router — 13.2)
  │   ├── layout.tsx           ildiz layout (har sahifani o'raydi — <html><body>)
  │   ├── page.tsx             bosh sahifa (/)
  │   ├── globals.css          global stillar (Tailwind)
  │   ├── products/
  │   │   └── page.tsx         /products sahifasi
  │   └── api/
  │       └── route.ts         API endpoint 13.6-bob
  ├── public/                  statik fayllar (rasm, favicon — to'g'ridan yo'l)
  ├── next.config.js           Next.js sozlamasi
  ├── tsconfig.json            TypeScript
  └── package.json

  MUHIM FAYLLAR (app/ ichida — maxsus nomlar):
  page.tsx      sahifa (route)
  layout.tsx    layout (o'rovchi — bola sahifani o'raydi)
  loading.tsx   yuklanish UI (Suspense — 13.3)
  error.tsx     xato UI (error boundary — 13.3)
  not-found.tsx 404

   app/ — routing'ning yuragi (papka = yo'l; page.tsx = sahifa — 13.2)
   Maxsus fayllar (page/layout/loading/error) — Next.js konvensiyasi (nom muhim)

Loyiha tuzilishi — Next.js (App Router) loyihasining tashkili. Asosiy papkalar va fayllar: app/ — routing va sahifalarning yuragi (App Router — 13.2): layout.tsx (ildiz layout — har sahifani <html><body> bilan o'raydi), page.tsx (bosh sahifa — /), globals.css (global stillar — Tailwind), products/page.tsx (/products sahifasi), api/route.ts (API endpoint — 13.6). public/ — statik fayllar (rasm, favicon — to'g'ridan yo'l bilan — /logo.png). next.config.js — Next.js sozlamasi; tsconfig.json — TypeScript; package.json. Muhim — app/ ichidagi maxsus fayl nomlari (Next.js konvensiyasi — nom muhim, o'zboshimchalik bilan emas): page.tsx (sahifa — route), layout.tsx (o'rovchi layout — 11.9 Outlet'dek), loading.tsx (yuklanish UI — Suspense bilan — 13.3), error.tsx (xato UI — error boundary — 13.3), not-found.tsx (404). Ikki nuqta: (1) app/ — routing'ning yuragi (papka strukturasi URL'ni belgilaydi; page.tsx — o'sha yo'lning sahifasi — 13.2); (2) maxsus fayl nomlari (page/layout/loading/error) — Next.js konvensiyasi (har biri aniq vazifaga ega — nomni to'g'ri yozishing kerak). Bu tuzilish — fayl-asosli routing'ning poydevori (13.2'da chuqur).

2.7. App Router vs Pages Router

text
  NEXT.JS IKKI ROUTER (App — zamonaviy; Pages — eski):

  PAGES ROUTER (eski — Next.js 12 va undan oldin):
  - pages/ papka (pages/products.tsx  /products)
  - getServerSideProps/getStaticProps (ma'lumot olish — alohida funksiyalar)
  - barcha komponent CLIENT (Server Components yo'q)

  APP ROUTER (zamonaviy — Next.js 13+, joriy standart):
  - app/ papka (app/products/page.tsx  /products)
  - Server Components (default — server'da render — 13.3)
  - async komponent (ma'lumot to'g'ridan — soddaroq — 13.5)
  - nested layouts, loading/error (konvensiya — 2.6)
  - Server Actions (forma/mutation — 13.5)

  ┌────────────────────────────────────────────────────────────┐
  │ App Router (app/): Server Components, zamonaviy — ISHLAT     │
  │ Pages Router (pages/): eski, hali ishlaydi (legacy loyiha)  │
  └────────────────────────────────────────────────────────────┘

   App Router — joriy standart (Server Components, soddaroq ma'lumot — bu QISM shu)
   Pages Router — eski (mavjud loyihada uchraydi, lekin yangi loyiha — App Router)

App Router vs Pages Router — Next.js'ning ikki routing tizimi (qaysini qachon). Pages Router (eski — Next.js 12 va undan oldingi): pages/ papka (pages/products.tsx /products), ma'lumot olish alohida funksiyalar bilan (getServerSideProps/getStaticProps), barcha komponent client (Server Components yo'q). App Router (zamonaviy — Next.js 13+, joriy standart): app/ papka (app/products/page.tsx /products), Server Components (default — server'da render — 13.3), async komponent (ma'lumotni to'g'ridan — soddaroq — 13.5), nested layouts va loading/error konvensiyalari 2.6-bob, Server Actions (forma/mutation server'da — 13.5). Ikki nuqta: (1) App Router — joriy standart (Server Components, soddaroq ma'lumot olish — bu butun QISM App Router'ga asoslangan); (2) Pages Router — eski (mavjud/legacy loyihalarda ko'rasiz, hali ishlaydi, lekin yangi loyiha App Router bilan boshlanadi). Next.js jamoasi App Router'ni tavsiya etadi (kelajak shu yerda). Bu farqni bilish muhim — internetda ikkala uslubdagi misol bor (qaysi biri o'qilayotganini anglash kerak); biz App Router'ni o'rganamiz.

2.8. Next.js ekotizimi va Vercel

text
  NEXT.JS EKOTIZIMI:
  - Next.js — Vercel kompaniyasi tomonidan (rasmiy, qo'llab-quvvatlanadi)
  - Vercel — Next.js uchun ENG YAXSHI deploy platformasi 13.11-bob:
     git push  avtomatik deploy (CI/CD — preview/production)
     serverless funksiyalar (API/SSR avtomatik)
     global CDN, edge, optimizatsiya (built-in)

  NEXT.JS BILAN ISHLATILADIGAN (zamonaviy stack):
  - Tailwind + shadcn/ui (stil/UI — 12.6)
  - TanStack Query yoki Server Components (ma'lumot — 12.4, 13.3)
  - Zustand (client state — 12.5)
  - Prisma/Drizzle (DB — 6-QISM ORM)
  - NextAuth/Auth.js (auth — 13.9)

  ┌────────────────────────────────────────────────────────────┐
  │ Next.js (framework) + Vercel (deploy) — bir kompaniya (uyg'un)│
  │ + Tailwind/shadcn + Prisma + NextAuth — to'liq stack         │
  └────────────────────────────────────────────────────────────┘

   Vercel — Next.js uchun eng oson deploy (git push  live — 13.11)
   Next.js boshqa joyga ham deploy bo'ladi (Docker — 10.3, AWS), lekin Vercel eng uyg'un

Next.js ekotizimi va Vercel — Next.js atrofidagi vositalar. Vercel — Next.js'ni ishlab chiqgan kompaniya (rasmiy qo'llab-quvvatlanish) va Next.js uchun eng yaxshi deploy platformasi 13.11-bob: git push qilsangiz avtomatik deploy bo'ladi (CI/CD — preview va production), serverless funksiyalar (API/SSR avtomatik ishlaydi), global CDN, edge tarmoq, optimizatsiya — barchasi built-in (Vercel + Next.js bir kompaniya — mukammal uyg'un). Next.js bilan ishlatiladigan zamonaviy stack: Tailwind + shadcn/ui (stil/UI — 12.6), TanStack Query yoki Server Components (ma'lumot — 12.4, 13.3), Zustand (client state — 12.5), Prisma/Drizzle (DB — 6-QISM ORM), NextAuth/Auth.js (auth — 13.9). Ikki nuqta: (1) Vercel — Next.js uchun eng oson deploy (git push live, optimizatsiya avtomatik — 13.11); (2) Next.js boshqa joyga ham deploy bo'ladi (Docker — 10.3, AWS, o'z serveri), lekin Vercel eng uyg'un (ba'zi Next.js xususiyatlari — ISR, edge — Vercel'da eng yaxshi ishlaydi). Bu ekotizim — Next.js'ni to'liq, production-ready yechim qiladi.

2.9. Qachon Next.js, qachon SPA (qaror)

text
  NEXT.JS vs SPA (Vite/React) — TANLASH:

  NEXT.JS TANLA (server render kerak):
   SEO kerak (blog, e-commerce, marketing, ommaviy kontent)
   Tez boshlang'ich yuk (foydalanuvchi birinchi ko'rinish muhim)
   Full-stack (frontend + backend bitta loyiha)
   Statik kontent (docs, landing — SSG)
   Yirik, jiddiy ilova (production framework)

  SPA (Vite/React) TANLA (interaktiv, SEO kerak emas):
   Dashboard, admin panel (login ortida — SEO kerak emas)
   Ichki vosita (internal tool — qidiruvda topilishi shart emas)
   Juda interaktiv (real-time, canvas, o'yin — server render foydasiz)
   Oddiy/tez prototip (kam sozlama)

  ┌────────────────────────────────────────────────────────────┐
  │ SEO/tezlik/full-stack/ommaviy  Next.js                     │
  │ Dashboard/admin/internal/interaktiv  SPA (Vite/React)      │
  └────────────────────────────────────────────────────────────┘

   Ommaviy, SEO, full-stack  Next.js; login-ortida dashboard  SPA yetadi
   Ko'p hozirgi loyiha — Next.js (default tanlov bo'lib boryapti — zamonaviy)

Qachon Next.js, qachon SPA — to'g'ri vositani tanlash qarori. Next.js tanlang (server render kerak): (1) SEO kerak (blog, e-commerce, marketing, ommaviy kontent — qidiruvda topilishi zarur); (2) tez boshlang'ich yuk (foydalanuvchining birinchi ko'rinishi muhim — konversiya); (3) full-stack (frontend + backend bitta loyihada — alohida Node.js server kerak emas); (4) statik kontent (docs, landing page — SSG bilan eng tez); (5) yirik, jiddiy production ilova. SPA (Vite/React) tanlang (interaktiv, SEO kerak emas): (1) dashboard, admin panel (login ortida — qidiruvda topilishi shart emas — 11.15); (2) ichki vosita (internal tool); (3) juda interaktiv (real-time, canvas, o'yin — server render foyda bermaydi); (4) oddiy/tez prototip (kam sozlama). Ikki nuqta: (1) SEO/tezlik/full-stack/ommaviy kontent Next.js; login-ortidagi dashboard/admin/internal/o'ta-interaktiv SPA yetadi; (2) ko'p hozirgi loyiha Next.js'ni tanlaydi (u default tanlov bo'lib boryapti — zamonaviy, chunki ko'p sayt SEO va tezlikni talab qiladi). Eslatma: Next.js dashboard'ni ham qura oladi (SPA'ning ishini ham bajaradi), shuning uchun ko'pincha "shak bo'lsa Next.js" deyiladi — lekin oddiy internal tool uchun Vite yengilroq. To'g'ri tanlov — loyiha turiga bog'liq.

2.10. Next.js versiyalari (14/15)

text
  NEXT.JS VERSIYALARI (2026 joriy):
  - Next.js 13 — App Router joriy etildi (2022 — burilish nuqtasi)
  - Next.js 14 — App Router barqaror, Server Actions barqaror, Turbopack (tez build)
  - Next.js 15 — React 19 qo'llab-quvvatlash, kesh o'zgarishlari (default kam keshlash), async API

  MUHIM O'ZGARISHLAR (15):
  - React 19 (11.2: 2.11 — ref prop, use(), Actions)
  - Caching default — ANCHA KAM (ilgari ko'p keshlardi — 13.7 chuqur)
  - async cookies()/headers() (so'rov API'lari async)
  - Turbopack dev (tez dev server)

  ┌────────────────────────────────────────────────────────────┐
  │ Next.js 15 (joriy) — React 19, App Router, kesh sodda       │
  │ Bu QISM — App Router (13+), zamonaviy konsepsiyalar          │
  └────────────────────────────────────────────────────────────┘

   Next.js 15 (joriy) — React 19 + App Router; kesh default kamaydi (13.7)
   Bu QISM zamonaviy (App Router) konsepsiyalarga asoslangan (versiyadan qat'i nazar barqaror)

Next.js versiyalari — joriy holat va o'zgarishlar (2026). Versiyalar: Next.js 13 (2022 — App Router joriy etildi — burilish nuqtasi, eski Pages'dan yangi App'ga o'tish); Next.js 14 (App Router barqaror, Server Actions barqaror — 13.5, Turbopack — tez build); Next.js 15 (joriy — React 19 qo'llab-quvvatlash — 11.2: 2.11, kesh o'zgarishlari — default kam keshlash, async so'rov API). Muhim 15 o'zgarishlari: (1) React 19 (ref prop, use(), Actions — 11.2: 2.11); (2) caching default — ancha kam (ilgari Next.js ko'p narsani avtomatik keshlardi, bu chalkash edi; 15'da default kam — aniqroq — 13.7'da chuqur); (3) async cookies()/headers() (so'rov API'lari endi async); (4) Turbopack dev (tez dev server). Ikki nuqta: (1) Next.js 15 (joriy) — React 19 + App Router; kesh default kamaydi (soddaroq, bashoratli — 13.7); (2) bu QISM zamonaviy (App Router — 13+) konsepsiyalarga asoslangan — bu konsepsiyalar (Server Components, fayl-routing, rendering strategiyalari) versiyadan qat'i nazar barqaror (faqat ba'zi tafsilotlar — kesh — versiyaga qarab o'zgaradi). Demak bu QISM'ni o'rgansangiz, har Next.js versiyasida ishlay olasiz. Versiyalar tez chiqadi, lekin asosiy g'oyalar bir xil.

3. Sintaksis — tez ma'lumotnoma

text
YARATISH 2.5-bob:    npx create-next-app@latest my-app  (TS+ESLint+Tailwind+App Router)
ISHGA TUSHIRISH:   cd my-app; npm run dev  (localhost:3000)
SKRIPTLAR:         npm run dev | npm run build | npm start
ROUTING 2.6-bob:     app/products/page.tsx  /products  (fayl = yo'l — 13.2)
MAXSUS FAYLLAR:    page.tsx | layout.tsx | loading.tsx | error.tsx | not-found.tsx
RENDER 2.4-bob:      CSR (brauzer) | SSR (har so'rov) | SSG (build) | ISR (SSG+yangilanish)
ROUTER:            App Router (app/ — zamonaviy) vs Pages Router (pages/ — eski)
DEPLOY 2.8-bob:      Vercel (git push  live — 13.11)
QAROR 2.9-bob:       SEO/tezlik/full-stack  Next.js; dashboard/admin  SPA

4. Batafsil kod namunalari

Bu bobdan boshlab har misolda: maqsad (nima uchun) + kod (to'liq izohli) + "Bu kod nima qiladi" (qadam-baqadam tushuntirish).

Misol 1 — Birinchi sahifa (page.tsx — 2.6)

Maqsad: Next.js'da sahifa qanday yaratiladigan asosiy tuzilishni ko'rsatish. SPA'dagi <App /> + Router o'rniga, Next.js'da fayl o'zi sahifani belgilaydi — bu eng birinchi tushunish kerak bo'lgan farq.

tsx
// app/page.tsx — bu fayl avtomatik "/" (bosh sahifa) bo'ladi (fayl-routing — 13.2)
export default function HomePage() {
  // Bu — oddiy React komponent 11.2-bob. Next.js uni server'da render qiladi (default).
  return (
    <main>
      <h1>Xush kelibsiz</h1>
      <p>Bu — mening birinchi Next.js sahifam</p>
    </main>
  );
}

Bu kod nima qiladi: app/page.tsx fayli Next.js konvensiyasiga ko'ra avtomatik / (bosh sahifa) marshrutiga bog'lanadi — siz React Router'da <Route path="/" element={...} /> yozishing kerak emas 11.9-bob, faqat fayl yaratasiz. Komponent default export bo'lishi shart (Next.js shuni qidiradi). Bu komponent oddiy React (<h1>, <p>), lekin Next.js uni server'da render qiladi (default — Server Component — 13.3) — ya'ni server tayyor HTML (<h1>Xush kelibsiz</h1>) yaratib brauzerga yuboradi. Foydalanuvchi (va Google) darrov to'liq kontentni ko'radi (SPA'dagi bo'sh <div id="root"> — 2.1 — emas). Bu — Next.js'ning asosiy farqi: fayl = sahifa, va server'da render.

Misol 2 — Layout (har sahifani o'rovchi — 2.6)

Maqsad: layout.tsx ildiz layout'ining vazifasini ko'rsatish — u har sahifani <html>/<body> bilan o'raydi va umumiy elementlarni (navbar, footer) beradi (11.9 Outlet'dek, lekin Next.js usulida).

tsx
// app/layout.tsx — ildiz layout (BARCHA sahifani o'raydi — majburiy fayl)
import "./globals.css";   // global stillar (Tailwind) — bir marta bu yerda

export const metadata = {  // sahifa meta-ma'lumoti (SEO — title, description — 13.8)
  title: "Mening saytim",
  description: "Next.js bilan qurilgan sayt",
};

export default function RootLayout({
  children,                //  children — bu yerga sahifa (page.tsx) qo'yiladi (11.2: 2.8)
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="uz">       {/*  <html>/<body> — bu yerda (Next.js'da layout beradi) */}
      <body>
        <nav>Navbar (har sahifada ko'rinadi)</nav>
        {children}          {/*  bu yerga URL'ga mos sahifa render bo'ladi */}
        <footer>Footer (har sahifada)</footer>
      </body>
    </html>
  );
}

Bu kod nima qiladi: app/layout.tsx — ildiz layout (majburiy fayl): u butun ilovani o'raydi va <html>/<body> teglarini beradi (Next.js'da bularni layout beradi — SPA'dagi index.html o'rniga). children prop — eng muhim qism: bu yerga URL'ga mos sahifa (page.tsx) avtomatik joylashtiriladi (11.2: 2.8 children, 11.9 Outlet g'oyasi). Demak navbar va footer har sahifada ko'rinadi (bir marta yoziladi — layout'da), faqat {children} ichi URL'ga qarab o'zgaradi. metadata — sahifa meta-ma'lumoti (<title>, <meta name="description"> — SEO uchun — 13.8); Next.js uni avtomatik <head>ga qo'shadi. globals.css — global stillar bir marta bu yerda import qilinadi (har sahifada emas). Natijada: har sahifa bir xil layout (navbar/footer) bilan, faqat kontent o'zgaradi — DRY, izchil.

Misol 3 — Yangi sahifa qo'shish (fayl-routing — 2.6)

Maqsad: Next.js'da yangi sahifa qo'shish qancha oson ekanini ko'rsatish — faqat papka va fayl yaratasiz, routing avtomatik (React Router'dagi qo'lda <Route> qo'shish — 11.9 — kerak emas).

tsx
// app/products/page.tsx — bu fayl avtomatik "/products" bo'ladi (papka = yo'l)
export default function ProductsPage() {
  return (
    <main>
      <h1>Mahsulotlar</h1>
      <ul>
        <li>Mahsulot 1</li>
        <li>Mahsulot 2</li>
      </ul>
    </main>
  );
}

// app/about/page.tsx — bu fayl avtomatik "/about" bo'ladi
export default function AboutPage() {
  return <h1>Biz haqimizda</h1>;
}

Bu kod nima qiladi: Next.js'da papka strukturasi URL'ni belgilaydi (fayl-asosli routing — 13.2). app/products/page.tsx yaratsangiz — u avtomatik /products sahifasi bo'ladi; app/about/page.tsx — /about. Siz hech qanday routing kodi yozmaysiz (React Router'dagi <Routes>, <Route path="/products"> — 11.9 — yo'q) — faqat papka + page.tsx yaratasiz, Next.js qolganini qiladi. Bu — fayl-routing'ning go'zalligi: routing kodini qo'lda saqlash o'rniga, papka strukturasi o'zi "jonli xarita" (siz papkani ko'rib URL'ni bilasiz). Yangi sahifa = yangi papka + page.tsx (bir necha soniya). Bu naqsh keyingi bobda 13.2-bob dinamik yo'llar ([id]), nested layout va boshqalar bilan kengayadi.

Maqsad: Next.js'da sahifalar orasida o'tishni ko'rsatish — next/linkning <Link> komponenti (React Router'dagi <Link> — 11.9: 2.5 — bilan o'xshash, lekin Next.js'ning prefetch optimizatsiyasi bilan).

tsx
// app/page.tsx
import Link from "next/link";   //  next/link'dan (oddiy <a> emas — 11.9: 2.5)

export default function HomePage() {
  return (
    <nav>
      {/* <Link> — sahifani qayta yuklamay navigatsiya + prefetch (avtomatik) */}
      <Link href="/products">Mahsulotlar</Link>
      <Link href="/about">Biz haqimizda</Link>
    </nav>
  );
}

Bu kod nima qiladi: <Link href="/products"> — Next.js'ning navigatsiya komponenti (next/link'dan). U React Router'ning <Link>'iga (11.9: 2.5) o'xshaydi — sahifani qayta yuklamay (client-side) o'tadi (oddiy <a href> — sahifani to'liq qayta yuklaydi — SPA buziladi). Lekin Next.js'ning <Link>'i qo'shimcha narsani qiladi — avtomatik prefetch: foydalanuvchining ko'rinish maydoniga (viewport) <Link> kirganda, Next.js o'sha sahifani oldindan fonda yuklaydi (11.8: 2.10 prefetch) — natijada foydalanuvchi bosganda sahifa darrov ochiladi (kechikishsiz). Bu — qo'lda qilinishi kerak bo'lgan optimizatsiya 11.8-bob Next.js'da avtomatik. Eslatma: ilova ichida doim <Link> ishlating (oddiy <a> faqat tashqi saytlarga — 11.9: 2.5).

Misol 5 — Server Component'da ma'lumot olish (oddiy — 13.3/13.5 ko'rinishi)

Maqsad: Next.js'ning eng kuchli, eng "sehrli" qismini ko'rsatish — Server Component'da ma'lumotni to'g'ridan (useEffect/useState/loading bo'lmasdan) olish. Bu 11.5'dagi butun fetch og'rig'ini yo'qotadi.

tsx
// app/products/page.tsx — Server Component (default — server'da ishlaydi)
//  Komponent "async" — server'da to'g'ridan await qila oladi (13.5)
export default async function ProductsPage() {
  // Server'da to'g'ridan fetch (yoki DB'dan) — useEffect/useState/loading YO'Q 13.3-bob:
  const res = await fetch("https://api.example.com/products");  // server'da ishlaydi
  const products = await res.json();                            // ma'lumot tayyor

  // JSX — ma'lumot bilan to'g'ridan (loading holati kerak emas — server kutdi):
  return (
    <ul>
      {products.map((p: { id: string; name: string }) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

Bu kod nima qiladi: Bu — Next.js App Router'ning eng inqilobiy qismi. Komponent async (asinxron) — bu SPA React'da mumkin emas edi (komponent async bo'la olmas edi — shuning uchun useEffect+useState+loading kerak edi — 11.5). Next.js Server Component'da esa komponent server'da ishlaydi, shuning uchun to'g'ridan await fetch(...) qila oladi — server ma'lumotni olguncha "kutadi", keyin tayyor ma'lumot bilan HTML render qiladi. Natijada: useEffect yo'q, useState yo'q, isLoading yo'q, race condition yo'q (11.5'dagi butun og'riq yo'qoladi) — faqat const products = await fetch(...) va to'g'ridan .map(). Va fetch server'da ishlaydi (brauzerda emas) — shuning uchun API kalitlarini xavfsiz ishlata olasiz (brauzerga chiqmaydi — 10.11), va ma'lumot HTML ichida keladi (SEO — Google ko'radi). Bu — 13.3 va 13.5'da chuqur ochiladi, lekin bu yerda asosiy "wow" momentni ko'rasiz: server'da ma'lumot = soddaroq + tezroq + xavfsizroq + SEO.

Misol 6 — Client Component (interaktivlik — 13.3 ko'rinishi)

Maqsad: Server Component'ning ziddini — Client Component'ni — ko'rsatish. Interaktivlik (state, hodisa, hook) kerak bo'lganda "use client" direktivasi ishlatiladi. Bu Next.js'dagi eng muhim chegara.

tsx
// app/components/Counter.tsx
"use client";   //  MUHIM: bu direktiva komponentni CLIENT (brauzer) qiladi (13.3)

import { useState } from "react";   // hook — faqat client'da ishlaydi

export default function Counter() {
  // useState — interaktiv holat (faqat client komponentda — server'da yo'q):
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>   {/* onClick — interaktivlik */}
      Bosildi: {count}
    </button>
  );
}

Bu kod nima qiladi: Default Next.js komponentlari server'da render bo'ladi (Server Component — Misol 5), va server'da interaktivlik yo'q (state, hodisa, hook — useState, onClick — ishlamaydi, chunki server brauzer emas). Agar komponentga interaktivlik kerak bo'lsa (tugma bosish, state, forma), uni Client Component qilishing kerak — faylning eng tepasiga "use client" direktivasini yozasiz. Bu Next.js'ga "bu komponent (va u import qilgan narsalar) brauzerda ishlasin" deydi. Endi useState, onClick ishlaydi 11.4-bob. Bu — Next.js'dagi eng muhim, eng ko'p chalkashtiriladigan chegara (13.3'da chuqur): default server (tez, SEO, ma'lumot) — "use client" bilan client (interaktivlik). To'g'ri strategiya — ko'p qism Server Component (statik kontent), faqat interaktiv "barglar" (tugma, forma) Client Component ("use client"). Bu — Next.js'ning "server-first" falsafasi 2.2-bob.

Misol 7 — loading.tsx (yuklanish UI — 2.6)

Maqsad: Next.js'ning maxsus loading.tsx faylini ko'rsatish — u Server Component ma'lumot yuklayotgan paytda avtomatik ko'rsatiladi (11.8 Suspense'ni Next.js avtomatik qiladi).

tsx
// app/products/loading.tsx — bu fayl /products yuklanayotganda AVTOMATIK ko'rinadi
export default function Loading() {
  // Bu UI ProductsPage (Misol 5) ma'lumot olayotgan paytda ko'rsatiladi:
  return <div className="skeleton">Mahsulotlar yuklanmoqda...</div>;
}

Bu kod nima qiladi: loading.tsx — Next.js konvensiyasi (maxsus fayl — 2.6). Agar bir papkada loading.tsx bo'lsa, Next.js o'sha papkadagi page.tsx (Server Component — Misol 5) ma'lumot olayotgan (await fetch) paytda avtomatik shu Loading komponentini ko'rsatadi, ma'lumot tayyor bo'lganda page.tsxni ko'rsatadi. Bu — 11.8'dagi <Suspense fallback={...}>ni avtomatik qiladi (siz qo'lda Suspense o'rash kerak emas — faqat loading.tsx fayl yaratasiz). Ya'ni Misol 5'dagi ProductsPage server'da ma'lumot olayotganda, foydalanuvchi loading.tsxni ko'radi (oq ekran emas — yaxshi UX), keyin to'liq sahifani. Bu — fayl konvensiyasining kuchi: maxsus fayl nomi (loading) bilan butun bir imkoniyat (Suspense) avtomatik yoqiladi. Xuddi shunday error.tsx (xato — error boundary — 11.12) va not-found.tsx (404) ham bor.

Misol 8 — next.config va asosiy sozlama (2.6)

Maqsad: Next.js sozlama faylining vazifasini ko'rsatish — bu yerda ilova darajasidagi sozlamalar (rasm domenlari, redirect, env) belgilanadi.

js
// next.config.js — Next.js ilova sozlamasi
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Tashqi rasm domenlari (next/image xavfsizlik uchun ruxsat so'raydi — 13.10):
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "images.example.com" },   // bu domendan rasm OK
    ],
  },
  // Redirect (eski URL  yangi):
  async redirects() {
    return [{ source: "/old-page", destination: "/new-page", permanent: true }];
  },
};

module.exports = nextConfig;

Bu kod nima qiladi: next.config.js — Next.js ilovasining markaziy sozlama fayli (Vite'ning vite.configiga o'xshaydi — 11.3). Bu yerda ilova darajasidagi sozlamalar belgilanadi. Misolda ikki sozlama: (1) images.remotePatterns — next/image komponenti (13.10 — rasm optimizatsiyasi) xavfsizlik uchun faqat ruxsat etilgan domenlardan rasm yuklaydi; bu yerda images.example.comni ruxsat etamiz (aks holda Next.js o'sha domendan rasm yuklashni rad etadi — xavfsizlik). (2) redirects() — eski URL'ni yangisiga yo'naltirish (/old-page /new-page — permanent: true — 301 redirect, SEO uchun). next.config.js boshqa ko'p narsani ham sozlaydi (webpack, env, headers, rewrites). Bu — ilova xulqini markazdan boshqarish (har sahifada emas, bitta joyda). Eslatma: @type izohi — TypeScript autocomplete uchun (sozlama xususiyatlarini taklif qiladi).

Misol 9 — Statik fayl (public papka — 2.6)

Maqsad: public/ papkasining ishlatilishini ko'rsatish — statik fayllar (rasm, favicon, robots.txt) qanday joylashtiriladi va URL'da ishlatiladi.

tsx
// public/ papkasiga fayl qo'yiladi: public/logo.png, public/favicon.ico
//  URL'da to'g'ridan: /logo.png, /favicon.ico (public/ prefiksisiz)

// app/page.tsx — public faylni ishlatish:
import Image from "next/image";   // Next.js rasm komponenti (optimizatsiya — 13.10)

export default function HomePage() {
  return (
    <header>
      {/* public/logo.png  src="/logo.png" (public/ yozilmaydi) */}
      <Image src="/logo.png" alt="Logo" width={120} height={40} />
    </header>
  );
}

Bu kod nima qiladi: public/ papka — Next.js'dagi statik fayllar joyi (Vite'ning public/iga o'xshaydi — 11.3: 2.3). Bu papkaga qo'yilgan fayllar (rasm, favicon, robots.txt, sitemap.xml) to'g'ridan URL orqali ishlatiladi — public/ prefiksisiz: public/logo.png /logo.png, public/favicon.ico /favicon.ico. Misolda <Image src="/logo.png"> — public/logo.png fayliga ishora qiladi (src="/public/logo.png" emas — Next.js public/ni avtomatik ildiz deb biladi). next/image komponenti (<Image>) — Next.js'ning rasm optimizatsiyasi (13.10 chuqur): u rasmni avtomatik to'g'ri o'lcham va formatda (WebP) yuklaydi, lazy load qiladi, va layout shift'ning oldini oladi (width/height majburiy — joy zaxiralash uchun). Demak public/ — o'zgarmaydigan statik fayllar; next/image — ularni optimal ko'rsatish. Bu — Next.js'ning built-in optimizatsiyasining bir qismi.

Misol 10 — Server + Client birga (kompozitsiya — 13.3 ko'rinishi)

Maqsad: Server Component ichida Client Component ishlatishni ko'rsatish — bu Next.js'ning asosiy naqshi (ko'p server + oz interaktiv client). Bu eng muhim amaliy naqsh.

tsx
// app/products/page.tsx — SERVER Component (ma'lumot, statik)
import Counter from "../components/Counter";   // Client Component (Misol 6)

export default async function ProductsPage() {
  const res = await fetch("https://api.example.com/products");   // server'da ma'lumot
  const products = await res.json();

  return (
    <main>
      <h1>Mahsulotlar</h1>                {/* server — statik, SEO */}
      <ul>
        {products.map((p: { id: string; name: string }) => (
          <li key={p.id}>{p.name}</li>     {/* server — ma'lumot */}
        ))}
      </ul>
      <Counter />                          {/*  Client Component (interaktiv) — server ichida */}
    </main>
  );
}

Bu kod nima qiladi: Bu — Next.js'ning eng muhim amaliy naqshi (server-first arxitektura). ProductsPage — Server Component (ma'lumot oladi, statik kontent render qiladi — SEO, tez). Uning ichida <Counter /> — Client Component ("use client" — interaktiv tugma — Misol 6). Ya'ni: sahifaning katta qismi (sarlavha, mahsulotlar ro'yxati) server'da render bo'ladi (ma'lumot, SEO, tez), faqat kichik interaktiv qism (Counter — tugma) client'da. Bu — to'g'ri Next.js strategiyasi: default hamma narsa Server Component (tez, SEO, ma'lumot), faqat interaktivlik kerak bo'lgan "barglar" (tugma, forma, modal) Client Component ("use client"). Server Component client'ni import qila oladi (server ichida client), lekin teskari emas (client server'ni to'g'ridan import qila olmaydi — ma'lumotni props orqali oladi — 13.3). Bu naqsh — minimal JavaScript brauzerga (faqat interaktiv qismlar), maksimal server render (tez, SEO). 13.3'da bu chuqur ochiladi.

5. To'g'ri va noto'g'ri holatlar

1) Loyiha turiga mos

text
 login-ortida oddiy dashboardga Next.js majburlash (SSR foydasiz, murakkablik)
 SEO/ommaviy  Next.js; internal dashboard  SPA yetadi (2.9)

2) Router tanlovi

text
 yangi loyihada Pages Router (eski — 2.7)
 App Router (zamonaviy — Server Components, soddaroq)

3) Navigatsiya

text
 <a href="/products">  (sahifani qayta yuklaydi — 11.9: 2.5)
 <Link href="/products">  (client-side + prefetch — Misol 4)

4) Interaktivlik

text
 Server Component'da useState/onClick  (server'da hook yo'q — Misol 6)
 "use client" direktivasi (interaktiv komponent)

5) Rasm

text
 oddiy <img src="...">  (optimizatsiya yo'q — sekin)
 next/image <Image>  (avtomatik optimizatsiya — Misol 9, 13.10)

6) Ma'lumot olish

text
 Server Component'da useEffect+fetch (server'da useEffect yo'q)
 async komponent + await fetch (to'g'ridan — Misol 5, 13.5)

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — You're importing a component that needs useState. It only works in a Client Component

Sababi: Server Component'da hook (useState/useEffect) ishlatildi (Misol 6). Yechimi: faylning tepasiga "use client" direktivasi (interaktiv komponent — 13.3).

Xato 2 — Sahifa topilmaydi (404)

Sababi: fayl nomi page.tsx emas, yoki papka noto'g'ri 2.6-bob. Yechimi: app/yo'l/page.tsx (aniq page.tsx); default export bo'lsin.

Xato 3 — <a> sahifani to'liq qayta yuklaydi (sekin)

Sababi: oddiy <a href> ishlatildi (11.9: 2.5). Yechimi: import Link from "next/link" va <Link href> (Misol 4).

Xato 4 — Tashqi rasm yuklanmaydi (next/image)

Sababi: domen next.configda ruxsat etilmagan (Misol 8). Yechimi: images.remotePatternsga domenni qo'shing 13.10-bob.

Xato 5 — metadata ishlamaydi (Client Component'da)

Sababi: metadata faqat Server Component'da (layout/page) ishlaydi 13.8-bob. Yechimi: metadatani server komponentda export qiling ("use client" faylda emas).

Xato 6 — Env o'zgaruvchi brauzerda undefined

Sababi: server env brauzerga chiqmaydi (Vite'ning VITE_ — 11.3: 2.10 kabi). Yechimi: brauzer uchun NEXT_PUBLIC_ prefiksi (NEXT_PUBLIC_API_URL — 13.5).

Xato 7 — Hydration xatosi (Hydration failed)

Sababi: server va client render farq qiladi (masalan Date.now(), window — server'da yo'q). Yechimi: server/client mos kelsin; brauzer-only kod useEffectda yoki "use client" 13.3-bob.

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

  • React (11-QISM): Next.js React ustiga (komponent/hook bir xil — 2.2).
  • SPA 11.3-bob: Next.js SPA cheklovlarini (SEO/yuk) hal qiladi 2.1-bob.
  • Routing 11.9-bob: fayl-routing — React Router'ning Next.js usuli 13.2-bob.
  • State (12-QISM): Zustand/Context — client state; Server Components — server ma'lumot.
  • Tailwind/shadcn 12.6-bob: Next.js bilan zamonaviy stack 2.8-bob.
  • Deploy (10-QISM, 13.11): Vercel (yoki Docker — 10.3).
  • TypeScript 11.14-bob: create-next-app TS bilan.
  • SEO 13.8-bob: server render — qidiruv indekslash.

8. Eng yaxshi amaliyotlar (best practices)

  • App Router ishlating (zamonaviy — Server Components — 2.7).
  • Server-first (default Server Component; faqat interaktiv "use client" — 2.2, Misol 10).
  • <Link> navigatsiyaga (oddiy <a> emas — prefetch — Misol 4).
  • next/image rasmga (avtomatik optimizatsiya — Misol 9, 13.10).
  • Fayl konvensiyasiga rioya (page/layout/loading/error — 2.6).
  • Loyiha turiga mos tanlang (SEO/ommaviy Next.js; internal SPA — 2.9).
  • Server'da ma'lumot (async komponent — useEffect emas — Misol 5, 13.5).
  • NEXT_PUBLIC_ brauzer env (Xato 6).
  • create-next-app default (TS+ESLint+Tailwind — 2.5).
  • Tailwind + shadcn + Prisma + NextAuth (zamonaviy Next stack — 2.8).

9. Amaliy loyiha: "Birinchi Next.js Sayti"

Next.js asoslarini — fayl-routing, layout, server/client — real, kichik saytda mustahkamlash.

Maqsad

create-next-app bilan Next.js loyiha yarating va bir necha sahifali sayt quring: bosh, mahsulotlar (server ma'lumot), about, interaktiv komponent.

Talablar (requirements)

  1. Setup: create-next-app (TS+Tailwind+App Router — 2.5).
  2. Sahifalar: bosh (/), mahsulotlar (/products), about (/about) — fayl-routing (Misol 1, 3).
  3. Layout: navbar + footer har sahifada (layout.tsx — Misol 2).
  4. Navigatsiya: <Link> bilan sahifalar orasida (Misol 4).
  5. Server ma'lumot: mahsulotlar sahifasi API'dan (async komponent — Misol 5).
  6. loading.tsx: mahsulotlar yuklanishda (Misol 7).
  7. Client Component: interaktiv (counter/toggle — "use client" — Misol 6).
  8. Server + client: server sahifa ichida client komponent (Misol 10).
  9. Image: next/image bilan logo/rasm (Misol 9).
  10. Metadata: har sahifaga title/description (Misol 2, 13.8).

Maslahatlar (hint)

  • App Router tanlang (app/ papka — 2.7).
  • Server Component default; interaktivlik "use client" (Xato 1).
  • <Link> ishlating (oddiy <a> emas — Misol 4).
  • Server'da ma'lumot — async komponent (useEffect emas — Misol 5).
  • Tashqi rasm next.config domen (Misol 8, Xato 4).
  • npm run build bilan tekshiring (production xato yo'qmi).

"Tayyor" mezonlari (acceptance criteria)

  • Next.js loyiha ishga tushadi (npm run dev).
  • 3+ sahifa (fayl-routing).
  • Layout (navbar/footer har sahifada).
  • <Link> navigatsiya (prefetch).
  • Server ma'lumot (async komponent).
  • loading.tsx ishlaydi.
  • Client Component (interaktiv).
  • Server + client kompozitsiya.
  • next/image (optimal rasm).
  • Metadata (SEO).

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda Next.js'ga kirdik:

  • SPA cheklovi (SEO/yuk — 2.1); Next.js nima (React framework — 2.2); hal qiladigan muammolar 2.3-bob; rendering strategiyalari (CSR/SSR/SSG/ISR — 2.4).
  • Setup (create-next-app — 2.5); tuzilish (app/public/config — 2.6); App vs Pages Router 2.7-bob; ekotizim/Vercel 2.8-bob.
  • Qachon Next.js vs SPA 2.9-bob; versiyalar (14/15 — 2.10).

Endi siz Next.js'ning nima ekanini, nega SPA'dan afzalligini (SEO, tezlik, full-stack), va asosiy tuzilishini (fayl-routing, server/client, layout) bilasiz. Birinchi misollarda server'da ma'lumot olish va server/client ajratishning "sehrini" ko'rdingiz.

Keyingi bob — 13.2-bob: App Router va file-based routing. Routing'ni chuqur o'rganamiz: fayl-asosli yo'llar (page/layout), dinamik segmentlar ([id], [...slug]), nested layouts (ko'p qatlamli layout — har bo'lim o'z layout'i), route groups ((group) — URL'siz guruhlash), parallel/intercepting routes (ilg'or), navigatsiya (<Link>, useRouter, redirect), va loading/error/not-found konvensiyalari. Bu — Next.js ilovasining skeletini tashkil qiladi (React Router'ning — 11.9 — Next.js usuli, ancha kuchliroq).

Foydalanilgan rasmiy/ishonchli manbalar

  • Next.js rasmiy hujjati (nextjs.org/docs) — "Getting Started", "App Router", "Project Structure", "Rendering"
  • nextjs.org — create-next-app, file conventions (page/layout/loading), Server/Client Components
  • Next.js 15 release notes (nextjs.org/blog) — React 19, caching changes, async request APIs
  • Vercel (vercel.com) — Next.js deployment; React docs — "Start a New React Project" (framework tavsiyasi)

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
13.1-bob: Next.js kirish — nega Next — Wisar