Talaan ng nilalaman[Tago][Ipakita]
Kapag pumipili ng library ng software o framework, karaniwang isinasaalang-alang ang karanasan ng developer.
Kapag binanggit ko ang "karanasan ng developer," tinutukoy ko kung paano talaga ginagawa ng mga developer ang trabaho. Pinipili ng mga developer ang mga library o framework na kasiya-siyang gamitin.
Isa ito sa mga pangunahing dahilan kung bakit mayroon na tayong pinakasikat na mga library at framework. Bilang mga developer, hindi namin kailangang magsimula sa simula kapag may mga umiiral nang tool na nilikha upang tulungan kami sa aming mga gawain.
Ang mga Framework ay mga piraso ng software na nilikha at ginagamit ng mga developer para bumuo ng mga application, at isa na rito ang NextJS.
Sa post na ito, tatalakayin natin ang Nextjs, ang mga pangunahing tampok nito, at kung paano natin ito magagamit upang bumuo ng isang application. Tumalon tayo kaagad.
Ano ang Next.js?
Susunod.js ay isang JavaScript framework para sa mabilis at madaling pagbuo ng mga static na webpage at mga online na application na nakabatay sa React. Binibigyang-daan ka nitong magdisenyo ng mahuhusay na Web app para sa iba't ibang platform, kabilang ang Windows, Linux, at Mac.
Dapat ay pamilyar ka sa Next.js framework kung mayroon kang kaunting pamilyar sa react at gusto mong matuto nang higit pa tungkol sa react ecosystem.
Kahit na ang Next.js ay kasama ng lahat ng kailangan mo upang makapagsimula, maaari kang pumili sa pagitan ng NPM at Yarn, JavaScript at TypeScript, CSS at SCSS, static na pag-export, at serverless deployment.
Mga tampok
- Awtomatikong ginagawa ang pagruruta – Hindi mo kailangang i-configure ang anuman dahil ang anumang URL ay nakamapa sa filesystem, sa mga file sa folder ng mga pahina (mayroon kang mga pagpipilian sa pagpapasadya, siyempre).
- Mga Bahagi ng Isang File – Simpleng magdagdag ng mga istilong nasasakupan sa bahagi gamit ang styled-jsx, na ganap na isinama at ginawa ng parehong team.
- Nagre-reload ng Hot Code – Kapag nakita ng Next.js ang isang pagbabagong na-save sa disk, nire-reload nito ang page.
- Mga Dynamic na Bahagi – Maaari mong dynamic na i-load ang mga module ng JavaScript at React Components.
- Mga static na pag-export – Binibigyang-daan ka ng Next.js na mag-export ng ganap na static na site mula sa iyong app gamit ang susunod na command sa pag-export.
- Pagiging tugma sa Kapaligiran – Ang Next.js ay walang putol na isinasama sa JavaScript, Node, at React ecosystem.
- Awtomatikong Paghahati ng Mga Code – Ang mga aklatan at JavaScript lamang na kinakailangan ang ginagamit upang mag-render ng mga pahina. Sa halip na gumawa ng isang JavaScript file na naglalaman ng lahat ng code ng app, matalinong hinahati ng Next.js ang app sa maraming mapagkukunan.
Paano gumawa ng next.js application?
instalasyon
Maaari mong gamitin ang node npx command para mag-install at bumuo ng Next.js project.
Bubuo ito ng isang folder at lahat ng mga file, configuration, at iba pang mga item na kinakailangan upang magpatakbo ng isang Next.js na proyekto.
Maaari mong ilunsad ang app kapag nabuo na ito.
Mga Pahina at Pagruruta
Upang mahawakan ang mga ruta gamit ang Next.js, hindi namin kailangang gumamit ng balangkas ng pagruruta. Ang pagruruta gamit ang Next.js ay madali lang i-set up. Kapag ginamit mo ang command na create-next-app para bumuo ng bagong Next.js app, gagawa ang app ng folder na tinatawag na 'mga page' bilang default.
Ang folder na 'mga pahina' na ito ay kung saan mo pinapanatili ang iyong mga ruta. Bilang resulta, ang bawat reacts na bahagi ng file sa subdirectory ay hahawakan bilang isang hiwalay na ruta.
Halimbawa, kung ang folder ay naglalaman ng mga file na iyon:
- index.js
- about.js
- aricles.js
Awtomatikong babaguhin ang file na ito sa tatlong paraan:
- Ang index page localhost/index
- Ang tungkol sa page localhost/about
- Ang blog page localhost/articles
Ang isang halimbawa ng isang about.js page ay ipinapakita sa ibaba. Walang ibinigay tungkol sa pahina, tulad ng nakikita mo. Ito ay isang karaniwang bahagi ng functional na React.
ruta
Upang gumawa ng mga nested na ruta, kailangan mo munang magtatag ng subfolder. Halimbawa: mga pahina/artikulo. Gawin ang iyong 'contact.js' react component sa loob ng folder na iyon, at bubuo ito ng page localhost/articles/contact.
Kung maglalagay ka ng isang file sa pages/articles.js at isa pa sa pages/articles/index.js. Parehong sumasalamin sa parehong landas localhost/blog. Sa sitwasyong ito, ire-render lang ng Next.js ang article.js file. Paano ang tungkol sa mga dynamic na ruta, kung saan ang bawat post sa blog ay may sariling landas:
- localhost/blog/first-article
- localhost/blog/-second-article
Gamit ang notasyon ng mga bracket, maaari mong tukuyin ang isang dynamic na ruta sa Next.js. Halimbawa: mga pahina/artikulo/[slug].js
I-link ang Mga Ruta
Nakumpleto mo na ngayon ang iyong unang ruta. Sa palagay ko nagtatanong ka kung paano ikonekta ang mga pahina sa mga rutang iyon. Kakailanganin mo ang 'next/link' para magawa ito.
Narito ang isang halimbawa ng isang home page na may kasamang link sa page na Tungkol sa:
Kung gusto mong lagyan ng istilo ang link, gamitin ang sumusunod na syntax:
I-redirect ang Mga Ruta
Paano kung kailangan mong pilitin ang pag-redirect sa isang partikular na pahina? Halimbawa, kapag pinindot ang isang pindutan? Magagawa mo ito sa pamamagitan ng paggamit ng 'router.push':
SEO
Ang mga page sa mga web application ay nangangailangan ng meta (head) na mga elemento bilang karagdagan sa data sa loob ng HTML body. Ito ay mangangailangan ng pag-install ng isang karagdagang kinakailangan na pinangalanang React Helmet sa isang React Application.
Magagamit namin ang bahaging Head mula sa susunod/ulo sa Susunod upang madaling magdagdag ng metadata sa aming mga webpage na ipapakita sa mga resulta ng paghahanap at mga embed:
Piraso
Madalas mong kakailanganing bumuo ng mga bahagi o layout ng file. Halimbawa, isang bahagi na nag-render ng navbar. Ginamit lang namin ang folder ng mga pahina sa ngayon. Paano kung hindi dapat maging page ng ruta ang iyong component?
Hindi mo gustong mag-navigate ang user sa isang page gaya ng localhost/navbar. Kung ilalagay mo ang bahagi ng Navbar.js sa folder ng mga pahina, iyon ang mangyayari. Ano ang dapat mong gawin sa sitwasyon?
I-store lang ang lahat ng iyong bahagi na 'hindi isang pahina' sa isang hiwalay na folder. Karamihan sa mga proyekto ng Next.js ay gumagamit ng moniker na 'mga bahagi,' at ang folder na ito ay nabuo sa root folder ng iyong proyekto.
Bahagi ng ulo
Ang paunang pag-load ng pahina ay nai-render ng Next.js sa gilid ng server. Ginagawa ito sa pamamagitan ng pagbabago sa HTML ng iyong pahina. Kasama ang seksyon ng header.
Ang bahagi ng Next.js Head ay ginagamit upang magbigay ng mga tag ng seksyon ng header gaya ng pamagat at meta. Ginagamit ang Head component sa halimbawang ito ng isang Layout component.
Lumikha ng 404 na pahina na hindi nahanap
Posible na gumawa ng sarili mong 404 na pahina ng error. Baka gusto mong i-customize ang mensahe o idagdag ang iyong sariling disenyo ng page. Sa folder ng mga pahina, gawin ang 404.js file.
Kapag nagkaroon ng 404 error, awtomatikong magre-redirect ang Next.js sa page na ito. Narito ang isang halimbawa ng isang personalized na 404 na pahina:
Pagkuha ng Data mula sa server-side
Sa halip na mag-download ng data sa panig ng kliyente, pinapayagan ka ng Next.js na magsagawa ng paunang populasyon ng data, na nagpapahiwatig ng pagpapadala sa page na may data na na-populate na mula sa server.
Mayroon kang dalawang pagpipilian para sa pagpapatupad ng pagkuha ng data sa panig ng server:
- Dapat kunin ang data sa bawat kahilingan.
- Isang beses lang kumuha ng data sa buong proseso ng konstruksiyon (static na site)
Kunin ang data sa bawat kahilingan
Ang getServerSideProps na paraan ay ginagamit upang i-render sa panig ng server ang bawat kahilingan. Maaaring isama ang function na ito sa dulo ng iyong component file. Awtomatikong pupunuin ng Next.js ang iyong component props ng object na getServerSideProps kung naroroon ang function na iyon sa iyong component file.
Kunin ang data sa oras ng pagbuo
Ang getStaticProps method ay ginagamit para i-render ang server-side sa oras ng build. Maaaring isama ang function na ito sa dulo ng iyong component file. Ang pamamaraang ito ay nagpapatakbo ng code ng server at nagpapadala ng kahilingan sa GET sa server, ngunit isang beses lang kapag natapos na ang aming proyekto.
Bakit kailangan mong matuto ng Next.js?
Isa sa mga dahilan nito ay dahil ang Next.js ay binuo sa ibabaw ng React, isang front-end development toolkit para sa paglikha ng mga user interface iyon ang paborito kong pagpipilian para sa pagdidisenyo ng mga web app.
Ngunit hindi ito magiging sapat kung ang Next.js ay hindi magaling sa ginawa nito... tama?
Kaya, ano nga ba ang ginagawa nito?
Kailangan muna nating tukuyin ang ilang mga konsepto upang maunawaan ito. Ang Next.js ay nakakuha ng katanyagan dahil nalutas nito ang isang problema ng maraming web developer sa client-side web apps (sa browser). Ang mga Single-Page Application (SPA) na ito ay nagkaroon ng mas magandang karanasan dahil hindi nila kailangan ng user na i-reload ang page at pinapayagan ang higit pang interaktibidad.
Gayunpaman, dahil ang karamihan ng materyal sa isang app na tulad nito ay makikita lamang kapag ito ay ginawa sa browser, ang mga web crawler ay nahihirapang unawain ang text content ng naturang app.
Bilang resulta, sa kabila ng kanilang katanyagan, maraming SPA ang nanatiling hindi kilalang kilala sa malalaking search engine tulad ng Google. Kasama na ngayon sa Next.js ang isang mas matatag na built-in na mekanismo para sa server-side rendering (SSR) ng mga bahagi ng React.
Ang Next.js ay nagbibigay-daan sa mga developer na bumuo ng JavaScript code sa server sa panahon ng proseso ng pagbuo at magbigay ng basic, indexable HTML sa user.
Mga kalamangan
- Mahusay para sa karanasan ng gumagamit
- Mahusay para sa SEO
- Bumuo ng napakabilis na static na website na kumikilos tulad ng isang dynamic
- Flexibility sa pagbuo ng UI at UX.
- Maraming mga pakinabang sa pag-unlad
- Mahusay na suporta sa pamayanan
Kahinaan
- Ang mga website o application ay may isang tiyak na tagal ng oras upang bumuo o bumuo.
- Para sa ilang partikular na gawain, hindi sapat ang Next.js. Ang mga developer ay dapat na makabuo ng mga dynamic na ruta gamit ang mga tool ng Node.js.
Konklusyon
Gaya ng nakikita mo, pinapasimple ng Next.js ang pag-develop ng React app at binibigyang-daan kang tumuon sa kung ano ang pinakamahalaga – ang logic ng iyong app at UI. Kabilang dito ang lahat ng kailangan para gumawa ng mga kontemporaryo, mayaman sa frontend at pinapagana ng API na mga app.
Naaangkop din ito para sa mga proyektong nilalaman lamang, tulad ng mga blog at website ng negosyo, dahil sa kakayahang bumuo ng mga static na HTML na pahina.
Sa kasalukuyang mga edisyon, ang Next.js ay hindi lamang nagpapanatili ng mataas na antas ng karanasan ng developer ngunit nagbibigay din ng mga tool para sa pagpapataas ng visual na pagganap at karanasan ng user, na tinitiyak ang magandang kinabukasan para sa framework na ito.
Mag-iwan ng Sagot