Next.js nima va qachon kerak: meta-framework, SPA cheklovlari va Next 16

Qisqacha: Next.js — React ustiga qurilgan meta-framework: React UI chizadi, Next esa fayl-asosli routing, serverda va build vaqtida HTML tayyorlash, server kodi va optimallashtirilgan build'ni qo'shadi. U ochiq sahifalar (portfolio, blog, do'kon) uchun kerak — u yerda birinchi ochilish tezligi va SEO muhim. Kirish ortidagi ichki ilovaga (vazifalar kabi) oddiy Vite SPA ko'pincha yetadi. Next bepul emas: bo'sh Next 16.4 sahifasi brauzerga 132.4 KB gzip JS yuklaydi.

Bu darsda

• Kutubxona, framework va meta-framework farqini tushuntira olasiz.
• SPA'ning ikki cheklovini (bo'sh HTML, kech birinchi kadr) haqiqiy HTML misolida ko'rsatasiz.
• Next.js React'ga nimalarni qo'shishini va bu qismda qaysi darsda o'rganilishini bilasiz.
• Next 16 manzarasini (App Router, Turbopack, Vercel) va Next'ning o'lchangan narxini aytasiz.
• Loyiha uchun Vite SPA, Next.js, Astro va React Router framework mode orasidan asos bilan tanlaysiz.

Oldin bilishingiz kerak: SPA uchun SEO (SSR, SSG, prerender va hydration), React Router IV: data mode, React Router V: framework mode.

1. Nega bu kerak?

04–09-qismlarda siz shaxsiy saytingizning birinchi versiyasini qurgansiz: HTML sahifalar, CSS, bir oz JavaScript. U GitHub Pages'da turibdi (GitHub Pages). 10–22-qismlarda esa vazifalar ni quradingiz — React'da yozilgan, oflayn ishlaydigan, testlangan SPA.

Endi saytingizning ikkinchi versiyasi kerak. Unda loyihalar va har biri uchun case study, Markdown'da yoziladigan blog, "Men haqimda", aloqa formasi va ikki til (o'zbek va ingliz) bo'ladi. Ishga oluvchi havolani Telegram'da ochadi. Google sahifani qidiruvga oladi. Har ikkisi ham bir narsani so'raydi: sahifa serverdan tayyor matn bilan kelsin.

SPA uchun SEO darsida buni ko'rgan edik: SPA serverdan deyarli bo'sh HTML beradi, mazmunni JavaScript keyin chizadi. O'sha darsda bir qarz qoldirgan edik — "sahifaga xos HTML kerak bo'lgan joy — 23-qismdagi portfolio". Shu qism o'sha qarzni yopadi.

Hayotiy o'xshatish: mebel do'konidan stol buyurtma qildingiz. Birinchi do'kon quti yuboradi: ichida taxtalar, vintlar va yig'ish yo'riqnomasi. Stolni uyda o'zingiz yig'asiz — SPA shunday ishlaydi. Ikkinchi do'kon stolni yig'ib, tayyor holda olib keladi. Siz darhol uning ustiga choy qo'yasiz. Faqat tortmachalarni ishlatish uchun bir-ikki vint keyin buraladi. Next.js — ikkinchi do'kon.

2. Kutubxona, framework va meta-framework

2.1 React nimani qilmaydi

React — UI kutubxonasi. U bitta ishni yaxshi qiladi: holatdan (state) interfeys chizadi. Qolgan hamma narsani siz o'zingiz yig'gansiz. vazifalar da kim nima qilganini eslang:

Har qatorda siz tanladingiz, o'rnatdingiz va bir-biriga uladingiz. Bu erkinlik — yaxshi. Lekin har yangi loyihada xuddi shu yig'ish ishini qaytadan qilasiz.

2.2 Framework va meta-framework

Framework — dasturning karkasi: u loyiha tuzilishini, fayllar qayerda turishini va kod qachon chaqirilishini o'zi belgilaydi. Kutubxonani siz chaqirasiz, framework esa sizning kodingizni chaqiradi.

