Yakuniy modul: saytni internetga chiqarish va katta amaliy loyihalar.
Vercel va Netlify’ga deploy
Next.js loyihasini internetga chiqarishning eng oson yo’li — Vercel (Next’ni yaratgan kompaniya xizmati):
- Loyiha GitHub’ga yuklanadi (Git kursidagi add/commit/push);
- vercel.com’da GitHub bilan kirib, repozitoriy tanlanadi;
- Deploy tugmasi — bir-ikki daqiqada tayyor
loyiha.vercel.appmanzili.
Eng qimmatli qismi: har git push avtomatik qayta deploy qiladi — CI/CD qutidan chiqqan holda. Netlify ham xuddi shu oqimda ishlaydi; statik saytlar uchun teng kuchli muqobil.
Tipik xato. API kalitlarini (masalan next-auth secret) kodga yozib push qilish. Maxfiy qiymatlar Vercel’dagi Environment Variables bo’limiga kiritiladi — kod ochiq repoda bo’lsa ham kalitlar sirligicha qoladi.
Amaliy loyihalar
Modulning qolgan darslari — to’rtta katta mustaqil loyiha; har biri Next’ni yangi texnologiya bilan juftlaydi:
| Loyiha | Nimani o’rgatadi |
|---|---|
| Tesla clone | Firebase bilan ishlash, murakkab UI |
| Hulu clone | Tashqi API (TMDB) + SSR |
| Animatsion landing | Framer Motion bilan animatsiyalar |
| Blog | Butter CMS — kontentni koddan ajratish |
Bu loyihalarni ketma-ket emas, qiziqishga qarab oling: portfolio uchun bittasini boshidan oxirigacha mustaqil qaytarish, to’rttasini yuzaki ko’rishdan qimmatlidir.
Clone loyihalarning ma’nosi haqida: tayyor dizaynni qaytarish sizni dizayn o’ylashdan ozod qilib, butun e’tiborni texnologiyaga qaratadi. Lekin portfolioga qo’yishda halol yozing: "Tesla sayti kloni (o’quv loyiha)".
Yo’nalish yakuni
Frontend yo’nalishining sakkiz kursi shu yerda tugaydi: HTML → CSS → Bootstrap → JavaScript → Git/GitHub → React → Redux → Next.js. Qo’lingizda to’liq zanjir: sahifa qurish, bezash, dasturlash, versiya nazorati, ilova yig’ish, holat boshqaruvi va production’ga chiqarish.
Keyingi o’sish yo’llari: TypeScript (katta jamoalarning standarti), backend asoslari (yo’nalishlar sahifasidagi Python backend yo’li) yoki chuqurroq React (performance, testlar).
Amaliyot
- Istalgan Next loyihangizni GitHub orqali Vercel’ga deploy qiling va havolani do’stingizga yuboring.
- Kichik o’zgarish qilib push qiling — avtomatik qayta deploy’ni kuzating.
- To’rt loyihadan bittasini tanlab, videoga qarab emas, avval o’zingiz urinib yig’ing.
- Portfolio README yozing: loyiha nima qiladi, qanday texnologiyalar, jonli havola.
Yakuniy testni ishlang — va frontend yo’nalishini yakunlaganingiz bilan tabriklaymiz.