Përmbajtje[Fshih][Shfaqje]
Kur zgjedh një bibliotekë ose kornizë softuerësh, zakonisht merret parasysh përvoja e zhvilluesit.
Kur përmend "përvojën e zhvilluesit", po i referohem mënyrës se si zhvilluesit e bëjnë punën në të vërtetë. Zhvilluesit zgjedhin bibliotekat ose kornizat që janë të këndshme për t'u përdorur.
Kjo është një nga arsyet kryesore pse ne tani kemi bibliotekat dhe kornizat më të njohura. Si zhvillues, ne nuk duhet të fillojmë nga e para kur ka mjete ekzistuese të krijuara për të na ndihmuar me detyrat tona.
Kornizat janë pjesë softuerësh që krijohen dhe përdoren nga zhvilluesit për të ndërtuar aplikacione, dhe NextJS është një prej tyre.
Në këtë postim, ne do të shqyrtojmë Nextjs, veçoritë kryesore të tij dhe si mund ta përdorim atë për të ndërtuar një aplikacion. Le të hidhemi menjëherë.
Çfarë është Next.js?
Tjetra.js është një kornizë JavaScript për ndërtimin e shpejtë dhe të lehtë të uebfaqeve statike dhe aplikacioneve online të bazuara në React. Kjo ju lejon të dizajnoni aplikacione të shkëlqyera në ueb për një sërë platformash, duke përfshirë Windows, Linux dhe Mac.
Ju duhet të njiheni me kornizën Next.js nëse keni njohuri minimale me react dhe dëshironi të mësoni më shumë rreth ekosistemit react.
Edhe pse Next.js vjen me gjithçka që ju nevojitet për të filluar, ju mund të zgjidhni midis NPM dhe Yarn, JavaScript dhe TypeScript, CSS dhe SCSS, eksport statik dhe vendosje pa server.
karakteristika
- Rutimi bëhet automatikisht – Nuk keni nevojë të konfiguroni asgjë, sepse çdo URL është e lidhur me sistemin e skedarëve, me skedarët në dosjen e faqeve (sigurisht keni opsione personalizimi).
- Përbërësit e një skedari të vetëm – Është e thjeshtë të shtoni stile të shtrira në komponent duke përdorur styled-jsx, i cili është plotësisht i integruar dhe prodhuar nga i njëjti ekip.
- Ringarkimi i një kodi të nxehtë – Kur Next.js zbulon një modifikim të ruajtur në disk, ai ringarkon faqen.
- Komponentët Dinamikë – Mund të ngarkoni në mënyrë dinamike modulet JavaScript dhe Komponentët React.
- Eksportet statike – Next.js ju lejon të eksportoni një sajt plotësisht statik nga aplikacioni juaj me komandën tjetër të eksportit.
- Pajtueshmëria me mjedisin – Next.js integrohet pa probleme me ekosistemet JavaScript, Node dhe React.
- Ndarja e kodeve automatikisht – Vetëm bibliotekat dhe JavaScript që kërkohen përdoren për të dhënë faqet. Në vend që të krijojë një skedar të vetëm JavaScript që përmban të gjithë kodin e aplikacionit, Next.js e ndan në mënyrë inteligjente aplikacionin në shumë burime.
Si të krijoni një aplikacion next.js?
Instalim
Ju mund të përdorni komandën node npx për të instaluar dhe ndërtuar një projekt Next.js.
Kjo do të gjenerojë një dosje dhe të gjithë skedarët, konfigurimet dhe artikujt e tjerë të nevojshëm për të ekzekutuar një projekt Next.js.
Mund ta nisni aplikacionin pasi të jetë krijuar.
Faqet & Drejtimi
Për të trajtuar rrugët me Next.js, nuk kemi nevojë të përdorim një kornizë rrugëtimi. Drejtimi me Next.js është i lehtë për t'u konfiguruar. Kur përdorni komandën Creative-Next-app për të ndërtuar një aplikacion të ri Next.js, aplikacioni krijon si parazgjedhje një dosje të quajtur 'pages'.
Kjo dosje 'faqet' është vendi ku ruani rrugët tuaja. Si rezultat, çdo skedar i komponentëve të reagimit në nëndrejtori do të trajtohet si një rrugë e veçantë.
Për shembull, nëse dosja përmban ato skedarë:
- indeks.js
- rreth.js
- aricles.js
Ky skedar do të transformohet automatikisht në tre mënyra:
- Faqja e indeksit localhost/index
- Faqja rreth localhost/rreth
- Faqja e blogut localhost/artikuj
Një shembull i një faqeje about.js është paraqitur më poshtë. Asgjë nuk ofrohet në lidhje me faqen, siç mund ta shihni. Është thjesht një komponent funksional standard i React.
rrugët
Për të krijuar rrugë të ndërthurura, fillimisht duhet të krijoni një nënfolder. Për shembull: faqe/artikuj. Krijoni komponentin tuaj të reagimit 'contact.js' brenda asaj dosjeje dhe ai do të gjenerojë faqen localhost/articles/contact.
Nëse vendosni një skedar në pages/articles.js dhe një tjetër në pages/articles/index.js. Të dy pasqyrojnë të njëjtën rrugë localhost/blog. Në këtë situatë, Next.js thjesht do të japë skedarin article.js. Po në lidhje me rrugët dinamike, në të cilat çdo postim në blog ka rrugën e vet:
- localhost/blog/artikull i parë
- localhost/blog/-artikull i dytë
Duke përdorur shënimin e kllapave, mund të përcaktoni një rrugë dinamike në Next.js. Për shembull: faqe/artikull/[slug].js
Lidhni rrugët
Tani keni përfunduar rrugën tuaj të parë. Mendoj se po pyesni se si t'i lidhni faqet me ato rrugë. Do t'ju duhet 'next/link' për ta bërë këtë.
Këtu është një shembull i një faqeje kryesore që përfshin një lidhje me faqen Rreth:
Nëse dëshironi të stiloni lidhjen, përdorni sintaksën e mëposhtme:
Ridrejtimi i rrugëve
Po sikur të duhet të detyrosh një ridrejtim në një faqe të caktuar? Për shembull, kur shtypet një buton? Ju mund ta arrini këtë duke përdorur 'router.push':
SEO
Faqet në aplikacionet ueb kërkojnë elementë meta (kokë) përveç të dhënave brenda trupit HTML. Kjo do të kërkojë instalimin e një kërkese shtesë të quajtur React Helmet në një aplikacion React.
Ne mund të përdorim komponentin Head nga Next/head në Next për të shtuar me lehtësi të dhëna meta në faqet tona të internetit që do të shfaqen në rezultatet e kërkimit dhe futjet:
Komponentet
Shpesh do t'ju duhet të zhvilloni komponentë ose një skedar paraqitjeje. Për shembull, një komponent që jep shiritin e navigimit. Sapo kemi përdorur dosjen e faqeve deri më tani. Po nëse komponenti juaj nuk është menduar të jetë një faqe rrugësh?
Ju nuk dëshironi që përdoruesi të lundrojë në një faqe të tillë si localhost/navbar. Nëse vendosni komponentin Navbar.js në dosjen e faqeve, kjo do të ndodhë. Çfarë duhet të bëni në këtë situatë?
Thjesht ruani të gjithë përbërësit tuaj 'jo një faqe' në një dosje të veçantë. Shumica e projekteve Next.js përdorin emërtimin 'komponentë' dhe kjo dosje krijohet në dosjen rrënjë të projektit tuaj.
Komponenti i kokës
Ngarkimi fillestar i faqes jepet nga Next.js në anën e serverit. Këtë e bën duke modifikuar HTML-në e faqes tuaj. Përfshihet pjesa e kokës.
Komponenti Next.js Head përdoret për të dhënë etiketa të seksionit të kokës si titulli dhe meta. Komponenti Head përdoret në këtë shembull të një komponenti Layout.
Krijo 404 faqe nuk u gjet
Është e mundur të krijoni faqen tuaj të gabimit 404. Ju mund të dëshironi të personalizoni mesazhin ose të shtoni dizajnin tuaj të faqes. Në dosjen e faqeve, krijoni skedarin 404.js.
Kur ndodh një gabim 404, Next.js do të ridrejtohet automatikisht në këtë faqe. Këtu është një shembull i një faqeje të personalizuar 404:
Marrja e të dhënave nga ana e serverit
Në vend të shkarkimit të të dhënave në anën e klientit, Next.js ju lejon të kryeni një popullsi fillestare të të dhënave, që nënkupton dërgimin e faqes me të dhënat e mbushura tashmë nga serveri.
Ju keni dy zgjedhje për zbatimin e marrjes së të dhënave nga ana e serverit:
- Të dhënat duhet të merren për çdo kërkesë.
- Merrni të dhëna vetëm një herë gjatë procesit të ndërtimit (vend statik)
Merr të dhëna për çdo kërkesë
Metoda getServerSideProps përdoret për të dhënë çdo kërkesë nga ana e serverit. Ky funksion mund të përfshihet në fund të skedarit të komponentit tuaj. Next.js do të plotësojë automatikisht elementët e komponentit tuaj me objektin getServerSideProps nëse ai funksion është i pranishëm në skedarin tuaj të komponentit.
Merr të dhënat në kohën e ndërtimit
Metoda getStaticProps përdoret për të dhënë në anën e serverit në kohën e ndërtimit. Ky funksion mund të përfshihet në fund të skedarit të komponentit tuaj. Kjo metodë ekzekuton kodin e serverit dhe dërgon një kërkesë GET në server, por vetëm një herë kur projekti ynë të përfundojë.
Pse duhet të mësoni Next.js?
Një nga arsyet për këtë është sepse Next.js është ndërtuar në krye të React, një paketë mjetesh zhvillimi të nivelit të përparmë për krijimi i ndërfaqeve të përdoruesit që janë zgjedhja ime e preferuar për dizajnimin e aplikacioneve në ueb.
Por nuk do të mjaftonte nëse Next.js nuk do të ishte i mirë në atë që bëri… apo jo?
Pra, çfarë bën saktësisht?
Së pari duhet të përcaktojmë disa koncepte për ta kuptuar atë. Next.js fitoi popullaritet sepse zgjidhi një problem që shumë zhvillues ueb kishin me aplikacionet e uebit nga ana e klientit (në shfletues). Këto aplikacione me një faqe (SPA) patën një përvojë më të mirë pasi nuk kishin nevojë që përdoruesi të ringarkonte faqen dhe lejonin më shumë ndërveprim.
Megjithatë, për shkak se pjesa më e madhe e materialit në një aplikacion si ky bëhet i dukshëm vetëm kur kryhet në shfletues, zvarritësit e uebit e kanë të vështirë të kuptojnë përmbajtjen e tekstit të një aplikacioni të tillë.
Si rezultat, pavarësisht nga popullariteti i tyre, shumë SPA mbetën kryesisht anonime për motorët e mëdhenj të kërkimit si Google. Next.js tani përfshin një mekanizëm të integruar më të fuqishëm për paraqitjen nga ana e serverit (SSR) të komponentëve React.
Next.js lejon zhvilluesit të ndërtojnë kodin JavaScript në server gjatë procesit të ndërtimit dhe t'i ofrojnë përdoruesit HTML bazë dhe të indeksueshme.
rekuizitë
- E shkëlqyeshme për përvojën e përdoruesit
- E shkëlqyeshme për SEO
- Ndërtoni një uebsajt statik super të shpejtë që sillet si një dinamikë
- Fleksibilitet në ndërtimin e UI & UX.
- Shumë përparësi zhvillimi
- Mbështetje e madhe e komunitetit
Cons
- Faqet e internetit ose aplikacionet kanë një kohë të caktuar për të ndërtuar ose zhvilluar.
- Për detyra të caktuara, Next.js është i pamjaftueshëm. Zhvilluesit duhet të jenë në gjendje të ndërtojnë rrugë dinamike duke përdorur mjetet Node.js.
Përfundim
Siç mund ta shihni, Next.js thjeshton zhvillimin e aplikacionit React dhe ju lejon të përqendroheni në atë që ka më shumë rëndësi – logjikën dhe ndërfaqen e përdoruesit të aplikacionit tuaj. Ai përfshin gjithçka që nevojitet për të krijuar aplikacione bashkëkohore, të pasura me frontend dhe me API.
Është gjithashtu i përshtatshëm për projekte vetëm me përmbajtje, të tilla si bloget dhe faqet e internetit të biznesit, për shkak të aftësisë së tij për të ndërtuar faqe statike HTML.
Me botimet aktuale, Next.js jo vetëm që ruan një nivel të lartë të përvojës së zhvilluesit, por gjithashtu jep mjete për rritjen e performancës vizuale dhe përvojës së përdoruesit, duke siguruar një të ardhme të ndritshme për këtë kornizë.
Lini një Përgjigju