Next.js deploy: next build, next start va Vercel'ga joylash

Qisqacha: Deploy'dan oldin ilovani o'z kompyuteringizda production rejimida tekshirasiz: npm run build (build jadvali va xatolar) va npm run start (haqiqiy server). Vercel — Next.js yaratuvchilarining platformasi: GitHub repoingizni ulaysiz, va har git push avtomatik build bo'ladi. main — production, boshqa branch va PR — alohida manzilli preview. Env o'zgaruvchilar panelda uch muhit bo'yicha (Production, Preview, Development) beriladi. Bepul Hobby tarifi faqat shaxsiy, notijorat loyihalar uchun. Bu darsda biz Vercel hisobini ochmadik: lokal production o'lchangan, Vercel oqimi rasmiy hujjat bo'yicha — uni o'zingiz bajarasiz.

Bu darsda

• next build chiqishini oxirigacha o'qiysiz: TypeScript, sahifalar yig'ish, ogohlantirishlar, route jadvali.
• next start bilan lokal production'ni tekshirasiz va deploy oldi ro'yxatini tuzasiz.
• Vercel'ga git orqali joylash, preview deploy va env muhitlari qanday ishlashini tushuntirasiz.
• Hobby tarifi limitlari, Fluid compute va Vercel'dagi portfolio farqlarini (tezlik cheklovi, .data, IP) bilasiz.
• output: "standalone" nima berishini kanon o'lchovi bilan bilib olasiz.

Oldin bilishingiz kerak: Env o'zgaruvchilar va sirlar, Runtime'lar: Node va Edge, GitHub Pages va Actions, Birinchi deploy.

1. Nega bu kerak?

04-qismda v1 portfolio'ni papkani sudrab tashlab joylagan edingiz, 07-qismda esa GitHub Pages har push'da o'zi yangilanadigan bo'ldi. O'shanda sayt faqat HTML, CSS va JS fayllardan iborat edi — har qanday statik hosting yetardi.

portfolio v2 boshqacha. Unda server kodi bor: aloqa formasi (Server Action), proxy.ts, /api/qayta-yangila Route Handler'i, "use cache" bilan yangilanadigan sahifalar. GitHub Pages server kodini bajara olmaydi. Next ilovasiga Node server kerak.

Ikki yo'l bor: tayyor platforma (Vercel, Netlify va boshqalar) yoki o'z serveringiz (VPS + Docker — keyingi qismlarda). Bu darsda birinchisi.

O'xshatish: to'y. O'zingiz restoran ijaraga olib, oshpaz, idish, stol yollasangiz — o'z server. To'yxona bilan kelishsangiz — hammasi tayyor, siz faqat mehmonlar ro'yxatini berasiz. To'yxona qulay, lekin uning qoidalari va narxi bor. Vercel — Next uchun to'yxona.

2. Avval lokal: production'ni o'z kompyuteringizda

2.1 Nega dev yetmaydi

next dev — dasturchi uchun: kod har safar so'rovda kompilyatsiya qilinadi, xato oynasi ochiq, kesh deyarli yo'q. Production esa boshqa dunyo: sahifalar build vaqtida tayyorlanadi, xato matnlari yashiriladi (Xatolar va instrumentation), NODE_ENV=production. Ko'p xato faqat build'da chiqadi: tur xatolari, prerender rad etishlari, env tekshiruvi.

Qoida: deploy'dan oldin har doim lokal npm run build && npm run start.

2.2 Biz ishga tushirdik: next build

portfolio (holat 43 nusxasi) da npx next build. Boshi:

▲ Next.js 16.4.0 (Turbopack)
✓ Running next.config.ts took 95ms
- Cache Components enabled
- Partial Prefetching enabled
- Experiments (use with caution):
  · serverActions

  Creating an optimized production build ...
✓ Compiled successfully in 5.9s
  Running TypeScript ...
  Finished TypeScript in 32.2s ...
  Collecting page data using 15 workers ...
  Generating static pages using 15 workers (0/63) ...
✓ Generating static pages using 15 workers (63/63) in 5.0s
  Finalizing page optimization ...

Bosqichma-bosqich:

TypeScript 32 soniya — bu birinchi, "sovuq" build (kesh yo'q). Kanonning keyingi build'lari 9–11 soniyada tugagan. Sizning kompyuteringizda raqamlar boshqacha bo'ladi.

Oxirida route jadvali (○, ◐, ƒ — Rendering strategiyalari) va bitta ma'lum ogohlantirish: metadataBase property … is not set — Next o'zi yaratadigan root /_not-found uchun, ta'siri yo'q (kanon holat 34 dan beri ochiq qoldirgan).

2.3 next start

▲ Next.js 16.4.0
- Local:         http://localhost:3291
- Network:       http://172.30.224.1:3291
✓ Ready in 626ms
✓ Running next.config.ts took 77ms
{"tur":"server-start","runtime":"nodejs"}

Server 0.6 soniyada tayyor — kompilyatsiya yo'q, faqat tayyor fayllarni o'qiydi. Network — mahalliy tarmoqdagi manzil: telefoningiz shu Wi-Fi'da bo'lsa, saytni telefonda ochib ko'rishingiz mumkin. Oxirgi qator — bizning instrumentation.ts (Xatolar va instrumentation).

Kanon har holatda aynan shunday tekshirdi: next build + next start, keyin brauzerda 5–13 sahifa — status, TTFB, JS hajmi, axe, hydration. Yakuniy natija (holat 43): 13 sahifa, axe 0, hydration 0, TTFB 4–12 ms.

2.4 Deploy oldi ro'yxat

2.5 Jonli: env tekshiruvi

Deploy'larning ko'p muvaffaqiyatsizligi kod emas, unutilgan env'dan. Kichik tekshiruvchi: .env.example dagi kalitlarni platformadagi ro'yxat bilan solishtiradi. Bo'sh qiymatli kalit — "ixtiyoriy" deb hisoblanadi (kanon .env.example dagidek):

const example = `
QAYTA_YANGILASH_SIRI=
SAYT_URL=https://example.com
GITHUB_API_URL=
`;

function parseEnv(text) {
  return text
    .split("\n")
    .filter((line) => line.includes("=") && !line.startsWith("#"))
    .map((line) => {
      const [key, ...rest] = line.split("=");
      return { key, required: rest.join("=") !== "" };
    });
}

const production = { SAYT_URL: "https://portfolio.example.com" };
for (const { key, required } of parseEnv(example)) {
  const has = key in production;
  const mark = has ? "bor" : required ? "YO'Q — majburiy" : "yo'q";
  console.log(`${key}: ${mark}`);
}

Konsolda:

QAYTA_YANGILASH_SIRI: yo'q
SAYT_URL: bor
GITHUB_API_URL: yo'q

SAYT_URL berilmasa, env.ts sukut qiymatni (example.com) olardi — build o'tardi, lekin canonical va sitemap noto'g'ri manzilga ko'rsatardi. Shuning uchun u "majburiy" sanaladi. Bunday kichik skriptni npm run buyrug'i qilib, deploy oldidan ishlatish mumkin.

3. Vercel'ga joylash (hujjat bo'yicha)

Diqqat: Quyidagi qadamlarni biz bajarmadik — IlmHamroh kanoni uchun Vercel hisobi ochilmagan. Ular Vercel hujjati bo'yicha (2026-10-21 holatiga). Interfeys o'zgarishi mumkin; tugma nomlari boshqacha bo'lsa, hujjatga qarang.

3.1 Oqim

flowchart LR
  G["git push"] --> GH["GitHub repo"]
  GH --> V["Vercel: build"]
  V -->|"main branch"| P["Production<br/>sizning-domen"]
  V -->|"boshqa branch / PR"| PR["Preview<br/>alohida URL"]
  PR --> C["PR'da havola<br/>va izohlar"]

Siz faqat git push qilasiz. Qolganini — build, joylash, manzil berish — Vercel qiladi. Buni GitHub Actions da qo'lda yozgan edingiz; Vercel uni tayyor holda beradi.

3.2 Birinchi joylash

1. portfolio GitHub'da bo'lishi kerak (ochiq yoki yopiq repo).
2. vercel.com da GitHub hisobingiz bilan kiring.
3. Add New → Project — repolar ro'yxatidan portfolio ni tanlang (Import).
4. Vercel loyihani o'zi taniydi: Framework — Next.js, build buyrug'i — npm run build. O'zgartirish shart emas.
5. Environment Variables bo'limida SAYT_URL ni kiriting (va xohlasangiz QAYTA_YANGILASH_SIRI) — README'dagi yo'riqnoma.
6. Deploy — bir-ikki daqiqadan keyin portfolio-xxxx.vercel.app manzili tayyor.