Meta-framework — boshqa framework yoki kutubxona ustiga qurilgan framework. Next.js React ustida turadi: komponentlar oddiy React bo'lib qoladi. Next ularning atrofiga routing, render va build'ni qo'shadi. Xuddi shu g'oyani React Router V: framework mode darsida ko'rgan edingiz — routes.ts, server loader, SSR. Next.js — shu toifadagi eng ko'p ishlatiladigan React framework'i.

Muhim fikr: Next'da React o'zgarmaydi. useState, props, ro'yxat va key — hammasi siz bilgan React. Quyidagi komponentni Next ham, Vite ham bir xil chizadi:

type Project = { title: string; tags: string[]; year: number };

const projects: Project[] = [
  { title: "Vazifalar", tags: ["React", "PWA"], year: 2026 },
  { title: "«Bahor» menyusi", tags: ["HTML", "CSS"], year: 2025 },
];

function ProjectCard({ project }: { project: Project }) {
  return (
    <article>
      <h2>{project.title}</h2>
      <p>
        {project.tags.join(" · ")} — {project.year}
      </p>
    </article>
  );
}

export default function ProjectsPage() {
  return (
    <main>
      <h1>Loyihalar</h1>
      {projects.map((project) => (
        <ProjectCard key={project.title} project={project} />
      ))}
    </main>
  );
}

Ekranda:

Loyihalar
Vazifalar
React · PWA — 2026
«Bahor» menyusi
HTML · CSS — 2025

Natija oynasida bu komponentni brauzer chizdi — xuddi SPA'dagidek. Next.js'da esa aynan shu kod build vaqtida serverda ishlaydi va natija tayyor HTML fayl bo'lib saqlanadi. Komponent bir xil, farq — qayerda va qachon chizilishida.

Tekshirib ko'ring: React Router — kutubxonami yoki framework? Javobingizni "kim kimni chaqiradi" savoli bilan asoslang.

3. SPA'ning ikki cheklovi

3.1 Bo'sh vitrina

vazifalar ning index.html faylidagi body qismi (kanondan, aynan):

