Efnisyfirlit[Fela][Sýna]
Þegar þú velur hugbúnaðarsafn eða ramma er venjulega tekið tillit til reynslu þróunaraðila.
Þegar ég nefni „upplifun þróunaraðila“ á ég við hvernig verktaki vinna verkið í raun og veru. Hönnuðir velja bókasöfn eða ramma sem er skemmtilegt í notkun.
Þetta er ein af aðalástæðunum fyrir því að við höfum núna vinsælustu bókasöfnin og umgjörðina. Sem forritarar þurfum við ekki að byrja frá grunni þegar það eru til verkfæri sem eru búin til til að aðstoða okkur við verkefni okkar.
Rammar eru hugbúnaðarhlutar sem eru búnir til og notaðir af forriturum til að smíða forrit og NextJS er eitt þeirra.
Í þessari færslu munum við fara yfir Nextjs, helstu eiginleika þess og hvernig við getum notað það til að byggja upp forrit. Við skulum hoppa beint inn.
Hvað er Next.js?
Next.js er JavaScript ramma til að smíða fastar vefsíður á fljótlegan og auðveldan hátt og React-undirstaða netforrit. Það gerir þér kleift að hanna frábær vefforrit fyrir ýmsa vettvanga, þar á meðal Windows, Linux og Mac.
Þú ættir að kannast við Next.js ramma ef þú þekkir react í lágmarki og vilt læra meira um react vistkerfið.
Jafnvel þó að Next.js komi með allt sem þú þarft til að byrja, geturðu valið á milli NPM og Yarn, JavaScript og TypeScript, CSS og SCSS, kyrrstöðuútflutnings og miðlaralausrar uppsetningar.
Aðstaða
- Leiðbeining er gerð sjálfkrafa - Þú þarft ekki að stilla neitt vegna þess að hvaða vefslóð er varpað á skráarkerfið, á skrár í möppunni síða (þú hefur að sjálfsögðu sérstillingarvalkosti).
- Hlutar í einni skrá – Það er einfalt að bæta stílum sem eru með umfangsmikla við íhlutinn með því að nota styled-jsx, sem er algerlega samþætt og framleitt af sama teyminu.
- Endurhlaða heitum kóða – Þegar Next.js skynjar breytingu sem er vistuð á disknum endurhleður það síðuna.
- Dynamic Components – Þú getur hlaðið JavaScript einingar og React Components á virkan hátt.
- Statískur útflutningur – Next.js gerir þér kleift að flytja út algjörlega kyrrstæða síðu úr forritinu þínu með næstu útflutningsskipun.
- Samhæfni við umhverfið – Next.js fellur óaðfinnanlega inn í JavaScript, Node og React vistkerfin.
- Að skipta kóða sjálfkrafa - Aðeins þau bókasöfn og JavaScript sem krafist er eru notuð til að gera síður. Í stað þess að búa til eina JavaScript-skrá sem inniheldur allan kóða appsins, skiptir Next.js forritinu á skynsamlegan hátt í margar auðlindir.
Hvernig á að búa til next.js forrit?
uppsetning
Þú getur notað hnút npx skipunina til að setja upp og byggja upp Next.js verkefni.
Þetta mun búa til möppu og allar skrár, stillingar og önnur atriði sem þarf til að keyra Next.js verkefni.
Þú getur ræst forritið þegar það hefur verið búið til.
Síður og leið
Til að meðhöndla leiðir með Next.js þurfum við ekki að nota leiðarramma. Það er auðvelt að setja upp leið með Next.js. Þegar þú notar create-next-app skipunina til að búa til nýtt Next.js app, býr appið sjálfgefið til möppu sem kallast 'síður'.
Þessi 'síður' mappa er þar sem þú heldur leiðum þínum við. Þess vegna verður hver bregðast hluti skrá í undirmöppunni meðhöndluð sem sér leið.
Til dæmis, ef mappan inniheldur þessar skrár:
- index.js
- um.js
- aricles.js
Þessari skrá verður umbreytt sjálfkrafa á þrjá vegu:
- Vísindasíðan localhost/index
- Um síðuna localhost/um
- Bloggsíðan localhost/greinar
Dæmi um about.js síðu er sýnt hér að neðan. Ekkert er gefið upp um síðuna eins og þú sérð. Það er einfaldlega staðall React hagnýtur hluti.
Routes
Til að búa til hreiður leiðir verður þú fyrst að stofna undirmöppu. Til dæmis: síður/greinar. Búðu til 'contact.js' viðbragðshlutann þinn í þeirri möppu og hann mun búa til síðuna localhost/greinar/tengiliður.
Ef þú setur eina skrá í pages/articles.js og aðra í pages/articles/index.js. Báðir endurspegla sömu leið localhost/blogg. Í þessum aðstæðum mun Next.js bara birta article.js skrána. Hvað með kraftmiklar leiðir, þar sem hver bloggfærsla hefur sína eigin leið:
- localhost/blogg/fyrsta grein
- localhost/blogg/-annar-grein
Með því að nota svigamerki geturðu skilgreint kraftmikla leið í Next.js. Til dæmis: síður/grein/[slug].js
Tengja leiðir
Þú hefur nú lokið fyrstu leiðinni þinni. Ég býst við að þú sért að spyrja hvernig eigi að tengja síður við þessar leiðir. Þú þarft 'next/link' til að gera það.
Hér er dæmi um heimasíðu sem inniheldur tengil á Um síðuna:
Ef þú vilt stíla tengilinn skaltu nota eftirfarandi setningafræði:
Beina leiðum
Hvað ef þú þarft að þvinga framvísun á ákveðna síðu? Til dæmis, þegar ýtt er á takka? Þú getur náð þessu með því að nota 'router.push':
SEO
Síður í vefforritum krefjast meta (haus) þátta auk gagna innan HTML meginmálsins. Þetta mun krefjast uppsetningar á aukakröfu sem heitir React Helmet í React forriti.
Við getum notað Head íhlutinn frá next/head í Next til að bæta lýsigögnum á vefsíður okkar á auðveldan hátt sem birtast í leitarniðurstöðum og innfellingum:
Hluti
Þú þarft oft að þróa íhluti eða útlitsskrá. Til dæmis, hluti sem gerir navbar. Við höfum bara notað síður möppuna hingað til. Hvað ef íhlutinn þinn á ekki að vera leiðarsíða?
Þú vilt ekki að notandinn fari á síðu eins og localhost/navbar. Ef þú setur Navbar.js íhlutinn í pages möppuna, þá mun það gerast. Hvað ættir þú að gera í stöðunni?
Geymdu einfaldlega alla 'ekki síðu' íhlutina þína í sérstakri möppu. Flest Next.js verkefni nota heitið 'components' og þessi mappa er búin til í rótarmöppu verkefnisins þíns.
Höfuðhluti
Upphafleg síðuhleðsla er sýnd af Next.js á netþjóninum. Það gerir þetta með því að breyta HTML síðunnar þinnar. Höfuðhlutinn fylgir með.
Next.js Head hluti er notaður til að gefa haushlutamerki eins og titil og meta. Höfuðhlutinn er notaður í þessu dæmi um útlitshluta.
Búa til 404 síðu fannst ekki
Það er mögulegt að búa til þína eigin 404 villusíðu. Þú gætir viljað sérsníða skilaboðin eða bæta við þinni eigin síðuhönnun. Búðu til 404.js skrána í pages möppunni.
Þegar 404 villa kemur upp mun Next.js sjálfkrafa vísa á þessa síðu. Hér er dæmi um sérsniðna 404 síðu:
Gögn sótt frá miðlarahlið
Í stað þess að hlaða niður gögnum á biðlarahlið, gerir Next.js þér kleift að framkvæma upphaflega gagnafjölda, sem felur í sér að þú sendir síðuna með gögnunum sem þegar eru fyllt út frá þjóninum.
Þú hefur tvo kosti til að útfæra gagnasöfnun á netþjóni:
- Gögn skulu sótt um hverja beiðni.
- Fáðu aðeins gögn einu sinni í gegnum byggingarferlið (stöðug síða)
Sæktu gögn um hverja beiðni
GetServerSideProps aðferðin er notuð til að birta hverja beiðni á netþjóni. Þessi aðgerð er hægt að setja í lok íhlutaskrárinnar. Next.js mun sjálfkrafa fylla íhlutina þína með getServerSideProps hlutnum ef þessi aðgerð er til staðar í íhlutaskránni þinni.
Sæktu gögn á byggingartíma
GetStaticProps aðferðin er notuð til að birta miðlarahlið á byggingartíma. Þessi aðgerð er hægt að setja í lok íhlutaskrárinnar. Þessi aðferð keyrir netþjónskóðann og sendir GET beiðni til netþjónsins, en aðeins einu sinni þegar verkefninu okkar er lokið.
Hvers vegna ættir þú að læra Next.js?
Ein af ástæðunum fyrir þessu er sú að Next.js er byggt ofan á React, framhliðarþróunarverkfærasett fyrir búa til notendaviðmót sem eru uppáhalds valið mitt til að hanna vefforrit.
En það væri ekki nóg ef Next.js væri ekki góður í því sem það gerði... ekki satt?
Svo, hvað nákvæmlega gerir það?
Við verðum fyrst að skilgreina nokkur hugtök til að skilja það. Next.js náði vinsældum vegna þess að það leysti vandamál sem margir vefhönnuðir höfðu með vefforrit viðskiptavinarhliðar (í vafranum). Þessi einsíðuforrit (SPA) höfðu betri upplifun þar sem þau þurftu ekki notandann til að endurhlaða síðuna og leyfðu meiri gagnvirkni.
Hins vegar, vegna þess að megnið af efninu í appi sem þessu verður aðeins sýnilegt þegar það er framkvæmt í vafranum, eiga vefskriðlar erfitt með að skilja textainnihald slíks apps.
Fyrir vikið, þrátt fyrir vinsældir þeirra, voru margar heilsulindir að mestu nafnlausar fyrir stórum leitarvélum eins og Google. Next.js inniheldur nú öflugri innbyggða vélbúnað fyrir flutning á netþjóni (SSR) á React íhlutum.
Next.js gerir forriturum kleift að smíða JavaScript kóða á þjóninum meðan á smíðaferlinu stendur og veita notandanum undirstöðu, vísitöluhæfan HTML.
Kostir
- Frábært fyrir notendaupplifun
- Frábært fyrir SEO
- Búðu til ofurhraða kyrrstæða vefsíðu sem hegðar sér eins og kraftmikil
- Sveigjanleiki í að byggja upp UI & UX.
- Margir þróunarkostir
- Frábær stuðningur í samfélaginu
Gallar
- Vefsíður eða forrit hafa ákveðinn tíma til að smíða eða þróa.
- Fyrir ákveðin verkefni er Next.js ófullnægjandi. Hönnuðir ættu að geta smíðað kraftmiklar leiðir með því að nota Node.js verkfæri.
Niðurstaða
Eins og þú sérð þá einfaldar Next.js þróun React forrita og gerir þér kleift að einbeita þér að því sem skiptir mestu máli - rökfræði forritsins þíns og notendaviðmót. Það inniheldur allt sem þarf til að búa til nútímaleg, framendarík og API-knúin öpp.
Það er líka viðeigandi fyrir efni eingöngu verkefni, svo sem blogg og viðskiptavefsíður, vegna getu þess til að byggja upp kyrrstæðar HTML síður.
Með núverandi útgáfum viðheldur Next.js ekki aðeins háu stigi þróunarupplifunar heldur gefur einnig verkfæri til að auka sjónræna frammistöðu og notendaupplifun, sem tryggir bjarta framtíð fyrir þessa ramma.
Skildu eftir skilaboð