Terminaldan ham mumkin: npx vercel (Vercel CLI) — loyihani ulaydi va preview deploy qiladi; npx vercel --prod — production. Hisob baribir kerak.

3.3 Preview deploy

main dan boshqa har branch'ga push — alohida preview deploy: o'z manzili bilan to'liq ishlaydigan nusxa. PR ochsangiz, Vercel bot unga havolani izoh qilib yozadi. Jamoada bu juda qulay: dizayner yoki menejer o'zgarishni "jonli" ko'radi, siz esa production'ga tegmaysiz. Hobby tarifida preview va production sukut bo'yicha Vercel autentifikatsiyasi bilan himoyalanishi mumkin (Deployment Protection).

3.4 Env muhitlari

Vercel panelida har o'zgaruvchi uchun qaysi muhitga tegishli ekanini belgilaysiz:

Har muhit o'z build'i bilan quriladi. Shuning uchun Env darsidagi "build vaqtida muzlaydi" tuzog'i bu yerda muammo emas: Preview build Preview qiymatini, Production build Production qiymatini oladi. Vercel yana o'z tizim o'zgaruvchilarini qo'shadi: masalan VERCEL_ENV (production, preview yoki development) va VERCEL_URL (joriy deploy manzili). Env o'zgartirsangiz — qayta deploy kerak: eski build eski qiymat bilan qoladi.

3.5 Domen

Settings → Domains da o'z domeningizni qo'shasiz (masalan ismingiz.uz). Vercel DNS yozuvlarini (A yoki CNAME — DNS darsi) ko'rsatadi, siz ularni domen sotib olgan joyda kiritasiz. HTTPS sertifikatini Vercel o'zi beradi va yangilaydi. Shundan keyingina next.config dagi HSTS sarlavhasi to'liq kuchga kiradi.

4. Narx va limitlar

4.1 Hobby tarifi

