Next.js loyiha yaratish va tuzilishi: create-next-app, app/, public/ va config fayllar

Qisqacha: npx create-next-app@16.4.0 portfolio Next.js loyihasini yaratadi: src/app/ da sahifalar (layout.tsx, page.tsx), public/ da to'g'ridan-to'g'ri beriladigan fayllar, ildizda next.config.ts, tsconfig.json, eslint.config.mjs va avtomatik yoziladigan next-env.d.ts. next dev va next build Turbopack'da ishlaydi, natija .next/ papkasiga tushadi. Har bir fayl aniq vazifaga ega — bu darsda hammasini ochamiz va portfolio v2 skeletini yaratamiz.

Bu darsda

• create-next-app ni aniq versiya va bayroqlar bilan ishga tushirasiz, --yes tuzog'ini bilasiz.
• Yaratilgan har bir fayl va papkaning (app/, public/, src/, next.config.ts, next-env.d.ts, tsconfig.json) vazifasini tushuntirasiz.
• next dev, next build va next start chiqishini o'qiysiz, .next/ papkasi nima ekanini bilasiz.
• AGENTS.md va node_modules ichidagi Next hujjati nima uchun kerakligini bilasiz.
• Portfolio v2 skeletini kanon bo'yicha sozlaysiz: versiyalar qotirilgan, Tailwind'siz, qat'iy TypeScript va Prettier bilan.

Oldin bilishingiz kerak: Next.js nima va qachon kerak, npx va npm create, Semver va versiya diapazonlari, tsconfig frontend loyihada.

1. Nega bu kerak?

17-qismda Vite shabloni bilan birinchi React loyihani yaratgan edingiz (Birinchi React loyiha). U yerda hammasi ko'z oldida edi: index.html, main.tsx, createRoot. Next.js'da bunday "kirish nuqtasi" yo'q. index.html ham, createRoot ham ko'rinmaydi — Next ularni o'zi qiladi.

Bu qulay, lekin xavfli tomoni ham bor. Fayl nomi bitta harfga xato bo'lsa (pages.tsx), Next uni shunchaki ko'rmaydi. Yashirin fayl (next-env.d.ts) git'da o'zgarib turadi va siz sababini bilmaysiz. Xato xabari "Server Component" deydi — siz esa hech qanday server yozmagansiz.

O'xshatish: yangi kvartiraga ko'chdingiz. Hisoblagich, ventil, elektr shiti — hammasi devor ichida. Uyda bemalol yashaysiz. Lekin quvur oqqanda qaysi ventilni burashni bilmasangiz, suv qo'shniga tushadi. Bu dars — kvartiraning sxemasi.

2. create-next-app

2.1 Buyruq va aniq versiya

Next loyihasi create-next-app CLI'si bilan yaratiladi. npx darsida ko'rganingizdek, npx paketni yuklab, bir marta ishga tushiradi. Kursda versiyani aniq yozamiz — @latest har oy boshqa narsa o'rnatadi:

npx create-next-app@16.4.0 portfolio --yes --src-dir --use-npm \
  --skip-install --disable-git --no-agent-feedback

Chiqish (biz ishga tushirdik, 2026-10-21; foydalanuvchi papkasi qisqartirilgan):

Creating a new Next.js app in C:/Users/…/portfolio.

Using npm.

Initializing project with template: app-tw

Skipping git initialization.

Success! Created portfolio at C:/Users/…/portfolio

A new version of `create-next-app` is available!
You can update by running: npm i -g create-next-app

app-tw — shablon nomi: App Router + Tailwind. Oxirgi ogohlantirish to'g'ri: 16.4.0 dan yangi versiya bor, biz ataylab eskisini tanladik (Next.js nima darsidagi "7 kun" qoidasi). Global o'rnatish taklifiga e'tibor bermang — npx yetadi.

2.2 Bayroqlar

npx create-next-app@16.4.0 --help ning eng kerakli qatorlari (yordam matnidan, tarjimasi bilan):

--skip-install ni kanon versiyalarni o'rnatishdan oldin qotirish uchun ishlatdi («Portfolio qadami» da). --disable-git — git'ni o'zimiz ochamiz. --no-agent-feedback — AI agent uchun Next'ga fikr yuborish rejimini o'chiradi (u baribir sukut bo'yicha o'chiq).

2.3 Savollar

Bayroqsiz npx create-next-app@16.4.0 savol beradi. Next 16.4.0 bilan birga keladigan hujjatdagi ro'yxat:

What is your project named? my-app
Would you like to use the recommended Next.js defaults?
    Yes, use recommended defaults - ...
    No, reuse previous settings
    No, customize settings - Choose your own preferences