<body>
  <main>
    <h1>Vazifalar</h1>
    <!-- React ildizi: src/main.tsx → router (19/#02) → sahifalar -->
    <div id="ilova"></div>
  </main>
</body>

Server har manzilga shu faylni beradi. JS'ni bajarmaydigan o'quvchi — Telegram'ning havola ko'rinishi, ko'p botlar, JS o'chirilgan brauzer — faqat "Vazifalar" sarlavhasini ko'radi. Ro'yxat, tugmalar va sahifa nomi JS kelgandan keyingina paydo bo'ladi.

Endi keyingi darsda yaratadigan Next.js skeletini olaylik. Biz uni next build qilib, next start -p 3124 bilan ishga tushirdik va curl bilan so'radik. Server qaytargan HTML'dan body boshi (5 748 bayt ichidan; skriptlar va qator ko'chishlari olib tashlangan):

curl http://localhost:3124/

<body><div hidden=""><!--$--><!--/$--></div><!--&-->
<main><h1>Salom, men Aziz — frontend dasturchiman</h1>
<p>Portfolio v2: Next.js&#x27;da qayta qurilmoqda.</p></main>

Matn HTML'ning o'zida. Brauzer uni JS yuklanmasdan oldin ko'rsatadi, bot esa JS'siz o'qiydi. <!--$--> kabi izohlar — React'ning belgilari, ularni Streaming va Suspense darsida ko'ramiz. ' — apostrofning HTML'dagi xavfsiz yozilishi.

3.2 Birinchi kadr: kim kutadi?

Ikkinchi cheklov — vaqt. SPA'da foydalanuvchi matnni ko'rishi uchun brauzer ketma-ket uch ishni bajarishi kerak: HTML'ni olish, JS'ni yuklash, JS'ni bajarish. Telefon va sekin internetda o'rtadagi qadam soniyalab cho'ziladi.

Avval SPA. Xabarlarning tartibiga qarang — matn qaysi qadamda paydo bo'ladi:

sequenceDiagram
  participant B as Brauzer
  participant S as Server
  B->>S: GET /loyihalar
  S-->>B: index.html (bo'sh div)
  B->>S: JS fayllarni so'raydi
  S-->>B: JS (206.7 KB gzip)
  Note over B: React chizadi — matn endi ko'rinadi

Endi Next.js, sahifa build vaqtida tayyorlangan:

sequenceDiagram
  participant B as Brauzer
  participant S as Server
  B->>S: GET /loyihalar
  S-->>B: tayyor HTML (matn bor)
  Note over B: matn darhol ko'rinadi
  B->>S: JS fayllarni so'raydi
  S-->>B: JS
  Note over B: hydration — tugmalar jonlanadi

Ikkinchi diagrammada matn birinchi javobdayoq bor. JS hali ham keladi — u tugmalar, forma va filtrni ishlatish uchun kerak. Tayyor HTML'ga hodisalarni ulash — hydration (jonlantirish), uni SPA uchun SEO darsida ko'rgansiz. To'liq — Hydration darsida.

Diqqat: "Next.js — JS'siz sayt" emas. Next ham JS yuboradi, ba'zan SPA'dan kam emas. Farq tartibda: foydalanuvchi matnni JS'ni kutmasdan ko'radi.

Tekshirib ko'ring: Telegram'ga vazifalar sahifasining havolasini tashladingiz. Havola ko'rinishida sahifaga xos sarlavha chiqmadi. Nega? Next.js'da bu qanday hal bo'ladi?

4. Next.js nimalarni qo'shadi

4.1 Beshta katta qism

Next.js React'ga beshta katta narsa qo'shadi. Hammasini shu qismda bittadan o'rganamiz, hozir faqat xarita:

1. Fayl-asosli routing. Papka — URL bo'lagi, page.tsx — sahifa. routes.ts yoki createBrowserRouter yozilmaydi (Fayl-asosli routing).
2. Render qayerda bo'lishini tanlash. Sahifa build vaqtida (statik), har so'rovda (dinamik) yoki bo'lib-bo'lib oqim bilan (streaming) chiziladi. Bir saytda har sahifaga o'z usuli (Rendering strategiyalari).
3. Server Components. Faqat serverda ishlaydigan komponentlar: faylni o'qiydi, API'ga so'rov yuboradi, lekin brauzerga o'z JS kodini yubormaydi (Server Components). Bu g'oya — React 19 ning qismi, Next uni sukut bo'yicha yoqadi.
4. Server kodi shu loyihada. Forma yuborilganda serverda ishlaydigan funksiya (Server Action) va o'z API manzillaringiz (Route Handler) — alohida backend'siz (Server Actions I, Route Handlers).
5. Build va optimallashtirish. Turbopack bilan yig'ish, kodni sahifalarga bo'lish, rasm, shrift va meta teglar uchun tayyor vositalar (Metadata API).

"Server Component", "Server Action" kabi nomlar hozir begona tuyulishi tabiiy holat — har biriga alohida dars bor. Bugun ularni bilish shart emas, faqat qaysi muammoni hal qilishini eslab qoling.

4.2 SPA'da bularning o'rnini nima bosardi

Jadvalning birinchi ustunidagi hamma ehtiyoj portfolio v2 da bor. vazifalar da esa ulardan faqat birinchisi kerak edi. Tanlov shu yerdan boshlanadi.

5. Next 16 manzarasi

5.1 Versiya va router

Bu qism Next.js 16.4.0 bilan yozilgan (2026-10-06 da chiqqan; undan yangi 16.4.1 va 16.4.2 bor edi, lekin kanon "7 kundan eski eng yangi versiya" qoidasi bilan tanladi). React — 19.3.0, Node — 24.

Next'da ikkita router bor:

• App Router (app/ papkasi) — yangi router. Server Components, streaming, Server Actions faqat shu yerda. Biz shuni o'rganamiz.
• Pages Router (pages/ papkasi) — asl router: Next.js 2016-yil oktyabrda aynan pages/ papkasi bilan chiqqan. "Pages Router" nomini u App Router paydo bo'lgach oldi. Next hujjatida u "hali ham qo'llab-quvvatlanadi" deyilgan, ko'p eski loyihalar unda yozilgan. Uni Pages Router merosi darsida o'qishni o'rganamiz.

Internetda Next.js haqida maqola o'qisangiz, avval qaysi routerni nazarda tutganiga qarang: getServerSideProps va pages/_app.tsx — Pages Router; app/layout.tsx va "use client" — App Router.

5.2 Next 16 da nima o'zgardi

Next o'z ichida versiyaga mos hujjatni olib keladi (node_modules/next/dist/docs/). O'sha hujjatning 16-versiyaga o'tish qo'llanmasidan bizga muhimlari:

Turbopack — Next jamoasining Rust'da yozilgan bundler'i. Bundlerlar landshaftini 16-qismda ko'rgansiz: Vite — Rolldown, Next — Turbopack.

Yana bir yangilik — Cache Components: qaysi ma'lumot keshlanishini "use cache" bilan aniq belgilash. Keyingi darsda create-next-app uni o'zi yoqib berishini ko'rasiz, o'zi esa Cache Components I darsida.

5.3 Vercel kim?

Next.js'ni Vercel kompaniyasi yaratadi va yuritadi. Vercel — hosting platformasi ham: Next ilovasini GitHub'dan bir bosishda internetga chiqaradi. create-next-app yaratgan README ham shuni yozadi: "Next.js ilovasini joylashning eng oson yo'li — Next.js mualliflarining Vercel platformasi".

Ikki narsani ajrating:

• Next.js — ochiq kodli framework. U Vercel'siz ham ishlaydi: next build + next start istalgan Node serverda, Docker'da yoki statik eksport sifatida.
• Vercel — pullik tariflari bor xizmat (bepul tarifi ham bor). Ba'zi qulayliklar (masalan, avtomatik preview havolalari) — platformaniki, Next'niki emas.

Halol eslatma: kursning kanon loyihasi Vercel'ga deploy qilinmagan — hisob ochilmagan. Hamma o'lchovlar lokal next build + next start da. Vercel oqimini Deploy I: Vercel darsida hujjat bo'yicha ko'rsatamiz va uni o'zingiz bajarasiz.

6. Next.js'ning narxi — o'lchov bilan

Next bepul emas. Kanon keyingi darsdagi bo'sh skeletni build qilib, sahifani headless Chrome'da ochdi va brauzer haqiqatda yuklagan JS'ni sanadi. Natija (tekshiruv-02.txt, aynan):

### / — status 200, TTFB 7 ms, DCL 98 ms; JS 5 fayl 132.4 KB tarmoq (gzip), 446.6 KB xom, CSS 0.2 KB, shrift 0.0 KB

Bitta sarlavha va bitta paragrafli sahifa — 5 ta JS fayl, 132.4 KB gzip. Bu Next'ning poydevori: React, router, hydration va RSC qabul qiluvchi kod. Taqqoslash uchun ustunlarga qarang:

Ikki xulosa:

1. Bo'sh Next sahifasi vazifalar ning butun ilovasidan atigi 74 KB kichik. Kichik saytda Next'ning poydevori JS'ning asosiy qismi bo'ladi.
2. Poydevordan keyin o'sish sekin. Butun portfolio v2 — 13 sahifa, blog, formalar, ikki til — poydevorga 12–23 KB qo'shdi. Sabab: sahifalarning ko'p qismi Server Component, ularning kodi brauzerga bormaydi.

Yana narxlar: npm install dan keyin node_modules — 463 MB (Tailwind bilan, kanon o'lchovi), build — 24–41 soniya, va eng muhimi — yangi tushunchalar. Client chegarasi ("use client"), kesh, hydration xatolari — SPA'da yo'q edi. Ular shu qismning ko'p darslarini egallaydi.

Foyda tomoni: TTFB 7 ms — server birinchi baytni 7 millisekundda yubordi, chunki sahifa build vaqtida tayyorlangan. Lighthouse mobil bahosi qism oxirida 97–98 (Next.js performance darsida).

Tekshirib ko'ring: Do'stingiz aytdi: "Next.js'da JS kam bo'ladi, shuning uchun u har doim SPA'dan tez". Bu gapda nima to'g'ri, nima noto'g'ri?

7. Qachon Next.js, qachon boshqasi

7.1 To'rtta yo'l

Astro va orol g'oyasini SPA uchun SEO darsida tilga olgan edik. React Router framework mode'ni o'zingiz sinagansiz — vazifalar da u 14.6 KB qo'shgani uchun kanonga kirmagan edi.

Hech biri "eng yaxshi" emas. Har biri boshqa savolga javob beradi.

7.2 Qaror savollari

Quyidagi daraxt SPA uchun SEO darsidagi qaror daraxtini davom ettiradi — endi vosita tanlaymiz:

flowchart TB
  A["Sahifalar qidiruvda yoki<br/>havolada ko'rinishi kerakmi?"]
  A -->|yo'q: panel, kabinet| SPA["Vite SPA"]
  A -->|ha| B["Interaktivlik ko'pmi?<br/>forma, filtr, kabinet"]
  B -->|kam: matn, rasm| AS["Astro yoki<br/>Next (statik)"]
  B -->|ko'p| C["Server kodi kerakmi?<br/>forma, API, kesh"]
  C -->|ha| NX["Next.js"]
  C -->|yo'q| RR["Next yoki React<br/>Router framework"]

Diagrammaning birinchi savoliga qarang: u texnologiya haqida emas, foydalanuvchi haqida. vazifalar birinchi savolda chap tomonga ketadi — shaxsiy ro'yxat qidiruvda chiqmasligi kerak. Portfolio v2 esa oxirigacha boradi: ochiq sahifalar, filtr va forma, serverda o'qiladigan Markdown. Shuning uchun kanon Next.js'ni tanladi.

7.3 Next.js kerak bo'lmagan joylar

Halol ro'yxat:

• Bitta sahifali landing — oddiy HTML va CSS (04–06-qismlar) yoki Astro yetadi. 132 KB poydevor ortiqcha.
• Kirish ortidagi ichki ilova — SEO kerak emas, server render foyda bermaydi. Vite SPA sodda va GitHub Pages'da bepul turadi.
• Faqat statik hosting bor — Next'ning server qismlari (Server Actions, dinamik sahifalar) ishlamaydi. Statik eksport mumkin, lekin ko'p imkoniyat yo'qoladi.
• Jamoa React'ni endi o'rganyapti — avval SPA'da React'ni mustahkamlash, keyin Next. Siz bu yo'lni bosib o'tdingiz.

8. Ko'p uchraydigan xatolar

9. Mashqlar

Mashqlar kurs/mashqlar/23/01-nextjs-nima/ da.

1-mashq (oson): bo'sh joylarni to'ldiring

• Boshqa kutubxona yoki framework ustiga qurilgan framework — .
• Server tayyor HTML'ga brauzerda hodisalarni ulash — .
• Next 16 da sukut bo'yicha ishlaydigan bundler — .
• Server Components ishlaydigan yangi router — .
• Next.js'ni yaratgan kompaniya — .

2-mashq (o'rta): qaysi vosita?

Har loyiha uchun vosita tanlang (Vite SPA, Next.js, Astro, React Router framework) va bir gap bilan asoslang:

1. «Bahor» oshxonasining ichki buyurtma paneli — faqat oshpazlar kiradi.
2. Toshkentdagi o'quv markazining 5 sahifali sayti: kurslar, narxlar, manzil.
3. Onlayn kitob do'koni: katalog qidiruvda chiqsin, savatcha va to'lov bo'lsin.
4. Kompaniya ichidagi hujjatlar sayti — 300 ta Markdown sahifa, deyarli interaktivlik yo'q.
5. Sizning portfolio v2 ingiz.

3-mashq (qiyin): har sahifaga render usuli

Next.js'da har sahifa o'z render usulini oladi. Funksiya yozing: chooseRendering(page) sahifa obyektini oladi va "SSG", "SSR" yoki "CSR" qaytaradi. Qoidalar tartib bilan:

1. Sahifa shaxsiy (personal: true, faqat kirgan foydalanuvchi ko'radi) — "CSR" (brauzerda chiziladi, qidiruvga kerak emas).
2. Mazmun har so'rovda yangi bo'lishi kerak (fresh: true) — "SSR".
3. Qolgan hammasi — "SSG" (build vaqtida tayyor HTML).

Keyin quyidagi ro'yxat uchun har qatorni /blog — SSG shaklida chiqaring. Ishora: for...of va shablon satr (Template literal) yetadi.

const pages = [
  { path: "/", fresh: false, personal: false },
  { path: "/blog", fresh: false, personal: false },
  { path: "/qidiruv?q=react", fresh: true, personal: false },
  { path: "/kabinet", fresh: true, personal: true },
];

function chooseRendering(page) {
  if (page.personal) return "CSR";
  if (page.fresh) return "SSR";
  return "SSG";
}

const pages = [
  { path: "/", fresh: false, personal: false },
  { path: "/blog", fresh: false, personal: false },
  { path: "/qidiruv?q=react", fresh: true, personal: false },
  { path: "/kabinet", fresh: true, personal: true },
];

for (const page of pages) {
  console.log(`${page.path} — ${chooseRendering(page)}`);
}

/ — SSG
/blog — SSG
/qidiruv?q=react — SSR
/kabinet — CSR

4-mashq: Portfolio qadami — v1 auditi

Bu darsda kod yozilmaydi: kanonda #01 uchun holat yo'q, faqat o'lchov. Portfolio v2 ni boshlashdan oldin v1 ni ko'zdan kechiring:

1. login.github.io saytingizni Chrome'da oching. DevTools'da Ctrl+Shift+P → "Disable JavaScript" ni tanlang va sahifani yangilang. Qaysi narsalar ishlamay qoldi?
2. v1 dagi hamma sahifalar ro'yxatini yozing va har biriga 3-mashqdagi usulni (SSG, SSR, CSR) belgilang.
3. v2 da yangi qo'shiladigan sahifalarni ham qo'shing: blog, har loyiha uchun case study, ingliz tili.

10. Real ishda

• Vakansiyalarda "React" yonida ko'pincha "Next.js" yoziladi: ochiq saytli mahsulotlar (do'kon, media, SaaS'ning marketing qismi) ko'p hollarda Next'da.
• Ichki panellar esa ko'pincha Vite SPA'da qoladi. Bir kompaniyada ikkalasi yonma-yon turishi odatiy: sayt — Next, admin panel — SPA.
• Intervyu savollari: "CSR, SSR va SSG farqi?", "Next.js React'ga nima qo'shadi?", "App Router va Pages Router farqi?", "Qachon Next.js kerak emas?", "Hydration nima?".
• Eski loyihalar: App Router Next 13.4 da (2023-yil may) barqaror deb e'lon qilingan. Undan oldin boshlangan Next loyihalari deyarli hammasi Pages Router'da — boshqa barqaror router yo'q edi. Ishga kirganda shunday kodni o'qish ehtimoli yuqori.

Xulosa

• React — UI kutubxonasi; Next.js — React ustidagi meta-framework: routing, render joyi, server kodi va build.
• SPA'ning cheklovi — bo'sh HTML va JS'ni kutadigan birinchi kadr; Next matnni birinchi javobda beradi.
• Next 16: App Router, Turbopack sukut bo'yicha, proxy.ts, Cache Components; Next'ni Vercel yaratadi, lekin u Vercel'siz ham ishlaydi.
• Narx o'lchangan: bo'sh sahifa 132.4 KB gzip JS, butun portfolio v2 — 144.1–155.3 KB.
• Tanlov foydalanuvchidan boshlanadi: ochiq sahifalar va server kodi — Next; kirish ortidagi ilova — SPA; mazmunli sayt — Astro.

Keyingi dars: Loyiha yaratish va tuzilishi — create-next-app bilan portfolio v2 skeletini yaratamiz va u yaratgan har bir fayl va papkaning vazifasini ko'ramiz.

Manbalar

• Next.js tarixi: "Next.js" e'loni (2016-10-25) — vercel.com/blog/next; "Next.js 13.4" (2023-05-04, App Router barqaror) — nextjs.org/blog/next-13-4
• Next.js hujjati (16.4.0 bilan birga keladi, node_modules/next/dist/docs/): "Next.js Docs" (App Router va Pages Router), "How to upgrade to version 16" — nextjs.org/docs
• create-next-app 16.4.0 yaratgan README.md (Vercel haqidagi jumla)
• Kanon o'lchovlari: natijalar/tekshiruv-02.txt, tekshiruv-43.txt, natijalar/versiyalar-2026-10-21.txt (2026-10-21); vazifalar v12 — 22-qism kanon o'lchovi (2026-10-20)
• Astro hujjati: "Islands architecture" — docs.astro.build