# Vercel: Git’da .env bo‘lmaganda muhit o‘zgaruvchilari
> Environment Variables, Development/Preview/Production, yangi deployment va Next.js’da kalitlarni brauzerga uzatmasdan xavfsiz tekshirish.
Source: https://ailoot.ai/blog/uz/vercel-environment-variables/
Canonical: https://ailoot.ai/blog/uz/vercel-environment-variables/
Language: uz
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-229
Revision: sha256-885bfb3efdfe8af511ae2ef49752da94ade35b4efd22e65e46a5f54a4379e38a
Asosiy xulosa
Maxfiy ma’lumotlaringiz saqlangan `.env` fayli Git’da bo‘lmasa, kerakli o‘zgaruvchilarni Vercel loyihangizning **Environment Variables** bo‘limiga qo‘shing. Muhitni tanlang, sozlamalarni saqlang va yangi deployment yarating: allaqachon deployment qilingan versiyalar o‘zgarmaydi. Next.js’da maxfiy kalitga `NEXT_PUBLIC_` prefiksini qo‘shmang: uning qiymati build vaqtida brauzer kodiga kiritiladi.
Ushbu qo‘llanma Vercel’da joylashtirilgan loyiha uchun mo‘ljallangan. Sizga uning sozlamalariga kirish va ilova qaysi o‘zgaruvchilarni o‘qishini tushunish kerak. Quyidagi misol Next.js’ga tegishli; boshqa freymvorkdagi o‘zgaruvchi nomlarini avtomatik ravishda ko‘chirib bo‘lmaydi. Qo‘llanma rasmiy hujjatlarga asoslangan; u haqiqiy akkauntda sinab ko‘rilmagan.
[Ailoot’dan foydalanish haqidagi amaliy ma’lumotlar hujjatlarda mavjud](https://ailoot.ai/docs/).
## Nega .env faylini Git’ga qo‘shish shart emas
Muhit o‘zgaruvchisi — ilova manba kodidan alohida oladigan, nom va qiymatdan iborat sozlama. Masalan, `SERVICE_API_KEY` nomi dasturga tashqi xizmat kaliti qiymatidan foydalanish imkonini beradi. Kalitning o‘zini qo‘llanmaga, agent bilan yozishmalaringizga yoki repozitoriyga joylamang.
Next.js mahalliy `.env*` fayllaridan o‘zgaruvchilarni yuklashi mumkin. Biroq mahalliy fayl va Vercel’dagi loyiha sozlamalari ikkita alohida joydir. Agar fayl repozitoriyga yuborilmasa, qiymatlarni hosting platformasida alohida sozlang. Standart `create-next-app` shabloni `.env` fayllarini `.gitignore` ro‘yxatiga qo‘shadi; Next.js hujjatlarida ularni repozitoriyga deyarli hech qachon yubormaslik kerakligi aytilgan.
Agar manba fayllarida nimalarni saqlash mumkinligiga hali ishonchingiz komil bo‘lmasa, [AI yordamida yaratilgan loyiha uchun xavfsizlik tekshiruvi](https://ailoot.ai/blog/uz/vibe-coding-security/)dan boshlang. Bu yerda esa torroq savolni ko‘rib chiqamiz: muayyan Vercel deployment’i uchun konfiguratsiyani qayerda sozlash kerak.
## Avval ilova o‘zgaruvchini qayerda o‘qishini aniqlang
Qiymatlarni kiritishdan oldin maxfiy ma’lumotlarning o‘zini emas, **nomlar** ro‘yxatini tuzing. Har bir nom uchun uchta narsani aniqlashingiz kerak: qaysi muhit undan foydalanadi, o‘zgaruvchini o‘qiydigan kod qayerda ishlaydi va qiymat qachon kerak bo‘ladi.
| Nimani tekshirish kerak | Mumkin bo‘lgan variantlar | Nima uchun muhim |
|----|----|----|
| Vercel muhiti | Development, Preview, Production | Sozlama siz tekshirayotgan versiyaga tatbiq etilishi kerak |
| Qayerda o‘qiladi | Server yoki brauzer | Maxfiy kalit mijoz tomonidagi kodga kiritilmasligi kerak |
| Qachon o‘qiladi | Build vaqtida yoki server funksiyasi bajarilganda | Next.js’da ochiq qiymatlar build vaqtida belgilanadi |
**Development** muhiti mahalliy ishlab chiqish uchun mo‘ljallangan. **Preview** preview deployment’lari, **Production** esa asosiy e’lon qilingan versiya uchun ishlatiladi. Preview’da muayyan Git tarmog‘i uchun sozlamalar bo‘lishi mumkin: ular nomlari bir xil bo‘lgan umumiy Preview sozlamalarining o‘rnini bosadi.
Next.js loyihasida `NEXT_PUBLIC_` prefiksisiz o‘zgaruvchilar odatiy holatda serverda mavjud bo‘ladi. `NEXT_PUBLIC_` prefiksi qiymatni brauzerga uzatiladigan JavaScript kodiga kiritish imkonini beradi. Bu maxfiy bo‘lmagan versiya yorlig‘i kabi ochiq bo‘lishi aniq bo‘lgan sozlama uchun mos, lekin maxfiy API kaliti uchun emas. Bu prefiks bo‘lmasa ham, ilova kodi maxfiy ma’lumotni mijozga qo‘lda qaytarmasligi kerak.
Agar freymvorkni hali aniqlamagan bo‘lsangiz, agentdan uni loyiha fayllari asosida aniqlashni so‘rang. [Astro va Next.js taqqoslanishi](https://ailoot.ai/blog/uz/astro-vs-nextjs-for-ai-built-sites/) farqlarni tushunishingizga yordam beradi; `NEXT_PUBLIC_` qoidasini har qanday React ilovasiga qo‘llab bo‘lmaydi.
Hosting konfiguratsiyasi AI agent bilan ilova ustida ishlashga kiradigan vazifalardan biridir.
## Vercel loyihasiga o‘zgaruvchini qanday qo‘shish kerak
Rasmiy dashboard’dagi amallarni o‘zingiz bajaring. Haqiqiy kalitni formaga kiritish uchun agentga bermang va uning qiymati ko‘rinib turgan skrinshotni biriktirmang.
1. Vercel dashboard’ini oching va **to‘g‘ri loyihani** tanlang. Faqat repozitoriy nomi mos kelishiga tayanmang: ochmoqchi bo‘lgan ilovangizni sozlayotganingizni tekshiring.
2. Loyiha sozlamalari yon panelidagi **Environment Variables** bo‘limiga o‘ting.
3. **Name** maydoniga ilova o‘qiydigan nomni, masalan, `SERVICE_API_KEY`ni kiriting. Bu misol nomi; kod boshqa nomni kutsa, uning aynan o‘zini yozing.
4. **Value** maydoniga hisob ma’lumotlaringiz saqlangan joydagi qiymatni kiriting. Uni manba kodiga, chatga yoki tekshiruv jurnaliga joylamang.
5. Ushbu sozlama kerak bo‘lgan muhitni tanlang. Preview versiyasini tekshirish uchun **Preview**, asosiy versiya uchun **Production**dan foydalaning. Bitta maxfiy ma’lumotni avtomatik ravishda barcha muhitlarga tayinlamang.
6. Agar Preview sozlamasi muayyan tarmoqqa tegishli bo‘lsa, tanlangan tarmoqni hamda nomi bir xil bo‘lgan har qanday override’ni tekshiring.
7. **Save** tugmasini bosing.
Vercel loyiha o‘zgaruvchilarini build vaqtida ham, server tomonida Vercel Functions ishlaganda ham taqdim etadi. Biroq Vercel ichida qiymat mavjudligi uni brauzerga yuborish mumkin degani emas: bu ilova kodi va freymvork qoidalariga bog‘liq.
## Nega Save’dan keyin yangi deployment kerak
O‘zgaruvchini saqlash mavjud deployment’larni o‘zgartirmaydi. Vercel hujjatlariga ko‘ra, yangi sozlama siz foydalanadigan versiyaga yetib borishi uchun loyihani qayta deployment qilish kerak.
Git orqali ishlaganda, **Production Branch**da ko‘rsatilgan tarmoqqa commit yuborib, yangi Production deployment yaratishingiz mumkin; boshqa tarmoqqa yuborib esa Preview deployment yaratishingiz mumkin. Asosiy tarmoq doim `main` deb taxmin qilmang: loyiha sozlamasini tekshiring. Bu maxfiy faylni commit’ga qo‘shmasdan, loyiha bo‘yicha kelishilgan odatiy reliz bo‘lishi kerak.
Deployment boshlanganidan keyin build tugashini kuting va **yangi** deployment URL’ini oching. Uning URL’i, muhiti va tarmog‘ini qayd qilib qo‘ying. Alohida deployment’ning eski URL’ini tekshirsangiz, yangi sozlamalar u yerda ko‘rinmaydi.
Next.js’da yana bir shart bor: `process.env.NEXT_PUBLIC_RELEASE_LABEL` kabi murojaatlar `next build` vaqtida qiymatlari bilan almashtiriladi. Qiymat build tugaganidan keyin o‘zgarmaydi. Yangi build qilmasdan sozlamani o‘zgartirish allaqachon uzatilgan mijoz tomonidagi JavaScript’ni qayta yozmaydi.
## Kalitni oshkor qilmasdan natijani qanday tekshirish kerak
Xavfsiz misoldan boshlang: `NEXT_PUBLIC_RELEASE_LABEL` nomli, qiymati `preview-check` bo‘lgan, maxfiy bo‘lmagan aniq yorliq. Bular misol nomi va matn; kalit emas va bu yerda o‘tkazilgan sinov ham emas. Agar Next.js ilovasi ushbu o‘zgaruvchini bevosita `process.env.NEXT_PUBLIC_RELEASE_LABEL` orqali o‘qisa, yangi build’dan keyin yorliqni interfeysning ko‘zlangan joyida ko‘rsatishi mumkin. Bu tekshiruv faqat ochiq sozlama uzatilganini tasdiqlaydi.
**Maxfiy kalit boshqacha tekshiriladi.** Uning qiymatini, bir qismini, uzunligini yoki butun `process.env` obyektini chiqarmang. O‘zgaruvchi mazmunini qaytaradigan ochiq URL yaratmang. Avval serverda faqat sozlama “mavjud / mavjud emas”ligini tekshiring, keyin xizmatdan foydalanadigan ilova funksiyasini alohida tekshiring. Sozlamaning mavjudligi kalit yaroqli ekanini yoki kerakli ruxsatlarga ega ekanini isbotlamaydi.
Natijalarni maxfiy ma’lumotlarsiz qayd etishingiz mumkin:
- loyiha, muhit va tarmoq konfiguratsiya vaqtida tanlanganlari bilan mos;
- o‘zgaruvchi saqlanganidan keyin yaratilgan yangi deployment URL’ini tekshiryapsiz;
- build tugagan va kerakli ilova funksiyasi xavfsiz sinov ma’lumotlarida ishlagan;
- maxfiy ma’lumot brauzerda, API javoblarida, jurnallarda yoki yozishmalarda oshkor etilmagan.
Agar funksiya to‘lov qilsa, xabar yuborsa yoki oqibatlarga olib keladigan boshqa amalni bajarsa, xizmatning belgilangan sinov rejimidan foydalaning. Konfiguratsiyani tekshirishning o‘zi haqiqiy amalni bajarishga ruxsat bermaydi.
## Qiymat hanuz undefined bo‘lsa, nimalarni tekshirish kerak
`undefined` — murojaat qilingan joyda qiymat olinmaganini anglatadi. Barcha sozlamalarni birdan o‘zgartirmasdan, nom, muhit va versiyani ketma-ket tekshiring.
| Alomat | Nimani tekshirish kerak |
|----|----|
| Mahalliy ishlaydi, Preview’da esa yo‘q | Loyiha Preview sozlamalarida nom mavjudmi; boshqa tarmoq tanlanganmi |
| Preview ishlaydi, Production esa yo‘q | Nom Production uchun sozlanganmi; Save’dan keyin yangi asosiy versiya yaratilganmi |
| Bitta Preview tarmog‘i boshqacha ishlaydi | Shu tarmoq uchun ayni nomli qiymat sozlanganmi va umumiy sozlamaning o‘rnini bosyaptimi |
| Server o‘zgaruvchini ko‘radi, brauzer esa ko‘rmaydi | Next.js’da maxfiy bo‘lmagan o‘zgaruvchi uchun bu kutilgan holat; maxfiy kalitni brauzerga ko‘chirmang |
| Ochiq Next.js yorlig‘ida hanuz eski qiymat bor | Kerakli qiymat bilan yangi build bo‘lganmi; ochgan URL’ingiz shu deployment’ga tegishlimi |
| Ochiq nom to‘g‘ri, lekin almashtirish ishlamayapti | Kod uni `process.env[varName]` orqali dinamik o‘qiyaptimi: Next.js bunday murojaatlarni kodga joylamaydi |
Nom, muhit va yangi versiyani tekshirganingizdan so‘ng ham funksiyada xato bo‘lsa, bu o‘zgaruvchi sabab bo‘lganini isbotlamaydi. Maxfiy ma’lumotlarni o‘z ichiga olgan diagnostika ma’lumotlarini e’lon qilmasdan, server tomonidagi aniq kod xatosini tekshiring. Ushbu qo‘llanma har qanday HTTP 500 javobini bartaraf etishni va’da qilmaydi.
O‘z serveringizga ko‘chish boshqa tartibni talab qiladi: [loyihani Coolify yordamida deployment qilish qo‘llanmasi](https://ailoot.ai/blog/uz/coolify-claude-code-deploy/)ga qarang. Vercel tugmalari nomlari va konfiguratsiya bosqichlari unga taalluqli emas.
### Manbalar
- [Vercel muhit o‘zgaruvchilari](https://vercel.com/docs/environment-variables)
- [Vercel muhit o‘zgaruvchilarini qo‘shish va boshqarish](https://vercel.com/docs/environment-variables/managing-environment-variables)
- [Next.js muhit o‘zgaruvchilari](https://nextjs.org/docs/app/guides/environment-variables)
[Ailoot saytiga o‘ting](https://ailoot.ai/).
## Ko‘p beriladigan savollar
### Vercel’da saqlasam ham o‘zgaruvchi nega undefined?
Loyiha, muhit va branch’ga xos ko‘lamni tekshirib, yangi deploy yarating. Yangi sozlama saqlangani mavjud deploy’ga o‘zgaruvchini qo‘shmaydi.
### Sirni Next.js ilovasiga ko‘rsatish uchun NEXT_PUBLIC_ qo‘shamanmi?
Maxfiy qiymatga bu prefiksni qo‘ymang: build paytida uni brauzer kodiga joylaydi. Sirni serverda saqlang va kalitni chop etmasdan mavjudligini tekshiring.
## Ailoot · Kompaniya va uning loyihalar portfeli
Ailoot to‘plangan faoliyat tajribasi, keng mijozlar bazasi, barqaror xizmat va doimiy KPI nazoratiga tayanadi.
Kompaniya va uning loyihalar portfeli: millionlab mijozlar; oylik sotuvlar hajmi milliardlarda.
Ailoot bu faoliyat tajribasini mijozlar mahsulotlari, agentlar, ilovalar va avtomatlashtirishlarda AI imkoniyatlariga API orqali kirishni ta’minlashda qo‘llaydi.