Vercel hujjati (Hobby sahifasi, 2026-09-14 da yangilangan) bo'yicha Hobby — bepul, lekin faqat shaxsiy, notijorat foydalanish uchun. Portfolio — aynan shu holat. Mijoz uchun sayt yoki do'kon — Pro tarifi (ishchi o'rni oyiga $20 dan).

Oylik limitlardan bir nechtasi:

Limit oshsa, Hobby'da xizmat to'xtaydi va odatda 30 kun kutish kerak — pul yechilmaydi, lekin sayt ishlamay qoladi. portfolio uchun bu raqamlar juda katta: sahifalar statik, server chaqiruvlari faqat forma va "use cache" yangilanishida.

Diqqat qiling: Runtime Logs — 1 soat. Xatolar va instrumentation darsidagi JSON loglar Hobby'da bir soatdan keyin yo'qoladi. Uzoqroq saqlash uchun tashqi log xizmati kerak.

4.2 Fluid compute

Vercel hujjatiga ko'ra 2025-yil 23-apreldan beri yangi loyihalarda Fluid compute sukut bo'yicha yoqilgan. Klassik serverless'da har so'rov alohida instansiyada ishlardi (Runtime'lar). Fluid'da bir instansiya bir nechta so'rovga bir vaqtda xizmat qiladi va yangisini ochishdan oldin bo'shini ishlatadi. Natija: sovuq start kamroq, va Runtime'lar darsidagi "instansiya × pool" muammosi yumshaydi — instansiyalar kamroq ochiladi. Narx esa asosan CPU haqiqatan ishlagan vaqt (Active CPU), ajratilgan xotira va chaqiruvlar soni bo'yicha hisoblanadi (Vercel narx hujjati).

4.3 Analytics

Vercel'da ikki tayyor o'lchov bor: Web Analytics (sahifa ko'rishlar; Hobby'da oyiga 50 000 hodisa) va Speed Insights (haqiqiy foydalanuvchilarning Web Vitals'i — Performance darsidagi useReportWebVitals ning tayyor ko'rinishi). Ikkalasi ham Vercel'ga skript qo'shadi — CSP'da script-src va connect-src ni kengaytirish kerak bo'ladi.

5. Vercel'da portfolio boshqacha ishlaydigan joylar

Lokal next start da hammasi bitta Node jarayonida. Vercel'da — ko'p instansiya. Kanon kodida uchta joy buni hisobga oladi (kod izohlarida ochiq yozilgan):

Birinchisi — haqiqiy cheklov. Hujumchi so'rovlari turli instansiyalarga tushsa, har biri "birinchi urinish" deb hisoblaydi. Kanon izohi: "haqiqiy yechim — Redis (27-qism)". Portfolio uchun murosa qabul qilingan: asal idish (honeypot) va Zod tekshiruvi qoladi (Server Actions xavfsizligi).

Ikkinchisi — serverless'ning umumiy qoidasi: diskka yozilgan narsa keyingi so'rovda yo'q bo'lishi mumkin. Shuning uchun kanon production'da xabarni faqat logga yozadi (shaxsiy ma'lumotsiz), "qayerga yuborish" — backend qismlarida.

Tekshirib ko'ring: Nega "har instansiyada alohida" tezlik cheklovi lokal testlarda hech qachon ko'rinmaydi?

6. output: "standalone" — o'z server uchun

Vercel .next ni o'zi o'qiydi. O'z serveringizda (VPS, Docker) esa butun loyihani node_modules bilan ko'chirish og'ir. output: "standalone" (next.config chuqur) build vaqtida faqat kerakli fayllarni alohida papkaga yig'adi. Kanon tajribasi:

# #40 tajriba: output standalone (2026-10-21T09:19:56+05:00)
build 10 s
standalone: 32M, node_modules ichida: 25M, paketlar 11
loyiha node_modules: 471M

471 MB o'rniga 32 MB — 15 baravar kam. Ichida minimal server.js bor: node server.js bilan ishga tushadi. public/ va .next/static ni esa o'zingiz yoniga ko'chirasiz (Next hujjati: ular odatda CDN yoki Nginx orqali beriladi). Kanonga kirmadi — Vercel buni talab qilmaydi. Docker va Nginx bilan to'liq yo'l — Docker darsida va keyingi server qismlarida.

7. Portfolio qadami: holat yo'q

Kanonda bu dars uchun kod o'zgarishi yo'q: README'da "Deploy" bo'limi bor (holat 43), lokal production har holatda tekshirilgan. Vercel'ga joylash — o'zingiz qiladigan ish.

8. Ko'p uchraydigan xatolar

9. Mashqlar

Mashqlar kurs/mashqlar/23/40-deploy/ da. Jonli yechimlarni «Ishga tushir» bilan sinang.

1-mashq (oson): qaysi muhit?

• main branch'dan build —
• PR uchun alohida manzilli nusxa —
• Vercel bergan joriy muhit nomi o'zgaruvchisi — VERCEL_
• Hobby tarifi qanday foydalanish uchun — shaxsiy,
• Faqat kerakli fayllarni yig'adigan build chiqishi — output: ""

2-mashq (o'rta): muhit bo'yicha tekshiruv

«Env tekshiruvi» blokini kengaytiring: checkEnvironments(exampleText, envs) — envs — { Production: {...}, Preview: {...} } obyekti. Har muhit uchun majburiy kalitlardan yo'qlarini sanab, "Production: tayyor" yoki "Preview: SAYT_URL yo'q" qaytarsin. Kanon .env.example bilan sinang: Production'da SAYT_URL bor, Preview'da hech narsa yo'q.

const example = `
QAYTA_YANGILASH_SIRI=
SAYT_URL=https://example.com
GITHUB_API_URL=
`;

function requiredKeys(text) {
  return text
    .split("\n")
    .map((line) => line.split("="))
    .filter(([key, value]) => key && value)
    .map(([key]) => key);
}

function checkEnvironments(exampleText, envs) {
  const required = requiredKeys(exampleText);
  return Object.entries(envs).map(([name, values]) => {
    const missing = required.filter((key) => !(key in values));
    return missing.length === 0
      ? `${name}: tayyor`
      : `${name}: ${missing.join(", ")} yo'q`;
  });
}

const envs = {
  Production: { SAYT_URL: "https://portfolio.example.com" },
  Preview: {},
};
for (const line of checkEnvironments(example, envs)) {
  console.log(line);
}

Production: tayyor
Preview: SAYT_URL yo'q

3-mashq (qiyin): deploy'ni tanlash

Funksiya yozing: chooseDeploy(project) — loyiha xususiyatlariga qarab tavsiya qaytarsin. Qoidalar: tijorat bo'lsa va Vercel kerak bo'lsa — "Vercel Pro"; server kodi yo'q (hasServer: false) bo'lsa — "statik hosting (output: export)"; o'z server talab qilinsa (ownServer: true) — "standalone + Docker"; qolgan hollarda — "Vercel Hobby". Uch loyihani sinang: portfolio (server bor, notijorat), oshxona saytining menyusi (faqat statik, tijorat), mijoz do'koni (server bor, tijorat, o'z server).

function chooseDeploy({ hasServer, commercial, ownServer }) {
  if (!hasServer) return "statik hosting (output: export)";
  if (ownServer) return "standalone + Docker";
  if (commercial) return "Vercel Pro";
  return "Vercel Hobby";
}

const projects = [
  { name: "portfolio", hasServer: true, commercial: false },
  { name: "menyu", hasServer: false, commercial: true },
  {
    name: "do'kon",
    hasServer: true,
    commercial: true,
    ownServer: true,
  },
];
for (const p of projects) {
  console.log(`${p.name}: ${chooseDeploy(p)}`);
}

portfolio: Vercel Hobby
menyu: statik hosting (output: export)
do'kon: standalone + Docker

4-mashq: Portfolio qadami — o'zingiz joylang

Lokal: npm run check, npm run build, npm run start — hammasi toza bo'lsin, sahifalarni telefonda (Network manzili orqali) ochib ko'ring. Keyin o'z Vercel hisobingizni oching va portfolio ni joylang: SAYT_URL ni Production muhitiga kiriting. Yangi branch'da kichik o'zgarish qilib PR oching — preview havolasi paydo bo'lishini kuting. Production manzilini README'ga yozing.

10. Real ishda

• Preview deploy — zamonaviy jamoalarning standarti: har PR — jonli havola, kod sharhi bilan birga dizayn sharhi. Netlify, Cloudflare Pages, Render ham shunday qiladi.
• Platforma tanlovi — intervyuda so'raladi: "Next ilovani qayerga joylaysiz va nega?". Javob: trafik, narx, ma'lumot joylashuvi talablari, jamoa tajribasi. Vercel qulay, lekin yagona yo'l emas.
• Vendor lock-in — platformaga bog'lanib qolish. portfolio kodida Vercel'ga xos API yo'q: shu kod next start bilan istalgan serverda ishlaydi. Bu ataylab qilingan tanlov.
• Narx kuzatuvi — tijorat loyihalarida "Spend Management" (xarajat chegarasi) sozlanadi: kutilmagan trafik oy oxirida katta hisob bo'lib kelmasin.

Xulosa

• Deploy'dan oldin har doim lokal npm run build && npm run start: tur, env va prerender xatolari shu yerda chiqadi.
• Vercel: GitHub reposini import — har push build; main → Production, boshqa branch va PR → Preview.
• Env uch muhitda (Production, Preview, Development); har muhit o'z build'i — env o'zgarsa, redeploy.
• Hobby — bepul, shaxsiy va notijorat; loglar 1 soat; Fluid compute instansiyalarni tejaydi.
• Xotiradagi tezlik cheklovi va diskka yozish serverless'da boshqacha ishlaydi — kanon buni kodda ochiq yozgan.
• output: "standalone" — 32 MB o'zi ishlaydigan papka (471 MB node_modules o'rniga), o'z server uchun.

Keyingi dars: Next.js ilovani test qilish — Vitest bilan mantiq va client komponentlar, Playwright bilan production build ustida e2e, va async Server Component'ni nega Vitest'da chizib bo'lmasligi.

Manbalar

• Vercel hujjati — Hobby Plan (bepul, notijorat, limitlar; sahifa 2026-09-14 da yangilangan): https://vercel.com/docs/plans/hobby (2026-10-21 da o'qildi)
• Vercel hujjati — Fluid compute ("As of April 23, 2025, fluid compute is enabled by default for new projects"; sahifa 2026-08-24 da yangilangan): https://vercel.com/docs/fluid-compute (2026-10-21 da o'qildi)
• Vercel hujjati — Environments, Environment Variables, Deployments: https://vercel.com/docs/deployments/environments
• Next.js hujjati — Deploying (next start, output: "standalone"): https://nextjs.org/docs/app/getting-started/deploying (16.4.0 bilan kelgan nusxa)
• Kanon: portfolio v2, holat 43 README, standalone tajribasi; next build va next start chiqishlari — biz ishga tushirdik (next 16.4.0, Node 24.21.0). Vercel'ga deploy qilinmagan.