WisarWisar
Dasturlash kitobi/13-QISM — NextJS35 daqiqa

13.11-bob: Next.js — Yakuniy loyiha va amaliyot

13-QISM — Next.js · 11-mavzu (yakuniy)

1. Kirish va motivatsiya

13-QISM davomida biz Next.js'ni bo'lak-bo'lak o'rgandik: App Router 13.2-bob, Server/Client Components 13.3-bob, rendering 13.4-bob, data fetching va Server Actions 13.5-bob, Route Handlers va Middleware 13.6-bob, caching va performance 13.7-bob, SEO 13.8-bob, autentifikatsiya 13.9-bob, va deploy 13.10-bob. Har bob alohida — bir mavzu, bir to'plam misol. Lekin haqiqiy dasturchi bo'lish — bu alohida tushunchalarni bilish emas, balki ularni birga, bir to'liq, real loyihada ishlata olish. Bu bob — aynan shu: 13-QISMning barcha bilimini bitta to'liq full-stack ilovada birlashtirish.

Nega capstone (yakuniy) loyiha muhim? Chunki real ishda hech kim sizdan "Server Component nima?" deb so'ramaydi — sizdan ishlaydigan mahsulot kutishadi (e-commerce, blog platformasi, SaaS). Va o'shanda barcha bo'lak birga keladi: foydalanuvchi login qiladi 13.9-bob, mahsulot ko'radi (Server Component — 13.3, ISR — 13.4), savatga qo'shadi (Server Action — 13.5), qidiruv ishlaydi (Route Handler — 13.6), sahifa tez (kesh, image — 13.7), Google'da topiladi (SEO — 13.8), va hammasi production'da 13.10-bob. Bu bob bularni qanday birlashtirishni ko'rsatadi (arxitektura, reja, ulanishlar), keyin sizga o'z capstone loyihangizni topshiradi (o'zingiz qurasiz — portfelingiz uchun).

Bu bob boshqa boblardan biroz farq qiladi (yakuniy, loyiha-asosli): arxitektura va rejalashtirish, funksiyalarni boblarga moslash (qaysi xususiyat qaysi bobda), ulanishlar (bo'laklar qanday birlashadi — "glue" kod), texnologiya tanlovi (qaysi state, qaysi rendering — qaror), va eng asosiy — to'liq capstone loyiha topshirig'i (e-commerce, blog, yoki o'z g'oyangiz — g'oyadan deploy'gacha). Bu — 13-QISMning amaliy cho'qqisi va sizning professional portfelingizning birinchi jiddiy loyihasi.

O'xshatish: Bu bob — bu orkestr dirijyorligi. Siz har cholg'uni alohida o'rgandingiz: skripka (Server Components), nay (Server Actions), baraban (rendering), arfa (SEO), truba (auth) — har biri alohida chiroyli ovoz. Lekin simfoniya — bu cholg'ularni alohida chalish emas, balki ularni birga, uyg'un ijro etish (dirijyor boshqaruvida). Capstone loyiha — sizning birinchi simfoniyangiz: barcha cholg'u (bob) o'z vaqtida, o'z o'rnida, bir-biriga mos kelib, bir asar (ishlaydigan ilova) yaratadi. Alohida cholg'uni bilish — boshlanish; ularni uyg'un birlashtirish — mahorat. Va bu mahorat faqat mashq (real loyiha qurish) bilan keladi — nazariya o'qish emas, balki o'z qo'lingiz bilan to'liq ilova qurish.

Nega muhim?

  • Bilimni birlashtirish — alohida tushunchalar (13.1-13.10) faqat birga, real loyihada haqiqiy kuch beradi.
  • Portfel — capstone loyiha — sizning ko'nikmangizning isboti (ish topishda — kod ko'rsatasiz, gapirmaysiz).
  • Real tajriba — to'liq loyiha qurish (g'oya reja kod deploy) — bootcamp bermaydigan amaliyot.
  • Ishonch — to'liq ilova qurib ko'rish — "men buni qila olaman" ishonchi (eng muhim).

2. Nazariya — chuqur tushuntirish

