Tartalomjegyzék[Elrejt][Előadás]
A szoftverkönyvtár vagy keretrendszer kiválasztásakor általában a fejlesztői tapasztalatot veszik figyelembe.
Amikor a „fejlesztői tapasztalatot” említem, arra utalok, hogy a fejlesztők valójában hogyan végzik a munkát. A fejlesztők olyan könyvtárakat vagy keretrendszereket választanak, amelyek használata élvezetes.
Ez az egyik elsődleges oka annak, hogy most a legnépszerűbb könyvtáraink és keretrendszereink vannak. Fejlesztőként nem kell a nulláról kezdenünk, ha léteznek olyan eszközök, amelyek segítik feladatainkat.
A keretrendszerek olyan szoftverek, amelyeket a fejlesztők hoznak létre és használnak alkalmazások létrehozására, és ezek közé tartozik a NextJS.
Ebben a bejegyzésben áttekintjük a Nextjs-t, annak főbb funkcióit, és azt, hogyan használhatjuk fel egy alkalmazás létrehozásához. Egyből ugorjunk be.
Mi az a Next.js?
Next.js egy JavaScript keretrendszer statikus weboldalak és React alapú online alkalmazások gyors és egyszerű létrehozásához. Lehetővé teszi nagyszerű webalkalmazások tervezését számos platformra, beleértve a Windows, Linux és Mac rendszereket.
Ismernie kell a Next.js keretrendszert, ha minimálisan ismeri a reactot, és többet szeretne megtudni a react ökoszisztémáról.
Annak ellenére, hogy a Next.js mindent tartalmaz, amire szüksége van az induláshoz, választhat az NPM és a Yarn, a JavaScript és a TypeScript, a CSS és az SCSS, a statikus export és a kiszolgáló nélküli telepítés között.
Jellemzők
- Az útválasztás automatikusan megtörténik – Semmit sem kell konfigurálnia, mert minden URL a fájlrendszerhez, az oldalak mappájában lévő fájlokhoz van hozzárendelve (természetesen vannak testreszabási lehetőségek).
- Egyetlen fájl összetevői – Egyszerűen hozzáadhat stílusokat az összetevőhöz a styled-jsx használatával, amelyet teljesen integrált és ugyanaz a csapat készít.
- Gyorskód újratöltése – Amikor a Next.js lemezre mentett módosítást észlel, újratölti az oldalt.
- Dinamikus komponensek – Dinamikusan betöltheti a JavaScript modulokat és a React komponenseket.
- Statikus exportálás – A Next.js lehetővé teszi egy teljesen statikus webhely exportálását az alkalmazásból a következő exportparanccsal.
- Kompatibilitás a környezettel – A Next.js zökkenőmentesen integrálódik a JavaScript, a Node és a React ökoszisztémákkal.
- Kódok automatikus felosztása – Csak a szükséges könyvtárakat és JavaScriptet használják az oldalak megjelenítéséhez. Ahelyett, hogy egyetlen JavaScript-fájlt hozna létre, amely az alkalmazás teljes kódját tartalmazza, a Next.js intelligensen több erőforrásra osztja fel az alkalmazást.
Hogyan lehet next.js alkalmazást létrehozni?
Telepítés
A node npx paranccsal telepíthet és építhet Next.js projektet.
Ez létrehoz egy mappát, valamint a Next.js projekt futtatásához szükséges összes fájlt, konfigurációt és egyéb elemet.
Az alkalmazást a generálás után elindíthatja.
Oldalak és útválasztás
Az útvonalak Next.js használatával történő kezeléséhez nem kell útválasztási keretrendszert alkalmaznunk. Az útválasztás a Next.js segítségével gyerekjáték a beállítás. Amikor a create-next-app paranccsal új Next.js alkalmazást készít, az alkalmazás alapértelmezés szerint létrehoz egy "oldalak" nevű mappát.
Ebben az „oldalak” mappában karbantarthatja útvonalait. Ennek eredményeként az alkönyvtárban lévő minden reagáló komponens fájl külön útvonalként lesz kezelve.
Például, ha a mappa ezeket a fájlokat tartalmazza:
- index.js
- about.js
- aricles.js
Ez a fájl automatikusan háromféleképpen lesz átalakítva:
- Az index oldal localhost/index
- A névjegy oldal localhost/about
- A blogoldal localhost/articles
Példa egy about.js oldalra lent látható. Az oldalról semmit nem közölnek, amint láthatja. Ez egyszerűen egy szabványos React funkcionális komponens.
útvonalak
Beágyazott útvonalak létrehozásához először létre kell hoznia egy almappát. Például: oldalak/cikkek. Hozza létre a "contact.js" reakciókomponenst ebben a mappában, és ez létrehozza a localhost/articles/contact oldalt.
Ha az egyik fájlt a pages/articles.js-ba, a másikat pedig a pages/articles/index.js-ba helyezi. Mindkettő ugyanazt az útvonalat tükrözi, a localhost/blog. Ebben a helyzetben a Next.js csak az article.js fájlt jeleníti meg. Mi a helyzet a dinamikus útvonalakkal, amelyekben minden blogbejegyzésnek megvan a maga útvonala:
- localhost/blog/first-article
- localhost/blog/-second-article
A zárójelek használatával dinamikus útvonalat határozhat meg a Next.js-ben. Például: pages/article/[slug].js
Útvonalak összekapcsolása
Ezzel befejezte az első útvonalat. Gondolom, azt kérdezed, hogyan lehet oldalakat összekapcsolni ezekkel az útvonalakkal. Ehhez szüksége lesz a következőre/linkre.
Íme egy példa egy kezdőlapra, amely a Névjegy oldalra mutató hivatkozást tartalmaz:
Ha stílust szeretne adni a hivatkozásnak, használja a következő szintaxist:
Útvonalak átirányítása
Mi a teendő, ha egy adott oldalra kell átirányítást kényszerítenie? Például amikor megnyomnak egy gombot? Ezt a 'router.push' használatával érheti el:
SEO
A webalkalmazásokban lévő oldalakhoz a HTML törzsben található adatokon kívül meta (head) elemek is szükségesek. Ez szükségessé teszi egy React Helmet nevű extra követelmény telepítését egy React alkalmazásban.
Használhatjuk a Head összetevőt a következőtől/head in Next-től, hogy könnyen hozzáadhassunk metaadatokat weboldalainkhoz, amelyek megjelennek a keresési eredményekben és beágyazva:
alkatrészek
Gyakran kell komponenseket vagy elrendezési fájlt fejlesztenie. Például egy összetevő, amely a navigációs sávot jeleníti meg. Eddig csak az oldalak mappáját használtuk. Mi van akkor, ha az összetevője nem útvonaloldal legyen?
Nem szeretné, hogy a felhasználó olyan oldalra navigáljon, mint például egy localhost/navbar. Ha a Navbar.js összetevőt az oldalak mappába helyezi, akkor ez fog történni. Mit kell tennie ebben a helyzetben?
Egyszerűen tárolja az összes „nem oldal” összetevőt egy külön mappában. A legtöbb Next.js projekt az „összetevők” becenevet használja, és ez a mappa a projekt gyökérmappájában jön létre.
Fej alkatrész
A kezdeti oldalbetöltést a Next.js adja le a szerver oldalon. Ezt az oldal HTML-kódjának módosításával teszi. A fejléc részt is tartalmazza.
A Next.js Head komponens fejlécrész-címkék, például cím és meta megadására szolgál. A Fej összetevő ebben a példában az elrendezési összetevőre használatos.
A 404-es létrehozási oldal nem található
Megvalósítható saját 404-es hibaoldal létrehozása. Lehet, hogy személyre szabhatja az üzenetet, vagy hozzáadhatja saját oldaltervét. Az oldalak mappában hozza létre a 404.js fájlt.
Ha 404-es hiba lép fel, a Next.js automatikusan átirányít erre az oldalra. Íme egy példa egy személyre szabott 404-es oldalra:
Adatlekérés szerveroldalról
Az adatok kliensoldali letöltése helyett a Next.js lehetővé teszi a kezdeti adatpopuláció lebonyolítását, ami azt jelenti, hogy az oldalt a szerverről már feltöltött adatokkal kell elküldeni.
Két lehetőség közül választhat a szerveroldali adatlehívás megvalósításához:
- Az adatokat minden kérésnél le kell kérni.
- Az építési folyamat során csak egyszer kaphat adatokat (statikus helyszín)
Adatok lekérése minden kérésnél
A getServerSideProps metódus az egyes kérések szerveroldali megjelenítésére szolgál. Ez a funkció az összetevő fájl végén szerepelhet. A Next.js automatikusan feltölti a komponens kellékeit a getServerSideProps objektummal, ha ez a funkció megtalálható az összetevőfájlban.
Adatok lekérése összeállításkor
A getStaticProps metódus a kiszolgálóoldali megjelenítésre szolgál az összeállítási időben. Ez a funkció az összetevő fájl végén szerepelhet. Ez a metódus futtatja a kiszolgáló kódját, és GET kérést küld a szervernek, de csak egyszer, amikor a projektünk befejeződött.
Miért érdemes megtanulni a Next.js-t?
Ennek egyik oka az, hogy a Next.js a React, egy előtér-fejlesztési eszközkészletre épül felhasználói felületek létrehozása ezek a kedvenc választásom webalkalmazások tervezéséhez.
De nem lenne elég, ha a Next.js nem lenne jó abban, amit csinál… igaz?
Szóval, mit csinál pontosan?
Először is meg kell határoznunk néhány fogalmat, hogy megértsük. A Next.js azért vált népszerűvé, mert megoldotta azt a problémát, amellyel sok webfejlesztő szembesült az ügyféloldali webalkalmazásokkal (a böngészőben). Ezek az egyoldalas alkalmazások (SPA-k) jobb élményt nyújtottak, mivel nem volt szükségük a felhasználónak az oldal újratöltésére, és több interaktivitást tettek lehetővé.
Mivel azonban az ilyen alkalmazásokban található anyagok nagy része csak akkor válik láthatóvá, ha azt a böngészőben hajtják végre, a webrobotok nehezen értik meg az ilyen alkalmazások szöveges tartalmát.
Ennek eredményeként a népszerűségük ellenére sok fürdőhely nagyrészt névtelen maradt a nagy keresőmotorok, például a Google számára. A Next.js most egy robusztusabb beépített mechanizmust tartalmaz a React összetevők szerveroldali rendereléséhez (SSR).
A Next.js lehetővé teszi a fejlesztők számára, hogy JavaScript-kódot hozzanak létre a szerveren az építési folyamat során, és alapvető, indexelhető HTML-kódot biztosítsanak a felhasználónak.
Érvek
- Nagyszerű a felhasználói élményhez
- Kiváló SEO-hoz
- Készítsen szupergyors statikus webhelyet, amely dinamikusan viselkedik
- Rugalmasság az UI és UX felépítésében.
- Számos fejlesztési előny
- Nagyszerű közösségi támogatás
Hátrányok
- A webhelyeknek vagy alkalmazásoknak van egy bizonyos ideje a létrehozásra vagy fejlesztésre.
- Bizonyos feladatokhoz a Next.js nem megfelelő. A fejlesztőknek képesnek kell lenniük dinamikus útvonalak létrehozására a Node.js eszközök használatával.
Következtetés
Amint láthatja, a Next.js leegyszerűsíti a React alkalmazásfejlesztést, és lehetővé teszi, hogy a legfontosabbra összpontosítson – az alkalmazás logikájára és a felhasználói felületére. Mindent tartalmaz, ami a kortárs, előtérben gazdag és API-alapú alkalmazások létrehozásához szükséges.
Csak tartalmi projektekhez, például blogokhoz és üzleti webhelyekhez is megfelelő, mivel képes statikus HTML-oldalakat építeni.
A jelenlegi kiadásokkal a Next.js nemcsak a fejlesztői élmény magas szintjét tartja fenn, hanem eszközöket is ad a vizuális teljesítmény és a felhasználói élmény növeléséhez, fényes jövőt biztosítva ennek a keretrendszernek.
Hagy egy Válaszol