Kaundan[Itago][Ipakita]
Kung nagpili usa ka librarya sa software o balangkas, ang kasinatian sa developer sagad nga gikonsiderar.
Kung hisgutan nako ang "eksperyensiya sa developer," akong gipasabut kung giunsa sa mga developer ang aktwal nga pagbuhat sa trabaho. Gipili sa mga developer ang mga librarya o mga framework nga makalingaw gamiton.
Kini mao ang usa sa mga nag-unang rason ngano nga kita karon adunay labing popular nga mga librarya ug mga gambalay. Isip mga nag-develop, dili kinahanglan nga magsugod kami gikan sa wala kung adunay mga himan nga gihimo aron matabangan kami sa among mga buluhaton.
Ang mga balangkas kay mga piraso sa software nga gimugna ug gigamit sa mga developers sa paghimo og mga aplikasyon, ug ang NextJS usa niini.
Sa kini nga post, atong hisgotan ang Nextjs, ang mga yawe nga bahin niini, ug kung giunsa naton kini magamit sa paghimo og aplikasyon. Ambak dayon ta.
Unsa ang Next.js?
Sunod.js usa ka JavaScript framework para sa dali ug dali nga paghimo ug static nga mga webpage ug mga aplikasyon sa online nga nakabase sa React. Gitugotan ka niini nga magdesinyo ug maayo nga mga Web apps alang sa lainlaing mga platform, lakip ang Windows, Linux, ug Mac.
Kinahanglan nga pamilyar ka sa Next.js framework kung gamay ra ang imong kahibalo sa reaksyon ug gusto nimo mahibal-an ang dugang bahin sa reaksyon nga ekosistema.
Bisan kung ang Next.js adunay tanan nga kinahanglan nimo aron makasugod, mahimo ka makapili tali sa NPM ug Yarn, JavaScript ug TypeScript, CSS ug SCSS, static nga pag-eksport, ug wala’y server nga pag-deploy.
Features
- Awtomatikong gihimo ang pagruta – Dili nimo kinahanglan nga i-configure ang bisan unsang butang tungod kay ang bisan unsang URL gi-mapa sa filesystem, sa mga file sa folder sa mga panid (adunay mga kapilian sa pag-customize, siyempre).
- Mga Bahagi sa Usa ka File - Yano ang pagdugang mga istilo nga nasakupan sa sangkap gamit ang styled-jsx, nga hingpit nga gisagol ug gihimo sa parehas nga grupo.
- Pag-reload sa usa ka Hot Code - Kung ang Next.js nakamatikod sa usa ka pagbag-o nga gitipig sa disk, gi-reload niini ang panid.
- Dynamic nga mga Komponen - Mahimo nimo nga dinamikong i-load ang mga module sa JavaScript ug React Components.
- Static exports - Gitugotan ka sa Next.js nga i-export ang usa ka hingpit nga static nga site gikan sa imong app gamit ang sunod nga export command.
- Pagkaangay sa Kalikopan - Ang Next.js nahiusa nga hapsay sa JavaScript, Node, ug React nga ekosistema.
- Awtomatikong Pagbahin sa mga Kodigo - Ang mga librarya ug JavaScript lamang nga gikinahanglan ang gigamit sa paghubad sa mga panid. Imbis nga maghimo ug usa ka JavaScript file nga adunay tanan nga code sa app, ang Next.js maalamon nga nagbahin sa app sa daghang mga kapanguhaan.
Giunsa paghimo ang sunod.js nga aplikasyon?
Instalar
Mahimo nimong gamiton ang node npx command aron i-install ug magtukod og Next.js nga proyekto.
Makamugna kini og folder ug tanang mga file, configuration, ug uban pang mga butang nga gikinahanglan sa pagpadagan sa Next.js nga proyekto.
Mahimo nimong ilunsad ang app kung nahimo na kini.
Mga Panid ug Pagruta
Aron madumala ang mga ruta gamit ang Next.js, dili na kinahanglan nga mogamit kami usa ka balangkas sa pagruta. Ang pagruta gamit ang Next.js dali ra nga i-set up. Kung imong gamiton ang create-next-app nga sugo sa paghimo ug bag-ong Next.js app, ang app maghimo ug folder nga gitawag ug 'panid' nga default.
Kini nga 'panid' nga folder diin imong gipadayon ang imong mga ruta. Ingon usa ka sangputanan, ang matag reaksyon sa mga sangkap nga file sa subdirectory pagadumala ingon usa ka lahi nga ruta.
Pananglitan, kung ang folder naglangkob sa mga file:
- index.js
- mahitungod.js
- aricles.js
Kini nga file awtomatikong mabag-o sa tulo ka paagi:
- Ang index page localhost/index
- Ang mahitungod sa panid localhost/mahitungod
- Ang panid sa blog localhost/artikulo
Usa ka pananglitan sa usa ka about.js nga panid gipakita sa ubos. Wala’y gihatag bahin sa panid, ingon sa imong makita. Kini usa lamang ka standard nga React functional component.
Mga ruta
Aron makahimo og mga nested nga ruta, kinahanglan una nimo nga magtukod og usa ka subfolder. Pananglitan: mga panid/artikulo. Paghimo sa imong 'contact.js' react component sulod niana nga folder, ug kini makamugna sa page localhost/articles/contact.
Kung imong ibutang ang usa ka file sa pages/articles.js ug lain sa pages/articles/index.js. Ang duha nagpakita sa parehas nga dalan localhost/blog. Niini nga sitwasyon, ang Next.js maghubad lang sa article.js file. Unsa man ang bahin sa dinamikong mga ruta, diin ang matag post sa blog adunay kaugalingon nga agianan:
- localhost/blog/first-article
- localhost/blog/-second-article
Gamit ang notasyon sa mga bracket, mahimo nimong ipasabut ang usa ka dinamikong ruta sa Next.js. Pananglitan: mga panid/artikulo/[slug].js
Link Ruta
Nakompleto na nimo ang imong unang rota. Nagtuo ko nga nangutana ka kung giunsa ang pagkonektar sa mga panid sa mga ruta. Kinahanglan nimo ang 'sunod/link' aron mahimo kini.
Ania ang usa ka pananglitan sa usa ka home page nga adunay usa ka link sa About page:
Kung gusto nimo i-estilo ang link, gamita ang mosunod nga syntax:
I-redirect ang mga Ruta
Unsa kaha kung kinahanglan nimo nga pugson ang usa ka pag-redirect sa usa ka piho nga panid? Pananglitan, kung ang usa ka buton gipugos? Mahimo nimo kini pinaagi sa paggamit sa 'router.push':
SEO
Ang mga panid sa mga aplikasyon sa web nanginahanglan mga elemento sa meta (ulo) dugang sa datos sa sulod sa HTML nga lawas. Kinahanglan niini ang pag-instalar sa usa ka dugang nga kinahanglanon nga ginganlag React Helmet sa usa ka React Application.
Magamit namo ang sangkap sa Ulo gikan sa sunod/ulo sa Sunod aron daling makadugang sa metadata sa among mga webpage nga ipakita sa mga resulta sa pagpangita ug mga embeds:
components
Kanunay nimo kinahanglan nga maghimo mga sangkap o usa ka layout file. Pananglitan, usa ka sangkap nga naghubad sa navbar. Bag-o lang namon gigamit ang folder sa mga panid hangtod karon. Unsa kaha kung ang imong sangkap dili gituyo nga usa ka panid sa ruta?
Dili nimo gusto nga ang user mag-navigate sa usa ka panid sama sa localhost/navbar. Kung imong ibutang ang component sa Navbar.js sa folder sa mga panid, mao kana ang mahitabo. Unsay angay nimong buhaton sa sitwasyon?
Itago lang ang tanan nimong sangkap nga 'dili panid' sa usa ka lahi nga folder. Kadaghanan sa mga proyekto sa Next.js naggamit sa moniker nga 'mga sangkap,' ug kini nga folder gihimo sa root folder sa imong proyekto.
Ulo nga sangkap
Ang inisyal nga pagkarga sa panid gihubad sa Next.js sa server-side. Gihimo kini pinaagi sa pag-usab sa HTML sa imong panid. Ang seksyon sa ulohan gilakip.
Ang Next.js Head component kay gigamit sa paghatag ug header section tags sama sa title ug meta. Ang Ulo nga sangkap gigamit sa kini nga pananglitan sa usa ka bahin sa Layout.
Paghimo og 404 nga panid nga dili makita
Posible nga maghimo sa imong kaugalingon nga panid sa sayup nga 404. Mahimo nimong ipasibo ang mensahe o idugang ang imong kaugalingon nga disenyo sa panid. Sa folder sa mga panid, paghimo sa 404.js file.
Kung adunay 404 nga sayup nga mahitabo, ang Next.js awtomatiko nga mag-redirect sa kini nga panid. Ania ang usa ka pananglitan sa usa ka personal nga 404 nga panid:
Pagkuha sa Data gikan sa server-side
Imbis nga mag-download sa datos sa kilid sa kliyente, gitugotan ka sa Next.js nga magpahigayon usa ka inisyal nga populasyon sa datos, nga nagpasabut nga ipadala ang panid nga adunay mga datos nga napuno na gikan sa server.
Adunay ka duha ka kapilian alang sa pagpatuman sa pagkuha sa data sa kilid sa server:
- Kinahanglang makuha ang datos sa matag hangyo.
- Pagkuha lang ug datos kausa sa tibuok proseso sa pagtukod (static site)
Kuhaa ang datos sa matag hangyo
Ang getServerSideProps nga pamaagi gigamit sa server-side nga maghatag sa matag hangyo. Kini nga function mahimong iapil sa katapusan sa imong component file. Ang Next.js awtomatik nga mopuno sa imong component props sa getServerSideProps object kon kana nga function anaa sa imong component file.
Kuhaa ang datos sa oras sa pagtukod
Ang getStaticProps nga pamaagi gigamit sa pag-render sa server-side sa oras sa pagtukod. Kini nga function mahimong iapil sa katapusan sa imong component file. Kini nga pamaagi nagpadagan sa server code ug nagpadala ug GET nga hangyo sa server, apan kausa ra kung mahuman ang among proyekto.
Ngano nga kinahanglan nimong tun-an ang Next.js?
Usa sa mga hinungdan niini tungod kay ang Next.js gitukod sa ibabaw sa React, usa ka toolkit sa pagpauswag sa unahan alang sa paghimo sa mga user interface kana ang akong paborito nga kapilian alang sa pagdesinyo sa mga web app.
Apan dili kini igo kung ang Next.js dili maayo sa gibuhat niini… di ba?
Busa, unsa gayud ang gibuhat niini?
Kinahanglang una natong ipasabot ang pipila ka mga konsepto aron masabtan kini. Nahimong popular ang Next.js tungod kay nakasulbad kini sa problema sa daghang web developers sa client-side web apps (sa browser). Kini nga Single-Page Applications (SPAs) adunay mas maayo nga kasinatian tungod kay wala nila kinahanglana ang user nga i-reload ang panid ug gitugotan ang dugang nga interaktibidad.
Bisan pa, tungod kay ang kadaghanan sa materyal sa usa ka app nga sama niini makita ra kung kini gihimo sa browser, ang mga web crawler maglisud sa pagsabut sa sulud sa teksto sa ingon nga app.
Ingon usa ka sangputanan, bisan pa sa ilang pagkapopular, daghang mga SPA ang nagpabilin nga wala mailhi sa dagkong mga search engine sama sa Google. Next.js naglakip na karon ug mas lig-on nga built-in nga mekanismo para sa server-side rendering (SSR) sa React components.
Gitugotan sa Next.js ang mga developers sa paghimo og JavaScript code sa server atol sa proseso sa pagtukod ug paghatag og sukaranan, ma-index nga HTML ngadto sa user.
pros
- Maayo alang sa kasinatian sa user
- Maayo alang sa SEO
- Paghimo usa ka super-paspas nga static nga website nga molihok sama sa usa ka dinamiko
- Pagka-flexible sa pagtukod sa UI & UX.
- Daghang mga bentaha sa pag-uswag
- Dakong suporta sa komunidad
disbentaha
- Ang mga website o aplikasyon adunay piho nga oras sa paghimo o pag-uswag.
- Alang sa pipila ka mga buluhaton, ang Next.js dili igo. Ang mga developers kinahanglan nga makahimo sa paghimo og dinamikong mga rota gamit ang Node.js nga mga himan.
Panapos
Sama sa imong nakita, gipasimple sa Next.js ang pag-develop sa React app ug gitugotan ka nga mag-focus sa kung unsa ang labing hinungdanon - ang imong logic sa app ug UI. Naglakip kini sa tanan nga gikinahanglan sa paghimo sa mga kontemporaryo, puno sa frontend ug gipadagan sa API nga mga app.
Angayan usab kini alang sa mga proyekto nga kontent lamang, sama sa mga blog ug website sa negosyo, tungod sa abilidad niini sa paghimo sa mga static nga HTML nga panid.
Uban sa kasamtangan nga mga edisyon, ang Next.js dili lamang nagmintinar sa taas nga lebel sa kasinatian sa developer apan naghatag usab og mga himan alang sa pagdugang sa biswal nga performance ug kasinatian sa user, pagsiguro sa usa ka masanag nga kaugmaon alang niini nga balangkas.
Leave sa usa ka Reply