2.1. Loyiha rejalashtirish (g'oyadan arxitekturaga)

text
  LOYIHA REJALASHTIRISH — kod yozishdan OLDIN o'yla (eng muhim bosqich):

  1. G'OYA (nima quramiz?):
   "Onlayn kitob do'koni" (e-commerce) yoki "Blog platformasi" yoki o'z g'oyangiz

  2. FUNKSIYALAR (foydalanuvchi nima qila oladi? — user stories):
   "Foydalanuvchi kitob qidira oladi"
   "Foydalanuvchi savatga qo'sha oladi"
   "Foydalanuvchi buyurtma bera oladi"
   "Admin kitob qo'sha oladi"

  3. MA'LUMOT MODELI (qanday ma'lumotlar? — DB sxema):
   User, Product, Order, Category, Review (jadvallar va bog'lanishlar — 6-QISM)

  4. SAHIFALAR (qaysi yo'llar? — routing):
   /, /products, /products/[id], /cart, /checkout, /dashboard, /admin

  5. TEXNOLOGIYA (qaysi vosita? — har funksiya uchun):
   rendering, state, auth — har biri mos tanlanadi (2.4)

   Rejalashtirish kod'dan OLDIN (g'oya  funksiya  ma'lumot  sahifa  texnologiya)
   "Nima quramiz va qanday?" — aniq bo'lsa, kod oson; aniq bo'lmasa — chalkashlik

Loyiha rejalashtirish (g'oyadan arxitekturaga) — kod yozishdan oldingi eng muhim bosqich. Yangi dasturchilar ko'pincha to'g'ridan kod yozishga o'tishadi (reja'siz) — bu chalkashlikka olib keladi (yarim yo'lda "bu qanday bo'lishi kerak edi?" degan savol). Professional yondashuv — avval rejalashtirish (5 qadam): (1) g'oya — nima quramiz? ("Onlayn kitob do'koni", "Blog platformasi", yoki o'z g'oyangiz — aniq, bitta jumla); (2) funksiyalar — foydalanuvchi nima qila oladi? (user stories — "Foydalanuvchi kitob qidira oladi", "savatga qo'shadi", "buyurtma beradi", "Admin kitob qo'shadi" — har bir imkoniyat); (3) ma'lumot modeli — qanday ma'lumotlar? (DB sxema — User, Product, Order, Category, Review — jadvallar va bog'lanishlar — 6-QISM); (4) sahifalar — qaysi yo'llar? (routing — /, /products, /products/[id], /cart, /checkout, /dashboard, /admin — 13.2); (5) texnologiya — har funksiya uchun qaysi vosita? (rendering, state, auth — mos tanlanadi — 2.4). Ikki nuqta: (1) rejalashtirish kod'dan oldin (g'oya funksiya ma'lumot sahifa texnologiya — yo'l xaritasi); (2) "nima quramiz va qanday?" aniq bo'lsa — kod oson (har qadam ma'lum); aniq bo'lmasa — chalkashlik (yo'l-yo'lakay qayta yozish). Bu — har real loyihaning boshlanishi (rejalashtirish — soatlarni tejaydi, kun emas). Capstone loyihangizni ham shundan boshlaysiz: g'oya, funksiyalar (ro'yxat), ma'lumot modeli (sxema), sahifalar (routing), texnologiya (har biri uchun). Reja — kod'ning "loyiha chizmasi" (binoni qurishdan oldin chizma — aks holda devor noto'g'ri joyda).

2.2. Full-stack arxitektura (qatlamlar)

text
  FULL-STACK NEXT.JS ARXITEKTURA — qatlamlar (har biri o'z vazifasi):

  ┌─────────────────────────────────────────────────────────────┐
  │ 1. UI QATLAMI (sahifalar, komponentlar — 13.2, 13.3)         │
  │    Server/Client Components + Tailwind/shadcn stil (12-QISM)  │
  ├─────────────────────────────────────────────────────────────┤
  │ 2. RENDERING QATLAMI 13.4-bob                                  │
  │    SSG (marketing) + ISR (mahsulot) + SSR (feed) + CSR (admin)│
  ├─────────────────────────────────────────────────────────────┤
  │ 3. MANTIQ QATLAMI (13.5, 13.6)                              │
  │    Server Actions (mutation) + Route Handlers (API/webhook)  │
  ├─────────────────────────────────────────────────────────────┤
  │ 4. XAVFSIZLIK QATLAMI (13.9, 13.6)                          │
  │    Auth (Auth.js) + Middleware (himoya) + avtorizatsiya      │
  ├─────────────────────────────────────────────────────────────┤
  │ 5. MA'LUMOT QATLAMI (6-QISM)                                │
  │    DB (PostgreSQL) + ORM (Prisma) — User, Product, Order     │
  ├─────────────────────────────────────────────────────────────┤
  │ 6. INFRA QATLAMI (13.7, 13.8, 13.10)                       │
  │    Kesh + SEO + Deploy (Vercel/Docker) + Monitoring          │
  └─────────────────────────────────────────────────────────────┘

   Full-stack — qatlamlar (UI  rendering  mantiq  xavfsizlik  ma'lumot  infra)
   Har qatlam o'z vazifasi; birga — to'liq ilova (har bob — bir qatlam qismi)

Full-stack arxitektura (qatlamlar) — to'liq ilova qanday tuziladi. Next.js full-stack ilova qatlamlardan iborat (har biri o'z vazifasi, birga — to'liq tizim): (1) UI qatlami (13.2, 13.3) — sahifalar va komponentlar (Server Components — kontent, ma'lumot; Client Components — interaktiv); (2) rendering qatlami 13.4-bob — har sahifa mos strategiya (SSG — marketing, ISR — mahsulot, SSR — feed, CSR — admin); (3) mantiq qatlami (13.5, 13.6) — Server Actions (mutation — forma, yaratish/o'zgartirish) va Route Handlers (API/webhook — tashqi mijoz); (4) xavfsizlik qatlami (13.9, 13.6) — auth (Auth.js — login), middleware (himoya), avtorizatsiya (rol); (5) ma'lumot qatlami (6-QISM) — DB (PostgreSQL) + ORM (Prisma) — User, Product, Order jadvallari; (6) infra qatlami (13.7, 13.8, 13.10) — kesh, SEO, deploy, monitoring. Ikki nuqta: (1) full-stack — qatlamlar (UI rendering mantiq xavfsizlik ma'lumot infra — yuqoridan pastga); (2) har qatlam o'z vazifasi (UI — ko'rinish, mantiq — amal, ma'lumot — saqlash), birga — to'liq ilova (har bob — bir qatlamning qismi — 13-QISM bularni o'rgatdi). Bu arxitektura — capstone loyihangizning "skeleti" (har qatlamni to'ldirasiz). Misol: mahsulot sahifasi — UI (Server Component — 13.3), rendering (ISR — 13.4), ma'lumot (Prisma — 6-QISM), xavfsizlik (public — auth kerak emas), infra (kesh, SEO — 13.7, 13.8). Har funksiya bu qatlamlardan o'tadi. Bu — full-stack tafakkur (bir xususiyat — bir necha qatlam — UI'dan DB'gacha). 13-QISM bu qatlamlarni alohida o'rgatdi; capstone — birga qurish.

2.3. Funksiyalarni boblarga moslash (xarita)

text
  HAR FUNKSIYA — QAYSI BOB (capstone — barcha bobni ishlatadi):

  ┌──────────────────────────────┬─────────────────────────────┐
  │ Funksiya                     │ Qaysi bob (qanday)          │
  ├──────────────────────────────┼─────────────────────────────┤
  │ Sahifalar, routing           │ 13.2 (App Router)           │
  │ Mahsulot ko'rsatish          │ 13.3 (Server Component) + DB│
  │ Mahsulot sahifa tezligi      │ 13.4 (ISR) + 13.7 (kesh)    │
  │ Savatga qo'shish, buyurtma   │ 13.5 (Server Actions)       │
  │ Qidiruv, mobil API           │ 13.6 (Route Handlers)       │
  │ Login, ro'yxat, rollar       │ 13.9 (Auth.js)              │
  │ Himoyalangan sahifalar       │ 13.6 (Middleware) + 13.9    │
  │ Rasm, shrift, tezlik         │ 13.7 (next/image, font)     │
  │ Google'da topilish           │ 13.8 (SEO, metadata)        │
  │ Production'ga chiqarish       │ 13.10 (Deploy, monitoring)  │
  └──────────────────────────────┴─────────────────────────────┘

   Capstone — BARCHA bobni ishlatadi (har funksiya bir necha bob — birga)
   Funksiya  bob xaritasi (qurishda qaysi bobga qaytishni bilasiz)

Funksiyalarni boblarga moslash (xarita) — capstone har bobni qanday ishlatadi. Capstone loyiha — barcha 13-QISM bobni birlashtiradi (har funksiya bir necha bobni talab qiladi). Xarita: sahifalar/routing 13.2 (App Router); mahsulot ko'rsatish 13.3 (Server Component) + DB (6-QISM); mahsulot sahifa tezligi 13.4 (ISR) + 13.7 (kesh, image); savatga qo'shish/buyurtma 13.5 (Server Actions); qidiruv/mobil API 13.6 (Route Handlers); login/ro'yxat/rollar 13.9 (Auth.js); himoyalangan sahifalar 13.6 (Middleware) + 13.9 (auth); rasm/shrift/tezlik 13.7; Google'da toplish 13.8 (SEO); production'ga chiqarish 13.10 (Deploy). Ikki nuqta: (1) capstone — barcha bobni ishlatadi (har funksiya bir necha bob — masalan mahsulot sahifa: 13.2 routing + 13.3 Server Component + 13.4 ISR + 13.7 kesh/image + 13.8 SEO — birga); (2) funksiya bob xaritasi (qurishda "bu qanday edi?" — mos bobga qaytasiz — bu kitob sizning ma'lumotnomingiz). Bu xarita — capstone qurishning yo'l ko'rsatkichi (har funksiyani qurganda qaysi bob bilimini ishlatishni bilasiz). Demak capstone — 13-QISMning "imtihoni" (har bobni real loyihada qo'llash). Agar biror funksiyani qurolmasangiz — mos bobga qaytib (masalan Server Actions unutilgan bo'lsa — 13.5), qayta o'qib, qo'llaysiz. Bu — o'rganish + amaliyot sikli (o'qish qo'llash mustahkamlash). Capstone — barcha bilimni bir joyda sinash (va mustahkamlash).

2.4. Texnologiya tanlovi (qarorlar)

text
  TEXNOLOGIYA QARORLARI — har qism uchun MOS tanlov (capstone'da):

  RENDERING (13.4 — har sahifa):
   Bosh/marketing: SSG (statik — tez)
   Mahsulot: ISR (revalidate — narx yangilanadi)
   Foydalanuvchi buyurtmalari: SSR (har so'rovda yangi)
   Admin dashboard: CSR (interaktiv, login ortida)

  STATE (12-QISM — qaysi holat):
   Server ma'lumot (mahsulot, buyurtma): Server Components 13.3-bob — server'da
   Server state kesh (agar client kerak): TanStack Query 12.4-bob
   Client state (savat — agar client): Zustand 12.5-bob yoki Server Action 13.5-bob
   Forma: React Hook Form + Zod 11.10-bob yoki Server Action 13.5-bob

  UI / STIL (12-QISM — ko'rinish):
   Stil: Tailwind CSS (utility-first — tez, izchil dizayn tizimi)
   Komponent: shadcn/ui (tayyor, ochiq komponentlar — button, dialog, form)
   Ikonka/tema: lucide + dark mode (professional ko'rinish)

  TEST (11.17 — sifat):
   E2E: Playwright (asosiy oqim — login  savat  buyurtma — brauzerda)
   Unit: Vitest (Server Action mantiqi — validatsiya, avtorizatsiya)

  AUTH 13.9-bob:
   OAuth (Google) + Credentials (email/parol); rollar (admin/user)

  DB (6-QISM):
   PostgreSQL + Prisma (relyatsion — User/Product/Order bog'lanishlar)

   Har qism uchun MOS texnologiya (rendering/state/auth/DB — funksiyaga qarab)
   Bitta to'g'ri javob yo'q — kontekstga mos (capstone'da ongli tanlov)

Texnologiya tanlovi (qarorlar) — har qism uchun mos vositani tanlash. Capstone'da har funksiya uchun ongli texnologiya tanlanadi (bir xil narsani hamma joyda emas — kontekstga mos): (1) rendering (13.4 — har sahifa): bosh/marketing SSG (statik — o'zgarmas, eng tez); mahsulot ISR (revalidate — narx vaqti-vaqti yangilanadi); foydalanuvchi buyurtmalari SSR (har so'rovda yangi — shaxsiy); admin dashboard CSR (interaktiv, login ortida — SEO kerak emas); (2) state (12-QISM): server ma'lumot (mahsulot, buyurtma) Server Components (13.3 — server'da, soddaroq); server state kesh (client kerak bo'lsa) TanStack Query 12.4-bob; client state (savat) Zustand 12.5-bob yoki Server Action (13.5 — DB'da); forma React Hook Form + Zod 11.10-bob yoki Server Action 13.5-bob; (3) auth 13.9-bob: OAuth (Google) + Credentials (email/parol), rollar (admin/user); (4) DB (6-QISM): PostgreSQL + Prisma (relyatsion — User/Product/Order bog'lanishlari); (5) UI/stil (12-QISM): Tailwind CSS (utility-first — sinf orqali stil, izchil dizayn tizimi — tez), shadcn/ui (tayyor, ochiq komponentlar — button, dialog, forma — nusxa oling, o'zingizniki bo'ladi), lucide (ikonka) va dark mode (professional ko'rinish — portfel uchun muhim); (6) test 11.17-bob: Playwright (E2E — asosiy oqimni brauzerda — login savat buyurtma — real foydalanuvchi kabi) va Vitest (Server Action mantiqini alohida — validatsiya, avtorizatsiya). Ikki nuqta: (1) har qism uchun mos texnologiya (rendering/state/auth/DB — funksiyaga qarab — bir xil emas); (2) bitta to'g'ri javob yo'q — kontekstga mos (capstone'da ongli tanlov — "nega bu?" deb o'ylash). Bu — professional dasturchi ko'nikmasi (texnologiyani tanlash — har masalaga mos vosita, "bolg'a bilan hamma narsani mix qilmaslik"). Capstone'da siz bu qarorlarni qilasiz (va oqlaysiz — "mahsulot ISR, chunki narx yangilanadi, lekin har so'rov render keraksiz"). 13-QISM har texnologiyani o'rgatdi; capstone — qaysini qachon ishlatishni tanlash (mahorat — bilim emas, balki qaror). Bu qarorlar loyiha sifatini belgilaydi (to'g'ri tanlov — tez, sodda, ishonchli; noto'g'ri — sekin, murakkab).

2.5. Ulanishlar — bo'laklar qanday birlashadi

text
  ULANISHLAR — bir funksiya bir necha bobni BIRGA ishlatadi (misol oqimi):

  "FOYDALANUVCHI BUYURTMA BERADI" oqimi (qatlamlar birga):
  1. Login 13.9-bob: middleware tekshiradi  kirgan
  2. Sahifa 13.3-bob: /checkout — Server Component, savat ko'rsatadi (Server'da)
  3. Forma 13.5-bob: "Buyurtma ber" — Server Action
  4. Validatsiya (13.5 + 11.10): Zod (manzil, to'lov)
  5. Avtorizatsiya 13.9-bob: Server Action'da session tekshir (kim?)
  6. DB (6-QISM): Prisma — Order yaratadi
  7. To'lov 13.6-bob: Stripe webhook (Route Handler — to'lov tasdiqi)
  8. Revalidate 13.7-bob: buyurtmalar ro'yxati yangilanadi
  9. Redirect 13.5-bob: buyurtma sahifasiga
  10. Monitoring 13.10-bob: xato bo'lsa Sentry

   Bir funksiya = bir necha bob BIRGA (login + Server Action + DB + webhook + ...)
   Ulanishlar — bo'laklarni bog'lash (bu — capstone'ning asl mahorati)

Ulanishlar — bo'laklar qanday birlashadi — capstone'ning asl mahorati. Bir funksiya odatda bir necha bobni birga ishlatadi (alohida emas — bog'langan oqim). Misol — "foydalanuvchi buyurtma beradi" oqimi (qatlamlar birga): (1) login 13.9-bob — middleware tekshiradi (kirgan'mi); (2) sahifa 13.3-bob — /checkout Server Component, savatni ko'rsatadi (server'da); (3) forma 13.5-bob — "Buyurtma ber" Server Action; (4) validatsiya (13.5 + 11.10) — Zod (manzil, to'lov to'g'rimi); (5) avtorizatsiya 13.9-bob — Server Action'da session tekshir (kim buyurtma beryapti); (6) DB (6-QISM) — Prisma Order yaratadi; (7) to'lov 13.6-bob — Stripe webhook (Route Handler — to'lov tasdiqi); (8) revalidate 13.7-bob — buyurtmalar ro'yxati yangilanadi; (9) redirect 13.5-bob — buyurtma sahifasiga; (10) monitoring 13.10-bob — xato bo'lsa Sentry. Ikki nuqta: (1) bir funksiya = bir necha bob birga (login + Server Action + validatsiya + DB + webhook + revalidate — bitta oqimda); (2) ulanishlar — bo'laklarni bog'lash (bu — capstone'ning asl mahorati — alohida tushunchani bilish emas, balki ularni bir ishlaydigan oqimga birlashtirish). Bu — full-stack tafakkurning cho'qqisi (bir foydalanuvchi amali — buyurtma — butun stack'ni harakatga keltiradi — UI'dan webhook'gacha). 13-QISM har bo'lakni o'rgatdi; capstone — ularni bog'lash (oqim qurish). Bu mahorat — eng qiyin, eng qimmatli (alohida bilim ko'p odamda bor, lekin birlashtirish — kam). Capstone loyihada siz bunday oqimlarni qurasiz (login ko'rish savat buyurtma to'lov — har biri bir necha bob birga). Bu — "dasturchi" va "kod yozuvchi" orasidagi farq (bog'lash mahorati).

2.6. Loyiha strukturasi (papka tashkili)

text
  CAPSTONE PAPKA STRUKTURASI (tartibli, kengaytiriladigan):

  my-shop/
  ├── app/
  │   ├── (marketing)/          # marketing layout (13.2 route group)
  │   │   ├── page.tsx          # bosh (SSG)
  │   │   └── about/page.tsx
  │   ├── (shop)/               # do'kon layout
  │   │   ├── products/
  │   │   │   ├── page.tsx      # ro'yxat (ISR)
  │   │   │   └── [id]/page.tsx # mahsulot (ISR + generateMetadata)
  │   │   ├── cart/page.tsx
  │   │   └── checkout/page.tsx
  │   ├── (auth)/               # auth layout 13.2-bob
  │   │   ├── login/page.tsx
  │   │   └── register/page.tsx
  │   ├── dashboard/            # himoyalangan (13.6 middleware)
  │   ├── admin/                # admin (rol — 13.9)
  │   ├── api/                  # Route Handlers 13.6-bob
  │   │   ├── auth/[...nextauth]/route.ts
  │   │   ├── products/route.ts
  │   │   └── webhooks/stripe/route.ts
  │   ├── actions/              # Server Actions 13.5-bob
  │   ├── layout.tsx            # root (metadata, SessionProvider)
  │   ├── sitemap.ts            # 13.8
  │   └── robots.ts
  ├── components/               # umumiy komponentlar
  ├── lib/                      # db, auth, utils
  ├── prisma/schema.prisma      # DB sxema (6-QISM)
  ├── middleware.ts             # 13.6
  ├── auth.ts                   # 13.9
  └── next.config.js            # 13.10

   Tartibli struktura — route groups, api, actions, lib, components (ajratilgan)
   Struktura kengaytiriladigan (yangi funksiya — aniq joyga; chalkashlik yo'q)

Loyiha strukturasi (papka tashkili) — tartibli, kengaytiriladigan loyiha. Capstone loyiha tartibli strukturaga ega bo'lishi kerak (katta loyihada chalkashlik — eng katta dushman). Tipik struktura: app/ ichida route groups (13.2 — (marketing), (shop), (auth) — har biri o'z layout'i — URL'siz guruhlash), dashboard/admin (himoyalangan — 13.6, 13.9), api/ (Route Handlers — 13.6 — auth, products, webhooks), actions/ (Server Actions — 13.5), layout.tsx (root — metadata, SessionProvider), sitemap.ts/robots.ts 13.8-bob. Tashqarida: components/ (umumiy komponentlar), lib/ (db, auth, utils — yordamchi), prisma/schema.prisma (DB sxema — 6-QISM), middleware.ts 13.6-bob, auth.ts 13.9-bob, next.config.js 13.10-bob. Ikki nuqta: (1) tartibli struktura — route groups (UI guruhlari), api (endpointlar), actions (mutationlar), lib (yordamchi), components (qayta ishlatiladigan) — har narsa o'z joyida (ajratilgan — topish oson); (2) struktura kengaytiriladigan (yangi funksiya — aniq joyga qo'shiladi — masalan yangi sahifa app/(shop)/ga, yangi API app/api/ga — chalkashlik yo'q). Bu — professional loyiha tashkiloti (kichik loyihada ahamiyatsiz, lekin o'sganda — hayotiy muhim — tartibli struktura kengayishni osonlashtiradi). Capstone'ni shu strukturadan boshlaysiz (papkalarni oldindan tashkil qilib, keyin to'ldirasiz — reja — 2.1). Struktura — loyiha "tartibi" (kod qaerda — aniq; yangi funksiya qaerga — aniq). Yomon struktura — har narsa aralash (topish qiyin, kengayish og'ip). Yaxshi struktura — o'zini tushuntiradi (papkani ko'rib, ichida nima borligini bilasiz).

2.7. Bosqichma-bosqich qurish (qaysi tartibda)

text
  QURISH TARTIBI — qaysi qism oldin (poydevordan tomga):

  1. POYDEVOR (avval — boshqalar shunga bog'liq):
   Loyiha sozlash (create-next-app), Tailwind + shadcn/ui, Prisma (DB sxema), auth.ts
   "Hello World" deploy (13.10 — erta deploy — oqim ishlasin)

  2. MA'LUMOT (DB tayyor bo'lgach):
   Prisma sxema (User, Product, Order), migratsiya, seed (test ma'lumot)

  3. AUTENTIFIKATSIYA (ko'p narsa shunga bog'liq):
   Auth.js (login, ro'yxat, sessiya — 13.9), middleware 13.6-bob

  4. ASOSIY FUNKSIYALAR (bittadan — to'liq):
   Mahsulot ko'rsatish (Server Component — 13.3, ISR — 13.4)
   Savat (Server Action — 13.5), buyurtma, to'lov 13.6-bob

  5. SAYqal (oxirida):
   SEO 13.8-bob, performance 13.7-bob, xato sahifalari 13.10-bob

  6. DEPLOY (doimiy — har bosqichda):
   Erta deploy + har funksiya tayyor bo'lgach deploy (preview — 13.10)

   Qurish tartibi — poydevor (sozlash/DB/auth)  funksiyalar (bittadan)  sayqal  deploy
   Erta deploy (oqim ishlasin); bittadan funksiya (to'liq — keyin keyingisi)

Bosqichma-bosqich qurish (qaysi tartibda) — capstone'ni qaysi tartibda qurish. Katta loyihani tartibli qurish kerak (hammani bir vaqtda emas — poydevordan tomga): (1) poydevor (avval — boshqalar shunga bog'liq) — loyiha sozlash (create-next-app), Prisma (DB ulanishi), auth.ts (asosiy sozlama), va erta deploy (13.10 — "Hello World"ni darrov deploy — deploy oqimi ishlasin — keyin har funksiyani qo'shasiz); (2) ma'lumot (DB tayyor bo'lgach) — Prisma sxema (User, Product, Order), migratsiya, seed (test ma'lumot — qo'lda kiritmasdan); (3) autentifikatsiya (ko'p narsa shunga bog'liq) — Auth.js (login, ro'yxat, sessiya — 13.9), middleware 13.6-bob; (4) asosiy funksiyalar (bittadan — to'liq) — mahsulot ko'rsatish (Server Component — 13.3, ISR — 13.4), keyin savat (Server Action — 13.5), keyin buyurtma, to'lov 13.6-bob — har birini to'liq qilib, keyin keyingisi; (5) sayqal (oxirida) — SEO 13.8-bob, performance 13.7-bob, xato sahifalari 13.10-bob; (6) deploy (doimiy — har bosqichda — preview — 13.10). Ikki nuqta: (1) qurish tartibi — poydevor (sozlash/DB/auth — asos) funksiyalar (bittadan — to'liq) sayqal (SEO/performance) deploy (doimiy); (2) erta deploy (oqim ishlasin — "Hello World"ni deploy, keyin to'ldirish — deploy'ni oxiriga qoldirmaslik — 13.10), bittadan funksiya (to'liq qilib keyin keyingisi — yarim-yarim ko'p funksiya emas). Bu — katta loyihani boshqarish usuli (hammani bir vaqtda — chalkashlik, charchoq; bittadan — har qadam tugalgan, ko'rinadigan taraqqiyot). Capstone'ni shu tartibda qurasiz (poydevor ma'lumot auth funksiyalar bittadan sayqal deploy). Erta deploy muhim (oxirida deploy — surprise, xatolar; erta + tez-tez — silliq). Bittadan funksiya — psixologik ham muhim (har funksiya tugalganda — yutuq hissi, motivatsiya). Bu — loyihani boshlab, tugatish usuli (ko'p loyiha boshlanadi, lekin tugamaydi — tartibli qurish tugatishga yordam beradi).

2.8. Keng tarqalgan capstone xatolari

text
  CAPSTONE'DA KENG XATOLAR (oldindan bilsangiz — qochasiz):

   REJA'SIZ BOSHLASH:
   to'g'ridan kod, keyin "bu qanday bo'lishi kerak edi?"  qayta yozish
   avval reja (2.1 — g'oya, funksiya, ma'lumot, sahifa)

   HAMMANI BIR VAQTDA:
   10 funksiyani yarim-yarim  hech biri ishlamaydi
   bittadan, to'liq (2.7)

   DEPLOY'NI OXIRGA QOLDIRISH:
   oxirida deploy  ko'p xato (env, build) bir vaqtda
   erta deploy (2.7 — oqim erta ishlasin)

   XAVFSIZLIKNI UNUTISH:
   faqat UI himoya, Server Action ochiq (13.5: 2.11)
   har qatlamda tekshir (13.9: 2.9)

   JUDA KATTA QAMRAB OLISH:
   "Amazon kloni"  hech qachon tugamaydi
   MVP (minimal — asosiy funksiyalar), keyin kengaytir

   Keng xatolar: reja'siz, hammasi birga, kech deploy, xavfsizlik, juda katta
   Yechim: reja + bittadan + erta deploy + har qatlam himoya + MVP

Keng tarqalgan capstone xatolari — oldindan bilib, qochish. Yangi dasturchilar capstone'da takror xatolarga yo'l qo'yishadi (oldindan bilsangiz — qochasiz): (1) reja'siz boshlash — to'g'ridan kod, keyin "bu qanday bo'lishi kerak edi?" qayta yozish (vaqt isrofi); yechim — avval reja 2.1-bob; (2) hammani bir vaqtda — 10 funksiyani yarim-yarim qilib, hech biri to'liq ishlamaydi (chalkashlik); yechim — bittadan, to'liq 2.7-bob; (3) deploy'ni oxirga qoldirish — oxirida deploy ko'p xato (env, build, platforma) bir vaqtda (charchatadigan); yechim — erta deploy (2.7 — oqim erta ishlasin); (4) xavfsizlikni unutish — faqat UI himoya, Server Action ochiq (13.5: 2.11 — har kim chaqira oladi); yechim — har qatlamda tekshir (13.9: 2.9 — defense in depth); (5) juda katta qamrab olish — "Amazon kloni" (cheksiz funksiya) hech qachon tugamaydi (motivatsiya yo'qoladi); yechim — MVP (Minimum Viable Product — minimal, asosiy funksiyalar — ishlaydigan), keyin kengaytir. Ikki nuqta: (1) keng xatolar — reja'siz, hammasi birga, kech deploy, xavfsizlik unutish, juda katta qamrov (har biri loyihani buzadi yoki cho'zadi); (2) yechim — reja + bittadan + erta deploy + har qatlam himoya + MVP. Bu xatolarni oldindan bilish — capstone'ni muvaffaqiyatli tugatishning kaliti (ko'p capstone yarim qoladi — bu xatolar tufayli). MVP ayniqsa muhim — "kichik, lekin to'liq ishlaydigan" (5 mahsulot, oddiy savat, oddiy buyurtma — ishlaydi) "katta, lekin yarim" (1000 funksiya, hech biri tugamagan)dan yaxshiroq. Birinchi capstone — kichik va to'liq (keyin kengaytiriladi). Bu — real loyiha tajribasi (ko'p loyiha juda katta rejalanib, tugamaydi — MVP — boshlab tugatishning usuli). Capstone'ni tugatish (kichik bo'lsa ham) — boshlab tashlagandan yaxshiroq (tugalgan loyiha — portfel, tajriba, ishonch).

2.9. Sifat va testlash (capstone'da)

text
  CAPSTONE SIFATI — ishlaydigan emas, YAXSHI ishlaydigan:

  TESTLASH 11.17-bob:
   asosiy oqimlar test (login, savat, buyurtma — ishlayaptimi)
   Server Actions test (validatsiya, avtorizatsiya)

  SIFAT TEKSHIRUVI:
   TypeScript (xato yo'q — npm run type-check)
   ESLint (kod sifati — npm run lint)
   Build muvaffaqiyatli (npm run build — 13.10)
   Core Web Vitals (Lighthouse — 13.7)

  FOYDALANUVCHI TAJRIBASI:
   Yuklanish holatlari (loading.tsx — 13.2)
   Xato holatlari (error.tsx, 404 — 13.10)
   Bo'sh holatlar (savat bo'sh — "savat bo'sh" ko'rsat)
   Responsive (mobil — telefon, planshet)
   Accessibility (semantik HTML, alt, klaviatura)

   Capstone sifati — ishlaydigan + yaxshi (test, TypeScript, UX, responsive, a11y)
   "Ishlaydigan demo" emas, "professional mahsulot" (har holat — loading/xato/bo'sh)

Sifat va testlash (capstone'da) — ishlaydigan emas, yaxshi ishlaydigan. Capstone — shunchaki "ishlaydigan demo" emas, balki professional mahsulot (sifatli — portfel uchun — ish beruvchi sifatni ko'radi). Sifat qatlamlari: (1) testlash 11.17-bob — asosiy oqimlar test (login, savat, buyurtma — ishlaydimi), Server Actions test (validatsiya, avtorizatsiya); (2) sifat tekshiruvi — TypeScript (xato yo'q — type-check), ESLint (kod sifati — lint), build muvaffaqiyatli (build — 13.10), Core Web Vitals (Lighthouse — 13.7 — tez); (3) foydalanuvchi tajribasi — yuklanish holatlari (loading.tsx — 13.2 — bo'sh ekran emas), xato holatlari (error.tsx, 404 — 13.10 — toza), bo'sh holatlar (savat bo'sh bo'lsa — "savat bo'sh" ko'rsat — oq joy emas), responsive (mobil — telefon/planshet — ko'p foydalanuvchi mobilda), accessibility (semantik HTML, alt, klaviatura — hammaga — 13.8). Ikki nuqta: (1) capstone sifati — ishlaydigan + yaxshi (test, TypeScript, UX, responsive, a11y — har biri); (2) "ishlaydigan demo" emas, "professional mahsulot" (har holat boshqarilgan — loading, xato, bo'sh, mobil). Bu — havaskor va professional capstone orasidagi farq. Havaskor — "asosiy holatda ishlaydi" (login ishlaydi, lekin xato holati — oq ekran; mobilda buzuq; bo'sh savat — oq joy). Professional — har holat boshqarilgan (yuklanish — skeleton, xato — toza sahifa, bo'sh — xabar, mobil — moslangan, a11y — hammaga). Ish beruvchi (yoki mijoz) bu detallarni ko'radi (professional sifat). Capstone'ni sifatli qilish — uni portfel uchun qiymatli qiladi (ish topishda — "men professional mahsulot qura olaman" isboti). Bu qo'shimcha mehnat (har holat boshqarish), lekin bu — farq (oddiy o'quvchi vs ishga tayyor dasturchi). Capstone — sifat namunasi (kelajakdagi ishingiz qanday bo'lishini ko'rsatadi).

2.10. Portfel va keyingi qadamlar

text
  CAPSTONE  PORTFEL  ISH (capstone'ning maqsadi):

  PORTFEL UCHUN (capstone'ni ko'rsatish):
   Jonli demo (deploy — Vercel — 13.10 — havola berish mumkin)
   GitHub repo (toza kod, README — qanday ishga tushirish)
   README: nima, qanday texnologiya, qanday ishga tushirish, screenshotlar
   Texnologiya ro'yxati (Next.js, Prisma, Auth.js — ko'nikma isboti)

  KEYINGI QADAMLAR (capstone'dan keyin):
   Yangi funksiya qo'sh (kengaytir — izlanish)
   Boshqa capstone (turli soha — ko'p loyiha = ko'p tajriba)
   Ochiq manba (open source — boshqalar ishlatsin)
   14-16 QISM (xavfsizlik, professional ko'nikmalar, ko'proq loyiha)

  ┌────────────────────────────────────────────────────────────┐
  │ Capstone  jonli demo + GitHub + README  portfel  ish     │
  │  kod GAPIRADI (suhbatda "men qura olaman"ni KO'RSATADI)    │
  └────────────────────────────────────────────────────────────┘

   Capstone  portfel (jonli demo + GitHub + README) — ko'nikma ISBOTI
   Kod gapiradi (ish suhbatida — loyihangizni ko'rsatasiz, isbot)

Portfel va keyingi qadamlar — capstone'ning maqsadi. Capstone faqat o'rganish uchun emas — u sizning portfelingiz (ko'nikma isboti — ish topishda). Portfel uchun (capstone'ni ko'rsatish): (1) jonli demo (deploy — Vercel — 13.10 — ish beruvchiga havola berasiz — "mana, ishlaydigan ilova" — gaplashish emas, ko'rsatish); (2) GitHub repo (toza kod, README — boshqalar ko'pib, ishga tushira oladi); (3) README (nima — loyiha tavsifi, qanday texnologiya, qanday ishga tushirish, screenshotlar — professional taqdimot); (4) texnologiya ro'yxati (Next.js, Prisma, Auth.js, TypeScript — ko'nikma isboti — ish e'lonidagi talablarga mos). Keyingi qadamlar (capstone'dan keyin): yangi funksiya qo'shish (kengaytir — izlanish, o'sish), boshqa capstone (turli soha — ko'p loyiha = ko'p tajriba — portfel boyiydi), ochiq manba (open source — boshqalar ishlatsin — jamoa, obro'), 14-16 QISM (xavfsizlik, professional ko'nikmalar, ko'proq loyiha — kitob davom etadi). Ikki nuqta: (1) capstone portfel (jonli demo + GitHub + README — ko'nikma isboti — ko'rsatiladigan, gapiriladigan emas); (2) kod gapiradi (ish suhbatida — loyihangizni ko'rsatasiz — "men full-stack Next.js ilova qura olaman" — isbot, da'vo emas). Bu — capstone'ning asl maqsadi (o'rganish — vosita, portfel — natija, ish — maqsad). Ish beruvchilar "Next.js bilasizmi?" deb so'rashadi — eng yaxshi javob: "mana, men qurgan ilova (havola), mana kodi (GitHub)". Kod — eng kuchli argument (suhbatda gapirishdan ko'ra ko'rsatish). Capstone loyiha — sizning birinchi jiddiy portfel elementi (keyingilari qo'shiladi — har loyiha tajriba va isbot). Bu — 13-QISMning (va umuman frontend/full-stack o'rganishning) amaliy maqsadi: bilim loyiha portfel ish. Capstone — bu yo'lning muhim qadami (o'rganganingizni ko'rsatadigan narsa).

3. Sintaksis — yo'l xaritasi (capstone bosqichlari)

text
1. REJA 2.1-bob:       g'oya  funksiyalar  ma'lumot modeli  sahifalar  texnologiya
2. SOZLASH 2.7-bob:    create-next-app + Tailwind/shadcn + Prisma + auth.ts + erta deploy
3. MA'LUMOT (6-QISM): Prisma sxema (User/Product/Order) + migratsiya + seed
4. AUTH 13.9-bob:      Auth.js + middleware + rollar
5. FUNKSIYALAR 2.7-bob: mahsulot (13.3/13.4)  savat 13.5-bob  buyurtma  to'lov (13.6/8.19)
6. SAYQAL 2.9-bob:     SEO 13.8-bob + performance 13.7-bob + xato/loading/bo'sh holatlar
7. TEST 11.17-bob:     Playwright (E2E oqim) + Vitest (Server Action mantiqi)
8. DEPLOY 13.10-bob:   Vercel/Docker + env + monitoring + checklist
9. PORTFEL 2.10-bob:   jonli demo + GitHub + README

4. Misol arxitekturalar (uch capstone g'oyasi)

Har g'oya: Maqsad + arxitektura + "Qanday qurilADI" (qaysi bob, qanday ulanadi). Kod — o'zingiz yozasiz (loyiha).

Misol 1 — E-commerce (onlayn do'kon)

Maqsad: To'liq onlayn do'kon — mahsulot, savat, buyurtma, to'lov, admin. Bu eng keng capstone (barcha bobni ishlatadi).

text
ARXITEKTURA (E-commerce):
├── Sahifalar:
│   ├── / (bosh — SSG — 13.4)                    # mashhur mahsulotlar
│   ├── /products (ro'yxat — ISR + filtr)         # 13.4, qidiruv 13.6-bob
│   ├── /products/[id] (mahsulot — ISR + SEO)     # 13.3, 13.4, 13.8
│   ├── /cart (savat — client/server state)       # 12.5 yoki 13.5
│   ├── /checkout (buyurtma — Server Action)       # 13.5
│   ├── /dashboard (buyurtmalarim — himoya)        # 13.6, 13.9
│   └── /admin (mahsulot boshqaruvi — rol)         # 13.9
├── Ma'lumot (Prisma — 6-QISM):
│   └── User, Product, Category, Order, OrderItem, Review
├── Auth 13.9-bob: Google + email/parol, rollar (user/admin)
├── UI/stil (12-QISM): Tailwind CSS + shadcn/ui (button, dialog, forma)
├── To'lov (13.6 + 8.19): Stripe webhook (Route Handler)
├── Test 11.17-bob: Playwright (login  savat  buyurtma oqimi)
└── Deploy 13.10-bob: Vercel + Stripe + PostgreSQL

Qanday qurilADI: E-commerce — eng keng capstone (barcha 13-QISM bobni ishlatadi). Asosiy oqim: foydalanuvchi bosh sahifani ko'radi (SSG — mashhur mahsulotlar — 13.4 — tez, o'zgarmas), mahsulotlar ro'yxatiga o'tadi (ISR + filtr — 13.4 — narx yangilanadi, qidiruv — Route Handler — 13.6), mahsulotni ochadi (/products/[id] — Server Component — 13.3, ISR — 13.4, generateMetadata + JSON-LD — 13.8 — Google'da topiladi), savatga qo'shadi (Zustand — 12.5 — client state, yoki Server Action — 13.5 — DB savat), checkout (Server Action — 13.5 — buyurtma yaratadi, validatsiya — Zod, avtorizatsiya — 13.9), to'lov (Stripe webhook — Route Handler — 13.6 + 8.19 — Stripe Checkout sessiyasi ochiladi, to'lov tasdiqlanganda webhook keladi va buyurtma "paid"). UI/stil — barcha sahifa Tailwind CSS bilan stillanadi (utility sinflar — tez, izchil) va shadcn/ui komponentlar ishlatiladi (button, dialog, forma, dropdown — tayyor, ochiq — 12-QISM) — bu professional, responsive ko'rinish beradi (portfel uchun muhim). Test — Playwright bilan asosiy oqim tekshiriladi (login mahsulot savat buyurtma — brauzerda, real foydalanuvchi kabi — 11.17). Admin (/admin — rol himoya — 13.9: 2.9 — middleware + Server Action avtorizatsiya) — mahsulot qo'shadi/o'zgartiradi (Server Actions — 13.5). Ma'lumot (Prisma — 6-QISM) — User, Product, Category, Order (bog'lanishlar — order orderItems product). Deploy 13.10-bob — Vercel + PostgreSQL (DB) + Stripe (to'lov). Bu loyiha har funksiya orqali bir necha bobni bog'laydi (2.5 — ulanishlar): mahsulot ko'rsatish (13.3 + 13.4 + 13.7 + 13.8), buyurtma (13.5 + 13.9 + 13.6 + 6-QISM). E-commerce — eng to'liq capstone (real biznes mantiqi — savat, buyurtma, to'lov, admin — barcha qatlam). MVP versiyasi 2.8-bob: 5-10 mahsulot, oddiy savat, oddiy buyurtma (to'lovsiz yoki test Stripe), oddiy admin — keyin kengaytir (sharhlar, kategoriyalar, qidiruv filtri, kupon). Bu — portfel uchun eng kuchli capstone (ish beruvchilar e-commerce tajribani qadrlaydi — real biznes).

Misol 2 — Blog / kontent platformasi

Maqsad: Blog platformasi — maqola yozish, o'qish, izoh, kategoriya. Bu SEO va kontent'ga urg'u beradi (13.8'ga kuchli).

text
ARXITEKTURA (Blog platformasi):
├── Sahifalar:
│   ├── / (so'nggi postlar — ISR)                 # 13.4
│   ├── /blog/[slug] (post — SSG + JSON-LD)        # 13.4, 13.8 (SEO kuchli)
│   ├── /blog/category/[cat] (kategoriya)          # 13.2
│   ├── /write (yangi post — himoya — Server Action)# 13.5, 13.9
│   ├── /dashboard (mening postlarim)              # 13.9
│   └── /author/[id] (muallif profili)            # 13.2
├── Ma'lumot (Prisma):
│   └── User, Post, Category, Comment, Tag
├── Xususiyatlar:
│   ├── Markdown render (Server Component — 13.3)  # og'ir kutubxona server'da
│   ├── Izohlar (Server Action + optimistic — 13.5)
│   ├── Dinamik OG rasm (next/og — 13.8)
│   └── To'liq SEO (sitemap, JSON-LD — 13.8)
└── Deploy: Vercel + PostgreSQL

Qanday qurilADI: Blog platformasi — SEO va kontent'ga urg'u beradi (13.8'ga kuchli — content sayti Google'dan trafik oladi). Asosiy oqim: foydalanuvchi bosh sahifani ko'radi (so'nggi postlar — ISR — 13.4), maqolani ochadi (/blog/[slug] — SSG + generateStaticParams — 13.4 — har post statik, eng tez; JSON-LD Article + OG rasm — 13.8 — Google boy natija, ijtimoiy ulashish), markdown kontent server'da render (Server Component — 13.3 — og'ir markdown kutubxonasi server'da — brauzerga yengil — 13.3: Misol 9), izoh qoldiradi (Server Action + useOptimistic — 13.5 — darrov ko'rinadi). Yozish (/write — himoya — 13.9 — kirgan foydalanuvchi) — yangi post (Server Action — 13.5 — markdown saqlash). SEO to'liq 13.8-bob — sitemap (har post — dinamik), generateMetadata (har post noyob), JSON-LD (Article — muallif, sana), dinamik OG rasm (next/og — har post brendlangan karta). Ma'lumot (Prisma) — User, Post, Category, Comment, Tag. Blog — SEO uchun ideal capstone (content + SEO — Google'dan organik trafik — real foydali). MVP 2.8-bob: post yozish/o'qish, oddiy izoh, kategoriya — keyin kengaytir (teg, qidiruv, like, muallif obunasi). Bu capstone 13.8 (SEO)ni chuqur ishlatadi (e-commerce'dan ko'ra ko'proq SEO urg'u — content sayti). Dev.to, Medium kabi — blog platformasi (real, foydali). Portfel uchun — SEO va content tajribani ko'rsatadi (ko'p sayt content + SEO — bu ko'nikma qadrli).

Misol 3 — SaaS dashboard (xizmat ilovasi)

Maqsad: SaaS dashboard — foydalanuvchilar ma'lumot boshqaradi (masalan vazifa, loyiha, mijoz). Bu interaktivlik va real-time'ga urg'u (13.3, 13.5).

text
ARXITEKTURA (SaaS dashboard):
├── Sahifalar:
│   ├── / (landing — SSG + marketing)             # 13.4
│   ├── /login, /register (auth)                   # 13.9
│   ├── /dashboard (asosiy — himoya)               # 13.6, 13.9
│   │   ├── /dashboard/projects                    # loyihalar (CRUD)
│   │   ├── /dashboard/tasks                       # vazifalar
│   │   └── /dashboard/settings                    # sozlamalar
│   └── /api (mobil/integratsiya — Route Handlers) # 13.6
├── Ma'lumot (Prisma):
│   └── User, Project, Task, Team, Membership
├── Xususiyatlar:
│   ├── CRUD (Server Actions — 13.5)
│   ├── Real-time his (optimistic — 13.5)
│   ├── Rollar (team — owner/member — 13.9)
│   └── Dashboard CSR (interaktiv — TanStack Query — 12.4)
└── Deploy: Vercel/Docker + PostgreSQL

Qanday qurilADI: SaaS dashboard — interaktivlik va ma'lumot boshqaruviga urg'u (13.3, 13.5 — CRUD, real-time his). Asosiy oqim: landing sahifa (SSG — marketing — 13.4), login/register (Auth.js — 13.9), keyin dashboard (himoya — middleware + server — 13.6, 13.9). Dashboard ichida CRUD (loyihalar, vazifalar — Server Actions — 13.5 — yaratish/o'zgartirish/o'chirish, useOptimistic — darrov his — 13.5: 2.10). Jamoa (Team — rollar — owner/member — 13.9 — kim nima qila oladi — avtorizatsiya). Dashboard interaktiv (CSR — TanStack Query — 12.4 — yoki Server Components + Server Actions — 13.3, 13.5 — server-first). API (/api — Route Handlers — 13.6 — mobil ilova yoki integratsiya uchun). Ma'lumot (Prisma) — User, Project, Task, Team, Membership (ko'p-ko'pga bog'lanishlar — team membership). SaaS — interaktiv, ma'lumot-ko'p capstone (CRUD, real-time, jamoa — murakkab mantiq). MVP 2.8-bob: bitta foydalanuvchi, loyiha/vazifa CRUD, oddiy dashboard — keyin kengaytir (jamoa, rollar, real-time, integratsiya, to'lov — obuna). Bu capstone interaktivlik (13.3 Client Components, 13.5 Server Actions, optimistic)ni chuqur ishlatadi. Notion, Linear, Trello kabi — SaaS dashboard (real biznes modeli — obuna). Portfel uchun — murakkab ma'lumot boshqaruvi va interaktivlik tajribani ko'rsatadi (SaaS — keng, daromadli soha). Uch g'oya (e-commerce, blog, SaaS) — turli urg'u (e-commerce — to'liq, blog — SEO, SaaS — interaktiv) — sizning qiziqishingizga qarab tanlaysiz (yoki o'z g'oyangiz).

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

1) Boshlash

text
 to'g'ridan kod (reja'siz — 2.8)
 avval reja (g'oya/funksiya/ma'lumot/sahifa — 2.1)

2) Qamrov

text
 "Amazon kloni" (juda katta — tugamaydi — 2.8)
 MVP (kichik, to'liq — keyin kengaytir — 2.8)

3) Qurish tartibi

text
 hammasi bir vaqtda (yarim-yarim — 2.8)
 poydevor  bittadan funksiya  sayqal (2.7)

4) Deploy

text
 oxirida deploy (ko'p xato birga — 2.8)
 erta + tez-tez deploy (preview — 2.7)

5) Xavfsizlik

text
 faqat UI himoya (Server Action ochiq — 13.5: 2.11)
 har qatlam (middleware + server + Server Action — 13.9: 2.9)

6) Sifat

text
 faqat asosiy holat (xato/bo'sh/mobil unutilgan — 2.9)
 har holat (loading/error/bo'sh/responsive/a11y — 2.9)

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — Loyiha yarim qoladi (tugamaydi)

Sababi: juda katta qamrov, reja'siz 2.8-bob. Yechimi: MVP (minimal, to'liq), reja 2.1-bob, bittadan funksiya 2.7-bob.

Xato 2 — "Bu qanday bo'lishi kerak edi?" (qayta yozish)

Sababi: reja'siz boshlash 2.8-bob. Yechimi: avval reja (g'oya/ma'lumot/sahifa — 2.1).

Xato 3 — Deploy'da ko'p xato (oxirida)

Sababi: deploy oxirga qoldirilgan 2.7-bob. Yechimi: erta deploy + tez-tez (preview — 13.10).

Xato 4 — Xavfsizlik teshigi (oddiy foydalanuvchi admin amali)

Sababi: faqat UI himoya, Server Action/API ochiq (13.5: 2.11). Yechimi: har qatlamda avtorizatsiya (13.9: 2.9).

Xato 5 — Sekin sayt (performance)

Sababi: image/kesh/rendering optimizatsiyasiz 13.7-bob. Yechimi: next/image, kesh, mos rendering (13.4, 13.7).

Xato 6 — Google'da topilmaydi

Sababi: SEO yo'q (metadata/sitemap — 13.8). Yechimi: generateMetadata, sitemap, JSON-LD 13.8-bob.

Xato 7 — Buzuq UX (xato/bo'sh holatlar)

Sababi: faqat asosiy holat 2.9-bob. Yechimi: loading/error/bo'sh/responsive 2.9-bob.

7. Integratsiya — bu loyiha butun stack'ni birlashtiradi

  • 13-QISM (barcha bob): App Router, Server Components, rendering, Server Actions, Route Handlers, kesh, SEO, auth, deploy — hammasi.
  • 6-QISM (DB): Prisma sxema, migratsiya (User/Product/Order).
  • 10-QISM (DevOps): deploy, Docker, CI/CD 13.10-bob.
  • 11-QISM (React): komponentlar, hooklar, formalar (React Hook Form + Zod — 11.10), test (Playwright/Vitest — 11.17).
  • 12-QISM (State + UI): Zustand/TanStack Query (client/server state), Tailwind CSS + shadcn/ui (dizayn tizimi).
  • 8-QISM (To'lov): Stripe integratsiyasi (8.19 — Checkout + webhook).
  • 14-QISM (Xavfsizlik): capstone xavfsizligi (keyingi — OWASP).
  • Real biznes: e-commerce, blog, SaaS (real mantiq).
  • Portfel: jonli demo + GitHub (ko'nikma isboti).

8. Eng yaxshi amaliyotlar (best practices)

  • Avval reja (g'oya/funksiya/ma'lumot/sahifa — 2.1).
  • MVP (kichik, to'liq — keyin kengaytir — 2.8).
  • Poydevordan qur (sozlash/DB/auth funksiyalar — 2.7).
  • Bittadan funksiya (to'liq — keyin keyingisi — 2.7).
  • Erta deploy (oqim erta ishlasin — 2.7).
  • Har qatlam xavfsizlik (defense in depth — 13.9: 2.9).
  • Har holat boshqar (loading/error/bo'sh/responsive — 2.9).
  • Tartibli struktura (route groups/api/actions/lib — 2.6).
  • Izchil dizayn (Tailwind + shadcn/ui — bir dizayn tizimi — 12-QISM).
  • E2E test (Playwright — asosiy oqim ishlashini kafolatla — 11.17).
  • Sifat tekshir (TypeScript/lint/build/Lighthouse — 2.9).
  • Portfel (jonli demo + GitHub + README — 2.10).

9. Yakuniy loyiha: "To'liq Full-Stack Next.js Ilova (Capstone)"

13-QISMning barcha bilimini bitta to'liq, real loyihada birlashtirish — sizning birinchi jiddiy portfel loyihangiz.

Maqsad

To'liq full-stack Next.js ilova qur (e-commerce, blog, yoki SaaS — yoki o'z g'oyangiz) — g'oyadan deploy'gacha — barcha 13-QISM bilimini ishlatib.

Talablar (requirements)

  1. Reja: g'oya, funksiyalar, ma'lumot modeli, sahifalar 2.1-bob.
  2. Routing: App Router — sahifalar, dinamik, layout, route groups 13.2-bob.
  3. Server/Client: Server Components (kontent) + Client (interaktiv) — to'g'ri 13.3-bob.
  4. Rendering: har sahifa mos strategiya (SSG/ISR/SSR/CSR — 13.4).
  5. Mutation: Server Actions (forma, CRUD — validatsiya + avtorizatsiya — 13.5).
  6. API: Route Handlers (kerak bo'lsa — qidiruv, webhook — 13.6).
  7. Auth: Auth.js (login/ro'yxat, rollar, himoyalangan sahifalar — 13.9).
  8. Kesh + Performance: revalidate, next/image, next/font, Core Web Vitals 13.7-bob.
  9. SEO: metadata, sitemap, JSON-LD, OG rasm 13.8-bob.
  10. Deploy: Vercel/Docker + env + monitoring + production checklist 13.10-bob.
  11. UI/stil: Tailwind CSS + shadcn/ui — izchil, responsive, professional dizayn (12-QISM).
  12. Struktura: tartibli papka — route groups, api/, actions/, lib/, components/ 2.6-bob.

Maslahatlar (hint)

  • MVP'dan boshlash (kichik, to'liq — keyin kengaytirish — Xato 1).
  • Reja avval (Xato 2).
  • Poydevor bittadan funksiya sayqal 2.7-bob.
  • Erta deploy (Xato 3).
  • Har qatlam xavfsizlik (Xato 4).
  • Har holat (loading/error/bo'sh — Xato 7).
  • Funksiya bob xaritasi (2.3 — qaysi bobga qaytish).
  • To'lov kerak bo'lsa — Stripe (8.19 — webhook Route Handler bilan — 13.6).

"Tayyor" mezonlari (acceptance criteria)

  • To'liq ishlaydigan ilova (asosiy oqim — boshidan oxiriga).
  • App Router (sahifalar, dinamik, layout).
  • Server/Client to'g'ri ajratilgan.
  • Mos rendering (har sahifa).
  • Server Actions (CRUD + validatsiya + avtorizatsiya).
  • Auth (login/rollar/himoya).
  • Kesh + performance (tez — Lighthouse).
  • SEO (metadata/sitemap/JSON-LD).
  • UI/stil (Tailwind + shadcn/ui — izchil, responsive).
  • Deploy (jonli — havola).
  • Portfel (GitHub + README + demo).

Qo'shimcha (a'lo daraja)

  • E2E testlar (Playwright — asosiy oqim: login savat buyurtma — 11.17).
  • Unit testlar (Vitest — Server Action validatsiya/avtorizatsiya — 11.17).
  • To'lov integratsiyasi (Stripe — webhook Route Handler — 8.19 + 13.6 — agar e-commerce).
  • Monitoring (Sentry + Analytics — 13.10).
  • Responsive + accessibility (mobil + a11y — 2.9).
  • Real-time his (optimistic — 13.5).

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring. Lekin har qadamda qiyinchilik bo'lsa — mos bobni qayta o'qing (funksiya bob xaritasi — 2.3), yoki «[funksiya] qanday qilinadi?» deb so'rang. Men yo'l ko'rsataman (yechim emas — yo'nalish).

10. Xulosa va keyingi qismga ko'prik

Bu bob bilan 13-QISM (Next.js) yakunlandi. Biz:

  • Rejalashtirish (g'oyadan arxitekturaga — 2.1); full-stack arxitektura (qatlamlar — 2.2); funksiya bob xaritasi 2.3-bob; texnologiya tanlovi 2.4-bob.
  • Ulanishlar (bo'laklar birga — 2.5); struktura 2.6-bob; qurish tartibi 2.7-bob; xatolar 2.8-bob; sifat 2.9-bob; portfel 2.10-bob.
  • Uch capstone g'oyasi (e-commerce, blog, SaaS — 4-bo'lim) va to'liq capstone topshirig'i (9-bo'lim).

Endi siz Next.js'ning barcha qismini — App Router'dan deploy'gacha — bir to'liq, real loyihada birlashtira olasiz. Bu — 13-QISMning amaliy cho'qqisi va sizning portfelingizning birinchi jiddiy loyihasi. Capstone'ni qur (o'qish — vosita, qurish — mahorat).

13-QISM (Next.js) TUGADI! Siz endi to'liq, professional full-stack Next.js dasturchisiz: server'da render, ma'lumot, mutation, auth, SEO, deploy — hammasini bilasiz va qura olasiz.

Keyingi — 14-QISM: Web Xavfsizligi (Security). Ilova qurishni bildik; endi uni himoyalashni o'rganamiz: OWASP Top 10 (eng keng hujumlar — XSS, SQL injection, CSRF...), autentifikatsiya xavfsizligi (parol, sessiya — chuqur), ma'lumot himoyasi (shifrlash, maxfiylik), xavfsiz kod yozish (validatsiya, sanitizatsiya), va xavfsizlik tekshiruvi (audit). Xavfsizlik — har professional dasturchining majburiy ko'nikmasi (chiroyli ilova — agar xavfsiz bo'lmasa — xavfli).

Foydalanilgan rasmiy/ishonchli manbalar

  • Next.js rasmiy hujjati (nextjs.org/docs) — "Building Your Application", "Examples" (e-commerce, blog, dashboard), "Project Structure"
  • Vercel templates (vercel.com/templates) — Next.js to'liq loyiha namunalari (Commerce, Blog, SaaS)
  • Prisma hujjati (prisma.io/docs) — DB sxema, relyatsiyalar, migratsiya (capstone ma'lumot modeli)
  • Auth.js hujjati (authjs.dev) — autentifikatsiya, sessiya, rollar (himoyalangan sahifalar)
  • Tailwind CSS hujjati (tailwindcss.com/docs) — utility-first stil (dizayn tizimi)
  • shadcn/ui hujjati (ui.shadcn.com) — ochiq, qayta ishlatiladigan komponentlar
  • Stripe hujjati (stripe.com/docs) — Checkout va webhook (to'lov integratsiyasi)
  • Playwright hujjati (playwright.dev) — E2E test (asosiy oqimni brauzerda tekshirish)
  • Loyiha rejalashtirish — Agile/MVP tamoyillari (kichik, ishlaydigan, kengaytiriladigan)

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
13.11-bob: Next.js — Yakuniy loyiha va amaliyot — Wisar