"customize" tanlansa — har bayroq uchun bittadan savol: TypeScript, linter (ESLint, Biome yoki yo'q), React Compiler, Tailwind, src/ papkasi, App Router, Cache Components, import taxallusi va AGENTS.md. Har savol yuqoridagi jadvaldagi bitta bayroqqa mos.

2.4 Tuzoq: --yes "sukut" emas

Yordam matni --agents-md ni "(default)" deydi. Lekin kanon ham, biz ham --yes bilan yaratganda AGENTS.md paydo bo'lmadi. Sababini --yes ning to'liq tavsifi aytadi: "saqlangan tanlovlar yoki sukut". create-next-app oldingi javoblaringizni kompyuterda saqlaydi. Windows'da — %APPDATA%\create-next-app-nodejs\Config\config.json. Bizning kompyuterdagi fayldan:

"srcDir": true,
"app": true,
"importAlias": "@/*",
"agentsMd": false

Ya'ni bir paytlar shu kompyuterda AGENTS.md siz loyiha yaratilgan, va --yes o'sha tanlovni takrorladi. Yechim — kerakli narsani bayroq bilan aniq aytish (--agents-md bilan fayl yaratildi) yoki --reset-preferences. Saboq umumiy: "sukut bo'yicha" degan narsa boshqa kompyuterda boshqacha bo'lishi mumkin.

Tekshirib ko'ring: Ikki o'quvchi bir xil npx create-next-app@16.4.0 portfolio --yes buyrug'ini berdi. Birida src/ papkasi bor, ikkinchisida yo'q. Qanday bo'lishi mumkin?

3. Fayl sayohati

3.1 Daraxt

--skip-install dan keyin, npm install dan oldin (biz yaratgan nusxa):

portfolio/
├── .gitignore
├── README.md
├── eslint.config.mjs
├── next-env.d.ts
├── next.config.ts
├── package.json
├── tsconfig.json
├── public/
│   ├── file.svg, globe.svg, next.svg
│   └── vercel.svg, window.svg
└── src/
    └── app/
        ├── favicon.ico
        ├── globals.css
        ├── layout.tsx
        └── page.tsx

Kim qaysi faylni o'qishini diagrammada ko'ring. Strelkalar — "kim kimni ishlatadi":

flowchart LR
  P["package.json<br/>scripts"] --> N["next dev / build"]
  C["next.config.ts"] --> N
  N --> L["src/app/layout.tsx"]
  L --> G["src/app/page.tsx"]
  N --> PUB["public/<br/>fayllar o'zicha"]
  T["tsconfig.json<br/>next-env.d.ts"] --> TS["tsc va muharrir"]
  E["eslint.config.mjs"] --> ES["eslint"]

Uch guruh bor. Next o'zi o'qiydigan fayllar — chap tepada. Faqat tekshiruv vositalari (TypeScript, ESLint) o'qiydigan fayllar — pastda. public/ esa hech qanday ishlovsiz beriladi.

3.2 package.json

Yaratilgan fayldan asosiy qismi:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "next": "16.4.0",
    "react": "19.3.0",
    "react-dom": "19.3.0"
  },
  "devDependencies": {
    "@tailwindcss/turbopack": "^4",
    "@types/node": "^20",
    "typescript": "^5"
  }
}

(devDependencies dan uchtasi ko'rsatilgan.) To'rtta skript:

• next dev — ishlab chiqish serveri, Fast Refresh bilan.
• next build — production build, natija .next/ da.
• next start — build qilingan ilovani Node serverda ishga tushiradi. Build'siz ishlamaydi.
• eslint — linter. Next 16 dan next lint buyrug'i yo'q.

Diqqat qiling: next, react va react-dom aniq versiyada, qolganlari esa ^ bilan. Semver darsidan bilasiz: "typescript": "^5" — "5.x ning eng yangisi". Bugun o'rnatgan va bir oydan keyin o'rnatgan o'quvchi turli versiya oladi. Shuning uchun kanon hammasini aniq versiyaga o'tkazdi.

Vite shablonidan farqi: vite va @vitejs/plugin-react yo'q. Bundler (Turbopack) ham, JSX o'giruvchi ham next paketining ichida.

3.3 next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  cacheComponents: true,
  partialPrefetching: true,
  turbopack: {
    rules: {
      "*.css": {
        loaders: ["@tailwindcss/turbopack"],
        as: "*.css",
      },
    },
  },
};

export default nextConfig;

Next'ning yagona sozlamalar fayli — TypeScript'da, turi NextConfig (muharrir har maydonni taklif qiladi). Shablon allaqachon uchta narsani yoqqan:

• cacheComponents: true — Cache Components rejimi: nima keshlanishini "use cache" bilan siz aniq aytasiz (Cache Components I).
• partialPrefetching: true — havolalar sahifani qisman oldindan yuklaydi (Navigatsiya).
• turbopack.rules — .css fayllar Tailwind orqali o'tadi. Kanon topilmasi: Next 16.4 shablonida Tailwind PostCSS orqali emas, Turbopack loader'i orqali ulanadi — postcss.config.mjs fayli umuman yo'q.

