Гарчиг[Нуух][Үзүүлэх]
Програм хангамжийн номын сан эсвэл хүрээ сонгохдоо хөгжүүлэгчийн туршлагыг ихэвчлэн харгалзан үздэг.
Би "хөгжүүлэгчийн туршлага" гэж дурдахдаа хөгжүүлэгчид уг ажлыг хэрхэн хийдэг талаар хэлж байна. Хөгжүүлэгчид ашиглахад таатай сан эсвэл хүрээг сонгодог.
Энэ нь бид одоо хамгийн алдартай номын сан, хүрээтэй болсон гол шалтгаануудын нэг юм. Хөгжүүлэгчийн хувьд бид даалгавраа хийхэд туслах хэрэгслүүд байгаа үед эхнээс нь эхлэх шаардлагагүй.
Frameworks нь программыг бүтээхэд хөгжүүлэгчид бүтээж ашигладаг програм хангамжийн хэсгүүд бөгөөд NextJS нь тэдгээрийн нэг юм.
Энэ нийтлэлд бид Nextjs, түүний үндсэн шинж чанарууд, мөн үүнийг програм бүтээхэд хэрхэн ашиглах талаар авч үзэх болно. Шууд орцгооё.
Next.js гэж юу вэ?
Дараа нь.js Энэ нь статик вэб хуудас болон React-д суурилсан онлайн програмуудыг хурдан бөгөөд хялбар бүтээх JavaScript-ийн хүрээ юм. Энэ нь танд Windows, Linux, Mac зэрэг төрөл бүрийн платформд зориулсан гайхалтай вэб програмуудыг зохиох боломжийг олгодог.
Хэрэв та урвалын талаар хамгийн бага мэдлэгтэй бөгөөд урвалын экосистемийн талаар илүү ихийг мэдэхийг хүсч байвал Next.js хүрээг сайн мэддэг байх ёстой.
Хэдийгээр Next.js нь эхлүүлэхэд хэрэгтэй бүх зүйлтэй ирдэг ч та NPM болон Yarn, JavaScript болон TypeScript, CSS болон SCSS, статик экспорт, сервергүй байршуулалтаас сонголт хийх боломжтой.
онцлог
- Чиглүүлэлт нь автоматаар хийгдэнэ – Аливаа URL нь файлын систем, хуудасны хавтсанд байгаа файлуудтай (мэдээж танд тохируулах сонголтууд байгаа) тул та юу ч тохируулах шаардлагагүй.
- Нэг файлын бүрэлдэхүүн хэсгүүд – Нэг баг хамт олноороо нэгтгэгдсэн, бүтээгдсэн styled-jsx-ийг ашиглан бүрэлдэхүүн хэсэгт хүрээлэгдсэн загваруудыг нэмэхэд хялбар байдаг.
- Халуун кодыг дахин ачаалж байна – Next.js дискэнд хадгалагдсан өөрчлөлтийг илрүүлэх үед хуудсыг дахин ачаална.
- Динамик бүрэлдэхүүн хэсгүүд – Та JavaScript модулиуд болон урвалын бүрэлдэхүүн хэсгүүдийг динамикаар ачаалж болно.
- Статик экспорт – Next.js нь дараагийн экспортын командыг ашиглан өөрийн апп-аас бүрэн статик сайтыг экспортлох боломжийг танд олгоно.
- Байгаль орчинтой нийцтэй байдал – Next.js нь JavaScript, Node, React экосистемтэй бүрэн нийцдэг.
- Кодыг автоматаар хуваах - Хуудсуудыг үзүүлэхэд зөвхөн шаардлагатай сангууд болон JavaScript ашигладаг. Next.js нь програмын бүх кодыг агуулсан ганц JavaScript файл үүсгэхийн оронд програмыг олон эх сурвалжид ухаалгаар хуваадаг.
next.js програмыг хэрхэн үүсгэх вэ?
суурилуулах ажил
Та Next.js төслийг суулгах, бүтээхдээ node npx командыг ашиглаж болно.
Энэ нь хавтас болон Next.js төслийг ажиллуулахад шаардлагатай бүх файл, тохиргоо болон бусад зүйлсийг үүсгэх болно.
Та програмыг үүсгэсний дараа эхлүүлэх боломжтой.
Хуудас ба чиглүүлэлт
Next.js-тэй маршрутуудыг зохицуулахын тулд бид чиглүүлэлтийн хүрээ ашиглах шаардлагагүй. Next.js-р чиглүүлэлт хийх нь маш хялбар юм. Шинэ Next.js програм бүтээхдээ create-next-app командыг ашиглах үед уг програм анхдагчаар "pages" нэртэй хавтас үүсгэдэг.
Энэ "хуудас" хавтас нь таны маршрутыг хадгалах газар юм. Үүний үр дүнд дэд директор дахь урвалын бүрэлдэхүүн хэсгүүдийн файл тус бүрийг тусад нь чиглүүлэх болно.
Жишээлбэл, хэрэв фолдер эдгээр файлуудыг агуулж байвал:
- index.js
- about.js
- aricles.js
Энэ файл гурван аргаар автоматаар хувирна:
- Индекс хуудас localhost/index
- Localhost/about тухай хуудас
- Блог хуудас localhost/нийтлэл
about.js хуудасны жишээг доор харуулав. Таны харж байгаагаар хуудасны талаар юу ч өгөөгүй байна. Энэ нь энгийн React функциональ бүрэлдэхүүн хэсэг юм.
Замууд
Үүлэн чиглүүлэлт хийхийн тулд эхлээд дэд хавтас үүсгэх ёстой. Жишээ нь: хуудас/нийтлэл. Энэ хавтас дотор өөрийн 'contact.js' урвалын бүрэлдэхүүн хэсгийг үүсгэснээр localhost/articles/contact хуудсыг үүсгэнэ.
Хэрэв та нэг файлыг pages/articles.js, нөгөө файлыг pages/articles/index.js-д оруулбал. Хоёулаа localhost/blog ижил замыг тусгадаг. Энэ тохиолдолд Next.js зүгээр л article.js файлыг үзүүлэх болно. Блогын нийтлэл бүр өөрийн гэсэн замтай байдаг динамик маршрутын тухайд:
- localhost/blog/first-article
- localhost/blog/-хоёр дахь нийтлэл
Хаалтны тэмдэглэгээг ашиглан Next.js дээр динамик маршрутыг тодорхойлж болно. Жишээ нь: pages/article/[slug].js
Маршрутуудыг холбох
Та одоо эхний маршрутаа дуусгалаа. Та эдгээр чиглүүлэлтүүдтэй хуудсыг хэрхэн холбох талаар асууж байгаа байх гэж бодож байна. Үүнийг хийхийн тулд танд "дараагийн/холбоос" хэрэгтэй болно.
Тухай хуудасны холбоосыг агуулсан нүүр хуудасны жишээ энд байна:
Хэрэв та холбоосыг загварчлахыг хүсвэл дараах синтаксийг ашиглана уу.
Маршрутуудыг дахин чиглүүлэх
Хэрэв та тодорхой хуудас руу дахин чиглүүлэх шаардлагатай бол яах вэ? Жишээлбэл, товчлуур дарахад? Та үүнийг 'router.push' ашиглан хийж болно:
SEO
Вэб програмууд дахь хуудсууд нь HTML үндсэн доторх өгөгдлөөс гадна мета (толгой) элементүүдийг шаарддаг. Энэ нь React Application-д React Helmet хэмээх нэмэлт шаардлагыг суулгах шаардлагатай болно.
Хайлтын үр дүн болон оруулахад харагдах вэб хуудсандаа мета өгөгдлийг хялбархан нэмэхийн тулд бид Next доторх Head-ийн дараагийн/head бүрэлдэхүүн хэсгийг ашиглаж болно.
бүрэлдэхүүн хэсэг
Та ихэвчлэн бүрэлдэхүүн хэсэг эсвэл байршлын файл боловсруулах шаардлагатай болдог. Жишээлбэл, navbar-г дүрслэх бүрэлдэхүүн хэсэг. Одоогоор бид хуудасны хавтсыг ашигласан. Хэрэв таны бүрэлдэхүүн хэсэг чиглүүлэлтийн хуудас биш бол яах вэ?
Та хэрэглэгчийг localhost/navbar гэх мэт хуудас руу шилжүүлэхийг хүсэхгүй байна. Хэрэв та Navbar.js бүрэлдэхүүн хэсгийг хуудасны хавтсанд хийвэл ийм зүйл болно. Нөхцөл байдалд та юу хийх ёстой вэ?
Зүгээр л "хуудас биш" бүх бүрэлдэхүүн хэсгүүдээ тусдаа хавтсанд хадгалаарай. Ихэнх Next.js төслүүд нь "бүрэлдэхүүн" нэр ашигладаг бөгөөд энэ хавтас нь таны төслийн үндсэн хавтсанд үүсгэгддэг.
Толгойн бүрэлдэхүүн хэсэг
Эхний хуудасны ачааллыг сервер талын Next.js-ээр гүйцэтгэдэг. Энэ нь таны хуудасны HTML-г өөрчлөх замаар үүнийг хийдэг. Толгой хэсгийг оруулсан болно.
Next.js Head бүрэлдэхүүн хэсэг нь гарчиг, мета зэрэг толгой хэсгийн тагуудыг өгөхөд ашиглагддаг. Layout бүрэлдэхүүн хэсгийн энэ жишээнд Head бүрэлдэхүүнийг ашигласан болно.
404 хуудас үүсгэх олдсонгүй
404 алдааны хуудсыг өөрөө хийх боломжтой. Та мессежийг өөрчлөх эсвэл өөрийн хуудасны дизайныг нэмэхийг хүсч болно. Хуудасны хавтсанд 404.js файлыг үүсгэнэ үү.
404 алдаа гарвал Next.js автоматаар энэ хуудас руу шилжих болно. Хувийн болгосон 404 хуудасны жишээ энд байна:
Сервер талаас өгөгдөл татах
Next.js нь үйлчлүүлэгч тал дээр өгөгдөл татаж авахын оронд анхны өгөгдөл цуглуулах боломжийг олгодог бөгөөд энэ нь серверээс аль хэдийн бөглөсөн өгөгдөлтэй хуудсыг илгээх гэсэн үг юм.
Танд сервер талын өгөгдөл татахыг хэрэгжүүлэх хоёр сонголт байна:
- Хүсэлт бүр дээр өгөгдөл татах ёстой.
- Барилга угсралтын явцад зөвхөн нэг удаа мэдээлэл авах (статик сайт)
Хүсэлт бүр дээр өгөгдөл татах
getServerSideProps аргыг сервер талын хүсэлт бүрийг үзүүлэхэд ашигладаг. Энэ функцийг бүрэлдэхүүн файлын төгсгөлд оруулж болно. Next.js нь таны бүрэлдэхүүн файлд энэ функц байгаа бол getServerSideProps объектыг автоматаар дүүргэх болно.
Барилга хийх үед өгөгдөл дуудах
getStaticProps аргыг бүтээх үед сервер талыг харуулахад ашигладаг. Энэ функцийг бүрэлдэхүүн файлын төгсгөлд оруулж болно. Энэ арга нь серверийн кодыг ажиллуулж, GET хүсэлтийг сервер рүү илгээдэг боловч бидний төсөл дуусахад зөвхөн нэг удаа.
Та яагаад Next.js сурах ёстой вэ?
Үүний нэг шалтгаан нь Next.js нь React программ дээр бүтээгдсэн байдаг. хэрэглэгчийн интерфэйсийг бий болгох Эдгээр нь вэб программ зохиоход миний хамгийн дуртай сонголт юм.
Гэхдээ Next.js хийсэн зүйлдээ сайн биш байсан бол энэ нь хангалтгүй байх байсан... тийм үү?
Тэгэхээр энэ нь яг юу хийдэг вэ?
Үүнийг ойлгохын тулд эхлээд хэд хэдэн ойлголтыг тодорхойлох хэрэгтэй. Next.js нь олон вэб хөгжүүлэгчдийн үйлчлүүлэгч талын вэб програмуудтай (хөтөч дээр) тулгарч байсан асуудлыг шийдэж чадсан учраас алдартай болсон. Эдгээр нэг хуудасны хэрэглүүрүүд (SPAs) нь хэрэглэгчдэд хуудсыг дахин ачаалах шаардлагагүй бөгөөд илүү олон харилцан үйлчлэлийн боломжийг олгосон тул илүү сайн туршлагатай байсан.
Гэсэн хэдий ч, үүнтэй төстэй програмын материалын ихэнх хэсэг нь зөвхөн хөтөч дээр хийгдсэн үед харагдах тул вэб мөлхөгчид ийм програмын текстийн агуулгыг ойлгоход хэцүү байдаг.
Үүний үр дүнд, хэдийгээр алдартай байсан ч олон ДЦГ-ууд Google гэх мэт томоохон хайлтын системүүдэд үл мэдэгдэх үлджээ. Next.js нь одоо React бүрэлдэхүүн хэсгүүдийг сервер талаас үзүүлэх (SSR) илүү бат бөх суурилуулсан механизмтай болсон.
Next.js нь хөгжүүлэгчдэд бүтээх процессын явцад сервер дээр JavaScript кодыг бүтээх боломжийг олгож, хэрэглэгчдэд үндсэн, индексжүүлж болох HTML-ээр хангах боломжийг олгодог.
Давуу тал
- Хэрэглэгчийн туршлагыг ашиглахад тохиромжтой
- SEO-д тохиромжтой
- Динамик шиг ажилладаг маш хурдан статик вэб сайтыг бүтээгээрэй
- UI & UX бүтээх уян хатан байдал.
- Хөгжлийн олон давуу тал
- Олон нийтийн сайн дэмжлэг
Байг
- Вэбсайт эсвэл программыг бүтээх, хөгжүүлэхэд тодорхой хугацаа байдаг.
- Тодорхой ажлуудын хувьд Next.js хангалтгүй байна. Хөгжүүлэгчид Node.js хэрэглүүрийг ашиглан динамик маршрут үүсгэх чадвартай байх ёстой.
Дүгнэлт
Таны харж байгаагаар Next.js нь React програмын хөгжүүлэлтийг хялбарчилж, хамгийн чухал зүйл болох өөрийн программын логик болон UI дээр анхаарлаа төвлөрүүлэх боломжийг олгодог. Үүнд орчин үеийн, интерфейсээр баялаг, API-ээр ажилладаг програмуудыг бий болгоход шаардлагатай бүх зүйл багтсан болно.
Энэ нь статик HTML хуудас үүсгэх чадвартай тул блог, бизнесийн вэбсайт зэрэг зөвхөн контент бүхий төслүүдэд тохиромжтой.
Одоогийн хувилбаруудаар Next.js нь хөгжүүлэгчийн өндөр түвшний туршлагыг хадгалахаас гадна харааны гүйцэтгэл, хэрэглэгчийн туршлагыг нэмэгдүүлэх хэрэгслүүдээр хангаж, энэ хүрээний гэрэлт ирээдүйг баталгаажуулдаг.
хариу үлдээх