Mundarija[Yashirish][Show]
Dasturiy ta'minot kutubxonasi yoki ramkasini tanlashda odatda ishlab chiquvchining tajribasi hisobga olinadi.
"Ishlab chiquvchilar tajribasi" haqida gapirganda, men ishlab chiquvchilar ishni qanday bajarishini nazarda tutyapman. Ishlab chiquvchilar foydalanish uchun qulay bo'lgan kutubxonalar yoki ramkalarni tanlaydilar.
Bu bizda hozirda eng mashhur kutubxonalar va ramkalar mavjudligining asosiy sabablaridan biridir. Ishlab chiquvchilar sifatida vazifalarimizni bajarishda bizga yordam beradigan mavjud vositalar mavjud bo'lganda noldan boshlashimiz shart emas.
Frameworklar dasturlarni yaratish uchun ishlab chiquvchilar tomonidan yaratilgan va foydalaniladigan dasturiy ta'minot bo'laklari va NextJS ulardan biri.
Ushbu postda biz Nextjs, uning asosiy xususiyatlari va undan qanday qilib ilova yaratishda foydalanishimiz haqida gaplashamiz. Keling, darhol ichkariga o'taylik.
Next.js nima?
Keyingi.js statik veb-sahifalar va React-ga asoslangan onlayn ilovalarni tez va oson yaratish uchun JavaScript asosidir. Bu sizga Windows, Linux va Mac kabi turli platformalar uchun ajoyib veb-ilovalarni loyihalash imkonini beradi.
Agar siz reaktsiya bilan minimal darajada tanish bo'lsangiz va reaksiya ekotizimini ko'proq bilmoqchi bo'lsangiz, Next.js ramkasi bilan tanishishingiz kerak.
Next.js ishga tushirish uchun kerak bo'lgan hamma narsa bilan birga kelgan bo'lsa ham, siz NPM va Yarn, JavaScript va TypeScript, CSS va SCSS, statik eksport va serversiz joylashtirish o'rtasida tanlov qilishingiz mumkin.
Xususiyatlari
- Marshrutlash avtomatik ravishda amalga oshiriladi - Siz hech narsani sozlashingiz shart emas, chunki har qanday URL fayl tizimiga, sahifalar jildidagi fayllarga ko'rsatilgan (albatta, sizda sozlash opsiyalari mavjud).
- Yagona fayl komponentlari – Toʻliq birlashtirilgan va bir xil jamoa tomonidan ishlab chiqarilgan styled-jsx yordamida komponentga qamrovli uslublarni qoʻshish oson.
- Issiq kodni qayta yuklash - Next.js diskda saqlangan modifikatsiyani aniqlaganida, sahifani qayta yuklaydi.
- Dinamik komponentlar - JavaScript modullari va reaksiya komponentlarini dinamik ravishda yuklashingiz mumkin.
- Statik eksport - Next.js keyingi eksport buyrug'i bilan ilovangizdan butunlay statik saytni eksport qilish imkonini beradi.
- Atrof-muhit bilan muvofiqligi – Next.js JavaScript, Node va React ekotizimlari bilan uzluksiz integratsiyalashgan.
- Kodlarni avtomatik ravishda ajratish - sahifalarni ko'rsatish uchun faqat kerakli kutubxonalar va JavaScript-dan foydalaniladi. Ilovaning barcha kodlarini o'z ichiga olgan yagona JavaScript faylini yaratish o'rniga, Next.js aqlli ravishda dasturni ko'plab resurslarga ajratadi.
Next.js ilovasini qanday yaratish mumkin?
o'rnatish
Next.js loyihasini oʻrnatish va qurish uchun node npx buyrugʻidan foydalanishingiz mumkin.
Bu Next.js loyihasini ishga tushirish uchun zarur bo'lgan jild va barcha fayllar, konfiguratsiyalar va boshqa elementlarni yaratadi.
Ilova yaratilgandan so'ng uni ishga tushirishingiz mumkin.
Sahifalar va marshrutlash
Next.js bilan marshrutlarni boshqarish uchun biz marshrutlash tizimidan foydalanishimiz shart emas. Next.js bilan marshrutni sozlash juda oson. Yangi Next.js ilovasini yaratish uchun create-next-app buyrug‘idan foydalansangiz, ilova sukut bo‘yicha “sahifalar” deb nomlangan jild yaratadi.
Ushbu "sahifalar" papkasi sizning marshrutlaringizni saqlaydigan joy. Natijada, quyi katalogdagi har bir reaksiya komponentlari fayli alohida marshrut sifatida ishlanadi.
Masalan, agar papkada ushbu fayllar bo'lsa:
- indeks.js
- about.js
- aricles.js
Ushbu fayl avtomatik ravishda uchta usulda o'zgartiriladi:
- Indeks sahifasi localhost/index
- Haqida sahifasi localhost/about
- Blog sahifasi localhost/maqolalar
about.js sahifasining namunasi quyida ko'rsatilgan. Ko'rib turganingizdek, sahifa haqida hech narsa berilmagan. Bu oddiygina Reactning standart funktsional komponentidir.
Yo'nalishlar
Ichki marshrutlarni yaratish uchun avvalo pastki papkani o'rnatishingiz kerak. Masalan: sahifalar/maqolalar. O'sha jild ichida "contact.js" reaksiya komponentini yarating va u localhost/maqolalar/kontakt sahifasini yaratadi.
Agar siz bitta faylni pages/articles.js-ga, boshqasini esa pages/articles/index.js-ga qo'ysangiz. Ikkalasi ham bir xil yo'lni aks ettiradi localhost/blog. Bunday holatda Next.js faqat article.js faylini ko'rsatadi. Har bir blog postining o'z yo'li bo'lgan dinamik marshrutlar haqida nima deyish mumkin:
- localhost/blog/birinchi maqola
- localhost/blog/-ikkinchi-maqola
Qavslar belgisidan foydalanib, Next.js da dinamik marshrutni belgilashingiz mumkin. Masalan: pages/article/[slug].js
Bog'lanish yo'llari
Siz endi birinchi marshrutni tugatdingiz. O'ylaymanki, siz sahifalarni ushbu marshrutlarga qanday ulashni so'rayapsiz. Buning uchun sizga "keyingi/havola" kerak bo'ladi.
Haqida sahifasiga havolani o'z ichiga olgan bosh sahifaga misol:
Agar havolani uslublashni istasangiz, quyidagi sintaksisdan foydalaning:
Yo'nalishlarni qayta yo'naltirish
Agar ma'lum bir sahifaga yo'naltirishni majburlash kerak bo'lsa-chi? Masalan, tugma bosilganda? Buni "router.push" yordamida amalga oshirishingiz mumkin:
SEO
Veb-ilovalardagi sahifalar HTML korpusidagi ma'lumotlarga qo'shimcha ravishda meta (bosh) elementlarni talab qiladi. Bu React ilovasida React Helmet deb nomlangan qo'shimcha talabni o'rnatishni talab qiladi.
Qidiruv natijalari va oʻrnatishlarda koʻrsatiladigan veb-sahifalarimizga metamaʼlumotlarni osongina qoʻshish uchun “Keyingi” dagi “Head” komponentidan foydalanishimiz mumkin:
komponentlar
Siz tez-tez komponentlar yoki tartib faylini ishlab chiqishingiz kerak bo'ladi. Masalan, navigatsiya panelini ko'rsatadigan komponent. Biz hozirgacha sahifalar jildidan foydalanganmiz. Sizning komponentingiz marshrut sahifasi bo'lishi uchun mo'ljallanmagan bo'lsa-chi?
Siz foydalanuvchining localhost/navbar kabi sahifaga o'tishini xohlamaysiz. Agar siz Navbar.js komponentini sahifalar jildiga joylashtirsangiz, shunday bo'ladi. Vaziyatda nima qilish kerak?
Barcha "sahifa emas" komponentlarini alohida papkada saqlang. Aksariyat Next.js loyihalari “komponentlar” taxallusidan foydalanadi va bu papka loyihangizning ildiz papkasida yaratiladi.
Bosh komponenti
Dastlabki sahifa yuklanishi server tomonida Next.js tomonidan amalga oshiriladi. Buni sahifangizning HTML-ni o'zgartirish orqali amalga oshiradi. Sarlavha bo'limi kiritilgan.
Next.js Head komponenti sarlavha va meta kabi sarlavhalar boʻlimi teglarini berish uchun ishlatiladi. Layout komponentining ushbu misolida Head komponenti ishlatilgan.
404 sahifa yaratish topilmadi
O'zingizning 404 xato sahifangizni yaratishingiz mumkin. Siz xabarni sozlashni yoki o'z sahifa dizayningizni qo'shishni xohlashingiz mumkin. Sahifalar jildida 404.js faylini yarating.
404 xatosi yuzaga kelganda, Next.js avtomatik ravishda ushbu sahifaga yo'naltiriladi. Shaxsiylashtirilgan 404 sahifasiga misol:
Server tomonidan ma'lumotlarni olish
Mijoz tomonida ma'lumotlarni yuklab olish o'rniga, Next.js sizga dastlabki ma'lumotlar to'plamini o'tkazish imkonini beradi, bu esa serverdan allaqachon to'ldirilgan ma'lumotlar bilan sahifani yuborishni nazarda tutadi.
Server tomonidan ma'lumotlarni olish uchun ikkita variant mavjud:
- Har bir so'rov bo'yicha ma'lumotlar olinishi kerak.
- Qurilish jarayonida faqat bir marta ma'lumot oling (statik sayt)
Har bir so'rov bo'yicha ma'lumotlarni oling
GetServerSideProps usuli har bir so'rovni server tomonida ko'rsatish uchun ishlatiladi. Bu funksiya komponent faylingizning oxiriga kiritilishi mumkin. Next.js avtomatik ravishda komponent rekvizitlaringizni getServerSideProps obyekti bilan to‘ldiradi, agar bu funksiya komponent faylingizda mavjud bo‘lsa.
Qurilish vaqtida ma'lumotlarni oling
GetStaticProps usuli qurilish vaqtida server tomonini ko'rsatish uchun ishlatiladi. Bu funksiya komponent faylingizning oxiriga kiritilishi mumkin. Ushbu usul server kodini ishga tushiradi va serverga GET so'rovini yuboradi, lekin loyihamiz tugagach, faqat bir marta.
Nega Next.js-ni o'rganishingiz kerak?
Buning sabablaridan biri shundaki, Next.js React-ning yuqori qismiga qurilgan bo'lib, u uchun frontend ishlab chiqish asboblari to'plami. foydalanuvchi interfeyslarini yaratish bu mening veb-ilovalarni loyihalashda eng sevimli tanlovim.
Ammo Next.js o'z ishini yaxshi bajarmagan bo'lsa, bu etarli bo'lmaydi... to'g'rimi?
Xo'sh, u aniq nima qiladi?
Buni tushunish uchun birinchi navbatda bir nechta tushunchalarni aniqlashimiz kerak. Next.js mashhurlikka erishdi, chunki u ko'plab veb-ishlab chiquvchilar mijoz tomonidagi veb-ilovalar (brauzerda) bilan bog'liq muammoni hal qildi. Ushbu bitta sahifali ilovalar (SPA) yanada yaxshi tajribaga ega edi, chunki ular foydalanuvchiga sahifani qayta yuklashi shart emas edi va koʻproq interaktivlikka ruxsat berdi.
Biroq, shunga o'xshash ilovadagi materiallarning asosiy qismi faqat brauzerda bajarilganda ko'rinadigan bo'lgani uchun, veb-brauzerlar bunday ilovaning matn mazmunini tushunishda qiynaladi.
Natijada, mashhurligiga qaramay, ko'plab SPAlar Google kabi yirik qidiruv tizimlari uchun anonim bo'lib qoldi. Next.js endi React komponentlarini server tomonida renderlash (SSR) uchun yanada mustahkam o‘rnatilgan mexanizmni o‘z ichiga oladi.
Next.js dasturchilarga qurish jarayonida serverda JavaScript kodini yaratish va foydalanuvchiga asosiy, indekslanadigan HTMLni taqdim etish imkonini beradi.
Taroziga
- Foydalanuvchi tajribasi uchun ajoyib
- SEO uchun ajoyib
- Dinamik kabi ishlaydigan o'ta tezkor statik veb-sayt yarating
- UI va UX yaratishda moslashuvchanlik.
- Rivojlanishning ko'plab afzalliklari
- Jamiyatning katta yordami
Kamchiliklari
- Veb-saytlar yoki ilovalar qurish yoki ishlab chiqish uchun ma'lum vaqtga ega.
- Muayyan vazifalar uchun Next.js yetarli emas. Ishlab chiquvchilar Node.js vositalaridan foydalangan holda dinamik marshrutlarni qurish imkoniyatiga ega bo'lishlari kerak.
Xulosa
Ko‘rib turganingizdek, Next.js React ilovasini ishlab chiqishni soddalashtiradi va sizga eng muhim narsaga – ilova mantig‘i va foydalanuvchi interfeysiga e’tibor qaratish imkonini beradi. U zamonaviy, frontendga boy va API bilan ishlaydigan ilovalarni yaratish uchun zarur bo'lgan hamma narsani o'z ichiga oladi.
Statik HTML sahifalarini yaratish qobiliyati tufayli u bloglar va biznes veb-saytlari kabi faqat mazmunli loyihalar uchun ham mos keladi.
Joriy nashrlar bilan Next.js nafaqat ishlab chiquvchilar tajribasining yuqori darajasini saqlabgina qolmay, balki vizual ishlash va foydalanuvchi tajribasini oshirish uchun vositalarni taqdim etib, ushbu ramka uchun yorqin kelajakni ta'minlaydi.
Leave a Reply