Fayl to'liq — next.config chuqur darsida.

3.4 tsconfig.json — bitta fayl

tsconfig darsida Vite shablonida uchta fayl ko'rgan edik (tsconfig.json, .app, .node) va "Next o'zi Node va brauzer kodini boshqa mexanizm bilan ajratadi — 23-qismda" degan edik. Mana Next shablonining muhim qatorlari:

{
  "compilerOptions": {
    "target": "ES2017",
    "allowJs": true,
    "strict": true,
    "noEmit": true,
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "plugins": [{ "name": "next" }],
    "paths": { "@/*": ["./src/*"] }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".next/dev/types/**/*.ts"
  ]
}

Bu yerda uchta yangi narsa bor:

1. noEmit: true — tsc hech qanday JS yozmaydi. Kodni Next o'zi (Turbopack) o'giradi, tsc faqat turlarni tekshiradi. Shuning uchun bitta fayl yetadi.
2. plugins: [{ "name": "next" }] — muharrir (VS Code) uchun plagin: Next'ga xos xatolarni yozish paytida ko'rsatadi. tsc buyrug'i uni ishlatmaydi.
3. .next/types/** — Next yozadigan turlar. Masalan, layout.tsx dagi LayoutProps<"/"> — import qilinmagan global tur, uni next typegen (yoki next dev/next build) yaratadi.

Server va brauzer kodi qanday ajratiladi? tsconfig orqali emas — har komponent sukut bo'yicha serverda ishlaydi, brauzerga kerak bo'lganini siz "use client" bilan belgilaysiz (Client Components). paths — path alias darsidagi @/ taxallusi. Next uni o'zi o'qiydi, Vite'dagidek ikki joyda yozish shart emas.

3.5 next-env.d.ts — o'zgarib turadigan fayl

Yaratilgan zahoti:

/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts";

// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

Biz next dev ni ishga tushirdik — fayl o'zi o'zgardi:

import "./.next/dev/types/routes.d.ts";
import "./.next/dev/types/root-params.d.ts";

next build dan keyin esa yana ./.next/types/... ga qaytdi. Fayl Next'ning turlarini (next/image importlari, marshrut turlari) TypeScript'ga ulaydi. Izohda aytilgan: tahrirlamang. Va u .gitignore da — har dev/build almashinuvida o'zgaradigan faylni git'ga qo'shish ma'nosiz.

3.6 eslint.config.mjs

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  globalIgnores([
    ".next/**",
    "out/**",
    "build/**",
    "next-env.d.ts",
  ]),
]);

ESLint flat config — siz bilgan format. eslint-config-next/core-web-vitals — React, hooklar, a11y va Next qoidalari (masalan, <img> o'rniga next/image taklifi). eslint-config-next/typescript — TS qoidalari. .next/ — build natijasi, uni tekshirmaymiz.

3.7 src/app/ — sahifalar

layout.tsx — root layout: hamma sahifani o'raydigan qobiq. index.html ning o'rnini shu fayl egallaydi: <html> va <body> ni siz yozasiz. Shablondan (Tailwind sinflari qisqartirilgan):

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});
// … geistMono ham shunday

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en" className={`${geistSans.variable} …`}>
      <body className="min-h-full flex flex-col">{children}</body>
    </html>
  );
}

metadata — <title> va description HTML'ga serverda yoziladi (Metadata API). next/font/google — Google shriftini build vaqtida yuklab, o'z serveringizdan beradi (next/font). children — hozirgi sahifa.

page.tsx — / manzilidagi sahifa. Fayl nomi page bo'lishi shart: Next aynan shu nomni qidiradi (Fayl-asosli routing).

favicon.ico — maxsus fayl: app/ ichida tursa ham, Next uni /favicon.ico manzilida beradi va <head> ga havolasini qo'shadi. globals.css — global stil, layout.tsx uni import qiladi.

Next layout va sahifani qanday birlashtiradi? Taxminan shunday — biz buni natija oynasida qo'lda qilamiz. <html> va <body> ni natija oynasida chizib bo'lmaydi (u allaqachon sahifa ichida), shuning uchun layout <div> bilan:

import type { ReactNode } from "react";

// Next'da: src/app/layout.tsx (u yerda <html> va <body>)
function RootLayout({ children }: { children: ReactNode }) {
  return (
    <div lang="uz">
      <header>Aziz Karimov — portfolio</header>
      {children}
    </div>
  );
}

// Next'da: src/app/page.tsx — manzil "/"
function BoshSahifa() {
  return (
    <main>
      <h1>Salom, men Aziz — frontend dasturchiman</h1>
      <p>Portfolio v2: Next.js'da qayta qurilmoqda.</p>
    </main>
  );
}

// Bu qismni Next o'zi qiladi: manzilga mos page'ni
// layout'ning children'iga qo'yadi
export default function App() {
  return (
    <RootLayout>
      <BoshSahifa />
    </RootLayout>
  );
}

Ekranda:

Aziz Karimov — portfolio
Salom, men Aziz — frontend dasturchiman
Portfolio v2: Next.js'da qayta qurilmoqda.

Next'da App funksiyasini siz yozmaysiz. Brauzer / ni so'raganda Next page.tsx ni topadi, uni layout.tsx ning children iga qo'yadi va natijani HTML qilib yuboradi. Layout'dagi sarlavha (header) — faqat misol uchun, kanon uni Layout va template darsida qo'shadi.

3.8 public/ va src/

public/ — fayllar ishlovsiz, sayt ildizidan beriladi: public/next.svg → /next.svg. Vite'dagi public papka bilan bir xil g'oya. Rasm src/ ichidan import qilinsa, Next uning o'lchamini biladi va nomiga hash qo'shadi. public/ dagi fayl esa nomi bilan, o'zgarmasdan qoladi — robots.txt va tashqi xizmatlar so'raydigan fayllar uchun qulay.

Diqqat: hujjat ogohlantiradi: public/ dagi fayl pages/ (eski Pages Router) dagi sahifa bilan bir xil nomda bo'lsa — xato. App Router uchun shunday to'qnashuvni biz sinamadik. Qoida oddiy: public/ dagi fayl nomlari sahifa manzillari bilan ustma-ust tushmasin.

src/ — ixtiyoriy papka (--src-dir). Kod src/app/ da, config fayllar esa ildizda qoladi. Bu ularni bir-biridan ajratadi. Hujjat ikkala variantni ham qo'llaydi, src/ yo'q bo'lsa — app/ ildizda.

3.9 .gitignore, AGENTS.md va Next hujjati

.gitignore dan muhim qatorlar: /.next/ (build natijasi), .env* (maxfiy sozlamalar), .vercel, *.tsbuildinfo va next-env.d.ts.

AGENTS.md — AI agentlar uchun loyiha qoidalari fayli, uni AI bilan samarali ishlash darsida o'zingiz yozgansiz. Next 16.3 dan boshlab bu faylga o'z blokini qo'yadi:

## This is NOT the Next.js you know

This version has breaking changes — APIs, conventions, and file
structure may all differ from your training data. Read the relevant
guide in `node_modules/next/dist/docs/` …

Tarjimasi: "Bu siz bilgan Next.js emas. Bu versiyada buzuvchi o'zgarishlar bor — API'lar, qoidalar va fayl tuzilmasi o'qitish ma'lumotlaringizdan farq qilishi mumkin. Kod yozishdan oldin node_modules/next/dist/docs/ dagi tegishli qo'llanmani o'qing."

Muammo haqiqiy: AI model bir-ikki yil oldingi Next'ni eslaydi (Pages Router, middleware.ts). Shuning uchun Next o'z hujjatini paket ichida olib keladi. Biz sanadik: 16.4.0 da 472 ta Markdown fayl, 4.2 MB. Tarmoq orqali o'qiydigan agentlar uchun esa nextjs.org'da llms.txt va llms-full.txt fayllari bor — "AI uchun mundarija" standarti. Bu hujjat siz uchun ham foydali: u aynan o'rnatilgan versiyaga mos.

Tekshirib ko'ring: Rasmni public/men.jpg ga qo'ydingiz. Sahifada qaysi manzil bilan ishlatasiz: /public/men.jpg yoki /men.jpg?

4. O'rnatish va ishga tushirish

4.1 npm install

Kanon shablonni (Tailwind bilan) o'rnatganda: 3 daqiqa 40 soniya, node_modules — 463 MB. Biz kanon holatini (Tailwind'siz, «Portfolio qadami» dagi versiyalar bilan) npm ci qildik:

npm warn deprecated eslint@9.39.5: This version is no longer supported. Please see https://eslint.org/version-support for other options.

added 345 packages in 2m
npm warn install-scripts 1 package has install scripts not yet covered by allowScripts:
npm warn install-scripts   unrs-resolver@1.12.2 (postinstall: node postinstall.js)
npm warn install-scripts
npm warn install-scripts Run `npm install-scripts ls` to review, or `npm install-scripts approve <pkg>` to allow.

Ikki ogohlantirishni tanisiz:

• eslint 9 eskirgan — ESLint 10 chiqqan. Shablon "eslint": "^9" yozadi, kanon shu diapazondagi eng yangi 9.39.5 ni oldi. eslint-config-next ning o'zi >=9 ga ruxsat beradi, lekin ESLint 10 bilan kanon sinamagan. Ogohlantirishni bilib qo'yamiz — bu xato emas.
• install-scripts — npm 11 begona o'rnatish skriptini ruxsatsiz bajarmaydi (ta'minot zanjiri). unrs-resolver — eslint-import-resolver-typescript ishlatadigan yo'l qidiruvchi (ESLint import qoidalari uchun). Kanon tekshirdi: skriptsiz ham lint ishlaydi, ruxsat berish shart bo'lmadi.

345 paket — 3 ta asosiy bog'liqlik uchun. Ko'pi ESLint va TypeScript'ning yordamchilari. Eng kattalari (biz o'lchadik, du): next — 203 MB (ichida React'ning bir nechta nusxasi va hujjat), @next/swc-win32-x64-msvc — 106 MB (Turbopack va SWC'ning Windows uchun tayyor dasturi; boshqa tizimda paket nomi boshqa).

4.2 next dev

npm run dev

Biz ishga tushirgan chiqish (port -p 3123 bilan; "Network" qatori olib tashlangan):

▲ Next.js 16.4.0 (Turbopack)
- Local:         http://localhost:3123
✓ Ready in 500ms
✓ Running next.config.ts took 56ms
- Cache Components enabled
- Partial Prefetching enabled

 GET / 200 in 968ms (next.js: 679ms, application-code: 289ms)

"Ready in 500ms" — server tayyor, lekin sahifalar hali yig'ilmagan. Birinchi GET / 968 ms oldi: Turbopack sahifani birinchi so'rovda yig'adi. Keyingi so'rovlar tez. Faylni saqlasangiz, Fast Refresh o'zgarishni sahifaga yetkazadi — Vite'dagidek (Fast Refresh).

next dev natijani .next/dev/ ga yozadi, next build esa .next/ ga. Next 16 da ular ajratildi — ikkalasini bir vaqtda ishlatish mumkin.

4.3 next build

Kanon skeletni build qildi (natijalar/tajriba/b00.txt, aynan):

▲ Next.js 16.4.0 (Turbopack)
✓ Running next.config.ts took 109ms
- Cache Components enabled
- Partial Prefetching enabled

  Creating an optimized production build ...
✓ Compiled successfully in 9.4s
  Running TypeScript ...
  Finished TypeScript in 5.9s ...
  Collecting page data using 5 workers ...
✓ Generating static pages using 5 workers (4/4) in 2.1s
  Finalizing page optimization ...

Route (app)
┌ ○ /
└ ○ /_not-found


○  (Static)  prerendered as static content

(«Generating» ning oraliq qatorlari — 0/4 … 3/4 — olib tashlangan.) Qadamlar: kodni yig'ish, TypeScript tekshiruvi (ha, next build tsc ni o'zi ishlatadi), sahifalarni oldindan chizish.

Pastdagi jadval — route jadvali: qaysi sahifa qanday render qilinadi. ○ — statik: sahifa build vaqtida HTML bo'lib tayyorlandi. /_not-found — Next'ning sukut bo'yicha 404 sahifasi. Kanon o'lchovi: Next 16.4 jadvalida eski versiyalardagi "Size" va "First Load JS" ustunlari yo'q. Shuning uchun JS hajmini brauzerda o'lchaymiz.

Vaqt mashinaga va keshga bog'liq: kanonda 24–41 soniya, bizning qayta build'imizda (issiq kesh) — 6 soniya.

4.4 next start

npm run start

Server .next/ dagi tayyor natijani beradi. Biz -p 3124 bilan ishga tushirib, / sarlavhalarini oldik (curl -D, bir qismi):

HTTP/1.1 200 OK
x-nextjs-cache: HIT
x-nextjs-prerender: 1
X-Powered-By: Next.js
Cache-Control: s-maxage=31536000
Content-Type: text/html; charset=utf-8
Content-Length: 5748

x-nextjs-prerender: 1 — sahifa build vaqtida tayyorlangan, server uni faqat o'qib berdi. s-maxage=31536000 — oraliq keshlar (CDN) uchun "bir yil saqla". X-Powered-By: Next.js — server o'zini tanishtiradi; hujumchiga ortiqcha ma'lumot, kanon uni next.config chuqur darsida o'chiradi.

4.5 Brauzerda qaysi React?

package.json da "react": "19.3.0". Lekin build'dan keyin brauzerga boradigan JS fayllarni qidirdik:

grep -h -o "\"19\.3\.0[-a-z0-9]*\"" .next/static/chunks/*.js

"19.3.0-canary-278794d7-20261002"

Kutilmagan natija: brauzer package.json dagi React'ni emas, Next ichidagi canary nusxasini oladi. Next hujjati buni ochiq aytadi: App Router React'ning canary relizlarini o'zi bilan olib keladi. Ularda React 19 ning barqaror o'zgarishlari bor, ustiga framework'larda sinalayotgan yangi imkoniyatlar. react va react-dom ni package.json da baribir yozish kerak — TypeScript, ESLint va boshqa vositalar ularga qaraydi.

Amaliy ma'nosi: Next loyihasidagi React versiyasini package.json emas, next versiyasi belgilaydi. React'ni yangilash uchun — Next'ni yangilaysiz.

5. Portfolio qadami: skelet (holat 02)

5.1 Vazifa

Portfolio v2 ning poydevori: shablonni kanon qarorlari bo'yicha tozalaymiz va qat'iylashtiramiz. Kanon commit xabari:

Next: create-next-app 16.4.0 skeleti, versiyalar qotirildi, AGENTS.md

5.2 Kanon qarorlari

1. Tailwind olib tashlandi. v1 dizayni CSS tokenlarda yozilgan (05–06-qismlar). Tailwind'ga ko'chirish — qayta yozish; qaror Next.js'da stil va tema darsida o'lchov bilan asoslanadi. next.config.ts dan turbopack.rules ham olib tashlandi.
2. Geist o'rniga keyinroq v1 shrifti (Rubik, next/font darsida). Hozircha system-ui.
3. Versiyalar aniq. Hamma ^ — aniq versiya (--save-exact), engines — Next talab qiladigan Node 20.9+.
4. tsconfig qat'iylashtirildi: target ES2022, noUncheckedIndexedAccess, allowJs: false.
5. Skriptlar: lint (--max-warnings=0), tip (next typegen && tsc --noEmit), format, format:check, check. Prettier 3.9.10.
6. AGENTS.md = Next'ning rasmiy bloki + loyiha qoidalari (o'zbekcha).

package.json farqi (shablon → kanon):

-  "version": "0.1.0",
+  "version": "2.0.0",
@@ scripts
-    "lint": "eslint"
+    "lint": "eslint --max-warnings=0",
+    "tip": "next typegen && tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "check": "npm run lint && npm run tip && npm run format:check"
@@ devDependencies
-    "@tailwindcss/turbopack": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
+    "@types/node": "24.19.2",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "eslint": "9.39.5",
     "eslint-config-next": "16.4.0",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "prettier": "3.9.10",
+    "typescript": "6.0.3"
+  },
+  "engines": {
+    "node": ">=20.9.0"

typescript — 6.0.3, 7 emas: kanon qarori bo'yicha TypeScript 7 — native kompilyator, uning JS API'si yo'q, shuning uchun hali 6. @types/node 24 — Node 24 da ishlaymiz.

tsconfig.json farqi:

-    "target": "ES2017",
+    "target": "ES2022",
-    "allowJs": true,
+    "allowJs": false,
@@
-    }
+    },
+    "noUncheckedIndexedAccess": true

noUncheckedIndexedAccess — massivdan arr[0] olinsa, tur T | undefined bo'ladi (tsconfig chuqur). vazifalar da ham shunday edi.

5.3 ESLint topilmasi: o'zbekcha apostrof

Shablon ESLint'i bilan kanonning birinchi sahifasini tekshirdik. Bitta gapda — bitta xato:

src\app\page.tsx
  5:31  error  `'` can be escaped with `'`, `‘`, `'`, `’`  react/no-unescaped-entities

✖ 1 problem (1 error, 0 warnings)

Tarjimasi: "' belgisini ', ‘, ' yoki ’ bilan almashtirish mumkin." 5-qator, 31-ustun — Next.js'da so'zidagi apostrof. react/no-unescaped-entities qoidasi JSX matnidagi ', ", > va } ni xato deydi: ular ba'zan yopilmagan teg yoki ifodaning belgisi bo'ladi. Ingliz matnida ' kam uchraydi. O'zbek matnida esa har gapda bor: o'zbek, bo'ladi, Next.js'da.

Kanon qarori — qoidani o'chirmasdan, faqat ' ga ruxsat berish (izoh qatori telefon uchun ikkiga bo'lingan):

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  {
    rules: {
      // O'zbek matnida tutuq belgisi (') har gapda bor —
      // faqat ' ruxsat, > " } taqiqda qoladi
      "react/no-unescaped-entities": ["error", { forbid: [">", '"', "}"] }],
    },
  },
  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
]);

>, " va } taqiqda qoladi — ular haqiqatan ham xato belgisi bo'lishi mumkin.

5.4 Sahifa va layout

Kanon src/app/layout.tsx:

import type { Metadata } from "next";
import "./globals.css";

export const metadata: Metadata = {
  title: "Aziz Karimov — portfolio",
  description: "Aziz Karimovning portfoliosi: loyihalar, blog va aloqa.",
};

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="uz">
      <body>{children}</body>
    </html>
  );
}

lang="uz" — ekran o'quvchi (Malika) matnni o'zbekcha talaffuz bilan o'qiydi. LayoutProps<"/"> — import yo'q, global tur (next typegen yaratadi). page.tsx — yuqoridagi jonli misoldagi BoshSahifa ning o'zi. globals.css — Tailwind'siz, 8 qator:

:root {
  color-scheme: light dark;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

public/ dagi SVG'lar va favicon.ico o'chirildi — ular Next va Vercel logolari.

AGENTS.md — rasmiy blokdan keyin loyiha qoidalari (kanondan; uzun bandlar telefon uchun ikki qatorga bo'lingan, Markdown'da natija bir xil):

## Loyiha qoidalari (portfolio v2)

- Next.js 16.4.0, App Router, `src/app/`. TypeScript `strict` +
  `noUncheckedIndexedAccess`.
- Komponentlar sukut bo'yicha **Server Component**; `"use client"`
  faqat holat, hodisa yoki brauzer API kerak bo'lgan barg komponentda.
- Matn va izohlar o'zbekcha; o'quvchi ma'lumoti namunada —
  `example.com`.
- Tashqi xizmat, API kalit, hisob yo'q (Resend, Telegram bot,
  Vercel KV — faqat hujjatda).
- O'zgarishdan keyin: `npm run check` (lint, tip, format) va
  `npm run build`.

Bu qoidalar AI agentga ham, sizga ham bir xil. Ikkinchi band hozircha begona tuyulishi mumkin — u Server Components va Client Components darslarining qisqa xulosasi.

5.5 Tekshiruv

Kanon natijasi (tekshiruv-02.txt):

tip chiqishi:

Generating route types...
✓ Types generated successfully

Brauzer o'lchovi: / — status 200, TTFB 7 ms, JS 5 fayl 132.4 KB gzip, axe 0, hydration ogohlantirishi 0. Konsolda 1 xato:

error: Failed to load resource: the server responded with a status of 404 (Not Found)

Bu — favicon.ico. Brauzer uni o'zi so'raydi, biz esa faylni o'chirdik. Bu ataylab qoldirilgan: o'z ikonkamiz Fayl-asosli routing darsida icon.svg bo'lib keladi.

6. Ko'p uchraydigan xatolar

6.1 page.tsx da useState

Odatiy React'dagidek sahifaga hisoblagich qo'shdik va next build qildik (biz ishga tushirdik, ranglar olib tashlangan):

Error: Turbopack build failed with 1 error:
./src/app/page.tsx:1:10
Error: You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.

Tarjimasi: "useState ga bog'liq modulni React Server Component moduliga import qilyapsiz. Bu API faqat Client Component'larda bor. Tuzatish uchun faylni (yoki uning ota faylini) "use client" direktivasi bilan belgilang." Sabab — App Router'da hamma komponent sukut bo'yicha serverda ishlaydi, serverda esa bosish ham, holat ham yo'q. To'g'ri yechim faylning boshiga "use client" yozish emas — tugmani alohida kichik komponentga ajratish. Buni Client Components darsida o'rganamiz.

6.2 Boshqalar

Birinchi qatordagi xato g'alati ko'rinadi: Next "lint" so'zini papka nomi deb tushundi (next build <papka> kabi) va bunday papka topmadi. Buyruq olib tashlanganda eski so'z shunday kutilmagan xabar beradi.

7. Mashqlar

Mashqlar kurs/mashqlar/23/02-loyiha-tuzilishi/ da.

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

• Hamma sahifani o'raydigan, <html> va <body> yoziladigan fayl — src/app/.
• Fayllari sayt ildizidan ishlovsiz beriladigan papka — .
• next dev va next build o'zgartirib turadigan, tahrirlanmaydigan fayl — .
• Build natijasi tushadigan papka — .
• Route jadvalida statik sahifa belgisi — .

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

Har vazifa uchun faylni yoki papkani ayting:

1. Saytga robots.txt qo'shish (nomi o'zgarmasin).
2. Hamma sahifalarning <title> ini o'zgartirish.
3. @/komponentlar/Karta importi ishlashi uchun taxallus.
4. Build'ga yangi Next sozlamasini qo'shish.
5. npm run dev nimani ishga tushirishini ko'rish.
6. Bosh sahifadagi matnni o'zgartirish.

3-mashq (qiyin): aniq bo'lmagan versiyalar

Kanon package.json dagi hamma versiyani aniq qildi. findLooseVersions(pkg) funksiyasini yozing: u dependencies va devDependencies ni ko'rib chiqadi va aniq bo'lmagan versiyalar ro'yxatini "nom: versiya" shaklida qaytaradi. Aniq versiya — faqat raqam va nuqtadan iborat, masalan 16.4.0. ^, ~ yoki x bor versiya — aniq emas.

Ishora: Object.entries (Obyekt bo'ylab yurish), yoyish ... (Spread va rest) va /^\d+\.\d+\.\d+$/ muntazam ifodasi (RegExp asoslari) yetadi. Bo'lim yo'q bo'lsa, ?? {} bilan bo'sh obyekt oling.

const pkg = {
  dependencies: { next: "16.4.0", react: "19.3.0" },
  devDependencies: {
    "@tailwindcss/turbopack": "^4",
    "@types/node": "^20",
    "eslint-config-next": "16.4.0",
    typescript: "^5",
  },
};

function findLooseVersions(pkg) {
  const exact = /^\d+\.\d+\.\d+$/;
  const all = {
    ...(pkg.dependencies ?? {}),
    ...(pkg.devDependencies ?? {}),
  };
  const loose = [];
  for (const [name, version] of Object.entries(all)) {
    if (!exact.test(version)) loose.push(`${name}: ${version}`);
  }
  return loose;
}

const pkg = {
  dependencies: { next: "16.4.0", react: "19.3.0" },
  devDependencies: {
    "@tailwindcss/turbopack": "^4",
    "@types/node": "^20",
    "eslint-config-next": "16.4.0",
    typescript: "^5",
  },
};

console.log(findLooseVersions(pkg));
console.log(findLooseVersions({ dependencies: { zod: "4.6.7" } }));

[ '@tailwindcss/turbopack: ^4', '@types/node: ^20', 'typescript: ^5' ]
[]

4-mashq: Portfolio qadami

«Portfolio qadami» ni bajaring:

1. npx create-next-app@16.4.0 portfolio --yes --src-dir --use-npm --skip-install --disable-git --agents-md, keyin cd portfolio va git init.
2. package.json va tsconfig.json ni kanon farqi bo'yicha o'zgartiring, next.config.ts dan turbopack ni olib tashlang. @tailwindcss/turbopack va tailwindcss ni o'chiring, prettier ni qo'shing (.prettierrc.json — {}).
3. layout.tsx, page.tsx, globals.css, eslint.config.mjs va AGENTS.md ni kanon bo'yicha yozing. public/ dagi SVG'lar va favicon.ico ni o'chiring.
4. npm install, keyin npm run check va npm run build. Commit — kanon xabari bilan.

Keyin tekshiring: npm run dev ni ishga tushiring, next-env.d.ts ni oching va git status ga qarang. Nima ko'rasiz?

8. Real ishda

• Yangi loyiha ko'pincha create-next-app bilan boshlanadi, keyin jamoa shablonni o'z qoidalariga moslaydi — xuddi kanondagidek: versiyalar qotiriladi, keraksiz narsa olib tashlanadi, skriptlar qo'shiladi.
• Begona Next loyihasini ochganda birinchi ko'riladigan fayllar: package.json (Next versiyasi — qaysi hujjat kerak), next.config.ts, app/ yoki pages/ (qaysi router), src/ bor-yo'qligi (config fayllarni o'qish).
• AI agentlar bilan ishlaganda AGENTS.md va paket ichidagi hujjat eskirgan kod yozilishini kamaytiradi. Agent yozgan kodni baribir npm run check va build tekshiradi.
• Intervyu savollari: "public/ va app/ dagi fayl farqi?", "next-env.d.ts nima va nega git'da yo'q?", "next dev va next start farqi?", "Next'da React versiyasini nima belgilaydi?".

Xulosa

• npx create-next-app@16.4.0 — aniq versiya bilan; --yes saqlangan tanlovni ham oladi, kerakli bayroqni aniq yozing.
• src/app/layout.tsx — index.html o'rnida (<html>, <body>, metadata), page.tsx — sahifa; public/ — ildizdan, ishlovsiz.
• Bitta tsconfig.json (noEmit — kodni Turbopack o'giradi); next-env.d.ts — Next yozadi, tahrirlanmaydi, git'da yo'q.
• next dev → .next/dev/, next build → .next/ va route jadvali (○ — statik), next start — tayyor build'ni beradi.
• Brauzer React'ni Next ichidan oladi (19.3.0-canary-…); AGENTS.md agentni paket ichidagi hujjatga yo'naltiradi.
• Kanon skeleti: versiyalar qotirilgan, Tailwind'siz, qat'iy TS, Prettier, o'zbek apostrofiga ESLint istisnosi.

Keyingi dars: Fayl-asosli routing: page va dinamik segmentlar — papkalar bilan sahifalar yaratamiz, [slug] dinamik segmentini va params ni o'rganamiz.

Manbalar

• Next.js hujjati (16.4.0 bilan birga keladi, node_modules/next/dist/docs/): "Installation", "Project structure and organization", "How to upgrade to version 16", "How Next.js supports AI coding agents" — nextjs.org/docs
• create-next-app 16.4.0: --help chiqishi va yaratilgan shablon (biz ishga tushirdik, 2026-10-21)
• Kanon: holat 02, natijalar/tajriba/scaffold.txt, b00.txt, natijalar/tekshiruv-02.txt, natijalar/versiyalar-2026-10-21.txt (2026-10-21)
• ESLint: react/no-unescaped-entities qoidasi — eslint-plugin-react hujjati