Néhány alapvető React és JavaScript ismerettel útra kelhet
A Next.js egy Zeit által létrehozott JavaScript-keretrendszer. Ez lehetővé teszi a szerveroldali renderelés és statikus webalkalmazások készítését a React használatával. Remek eszköz a következő weboldal elkészítéséhez. Számos nagyszerű tulajdonsággal és előnnyel rendelkezik, amelyek a Nextjs-t az első lehetőségévé tehetik a következő webalkalmazás felépítéséhez.
A Next.js használatának megkezdéséhez nincs szüksége semmilyen webpack vagy hasonló konfigurációra. A konfigurációval érkezik. Csak arra van szükség, hogy futtassa npm run devés elkezdje építeni az alkalmazását?
Ebben a cikkben a Next.js nagyszerű tulajdonságait és trükkjeit fogjuk megvizsgálni, és hogyan kezdhetjük el vele a következő webhely építését.
Ez a bejegyzés feltételezi, hogy van néhány alapvető ismerete a React és a JavaScript használatáról.
Íme néhány remek webhely, amelyet a Next.js segítségével készítettünk:
- Syntaxt.fm
- npmjs
- anyag-ui.io
- expo.io
- codemenitor.io
Még a Nextjs-t is felhasználtam a saidhayani.me személyes weboldalam felépítéséhez - a forráskódot itt kaphatja meg a GitHubon.
A Next.js használatának megkezdése
A Next.js használatához a node.js telepítésével kell rendelkeznie a gépén, és ez minden. A Next.js olyan, mint bármely más node.js alkalmazás - npm vagy Yarn szükséges a függőségek telepítéséhez.
Kezdjük és hozzunk létre egy Next.js projektet.
Először létre kell hoznunk egy mappát, és meg kell adnunk neki egy választott nevet. Meg fogom nevezni nextjs-app.
Könnyen megteheti ezt a parancssort:
mkdir nextjs-appA nextjs-app mappa létrehozása után nyissa meg a terminálon. Futtassa npm init a package.json fájl létrehozásához .
Ezután telepítenünk kell a függőségeinket.
A Next.js telepítése
- a Fonal használatával írja be
yarn add next- az npm használatával írja be:
npm i next --saveEzután telepítenünk kell a React-et, mert a Next.js a React-et használja. Az alábbi első sor fonalat használ a telepítéshez.
yarn add react react-dom// with npmnpm i react react-dom --saveEzt követően két szükséges mappát kell létrehoznia: pagesés static. A Next.js nélkülük nem fog működni !!
mkdir pages staticA parancsok futtatása után rendelkeznie kell ezzel a struktúrával:
nextjs-app -pages -static -package.jsonEzután egyszerűen futtathatja npm next dev, majd megnyithatja //localhost:3000/ a böngészőben.
Az NotFoundoldal megjelenik, mert még nincs oldalunk!
Készítsünk hát egy homeoldalt és egy belépési pontot index.js.
touch index.js home.jsÉs akkor írhat egy normál React komponenst. Mint fentebb mondtam, a Next.js a React alkalmazások felépítésére szolgál.
Így home.jsnéz ki:
És itt van a index.jsfájlunk:
A Next.js rendelkezik egy élő újratöltési funkcióval. Mindössze annyit kell tennie, hogy csak változtat és ment, és a Next.js automatikusan lefordítja és újratölti az alkalmazást.
Megjegyzés : A Next.js olyan, mint bármely más kiszolgálóoldali renderelő eszköz, meg kell határoznunk alkalmazásunk alapértelmezett oldalát, esetünkben az index.js.
A futtatás után ezt a változást látja a böngészőben npm next dev:
Gratulálunk! Most hoztunk létre egy Next.js alkalmazást néhány egyszerű lépéssel. A Next.js alkalmazás létrehozására vonatkozó utasításokat a Next.js hivatalos dokumentumai ismertetik.
Az én alternatívám
Általában nem ezt használom. Ehelyett a create-next-app parancssori felületet használom, amely mindezeket a dolgokat egyetlen sorban teszi meg helyettem.
npx create-next-app my-app
Itt tekintheti meg a dokumentációt, hogy további funkciókat fedezhessen fel.
Hozzon létre egyéni konfigurációkat a Next.js fájlhoz
Néha érdemes további függőségeket vagy csomagokat hozzáadni a Next.js alkalmazáshoz.
A Next.js lehetőséget ad a konfiguráció testreszabására egy next-config.jsfájl segítségével.
Például érdemes hozzáadni az alkalmazásához a sass támogatást. Ebben az esetben a next-sass csomagot kell használnia, és hozzá kell adnia a next-config.jsfájlhoz az alábbi példa szerint:
Először telepítse next-sass:
yarn add @zeit/next-sassEzután tegye bele a next-config.jsfájlba:
Ezután létrehozhatja a sass kód beírását és importálását az összetevőjébe:
A sass fájl importálása a komponensünkbe:
És itt van az eredmény:
Hú, nem volt olyan egyszerű hozzáadni a sass támogatást a Next.js alkalmazáshoz?
Ezen a ponton csak a telepítéssel és a konfigurációval foglalkoztunk. Most beszéljünk a Next.js szolgáltatásairól!
A jellemzői
A Next.js egy csomó nagyszerű funkcióval rendelkezik, mint például a szerveroldali megjelenítés, az útválasztók és a lusta betöltés.
Szerveroldali megjelenítés
A Next.js alapértelmezés szerint szerveroldali renderelést hajt végre. Ez optimalizálja alkalmazását a keresőmotorok számára. Ezenkívül integrálhat bármilyen köztes szoftvert, például express.js vagy Hapi.js, és futtathat bármilyen adatbázist, például MongoDB vagy MySQL.
Ha a keresőmotor optimalizálásáról beszélünk, a Next.js egy olyan Headösszetevőt tartalmaz, amely lehetővé teszi dinamikus metacímkék hozzáadását és készítését. Ez a kedvenc funkcióm - egyedi és dinamikus metacímkéket készíthet. Ezek lehetővé teszik webhelye indexelését olyan keresőmotoroknál, mint a Google. Itt van egy példa egy Headkomponensre:
Az Headösszetevőt bármely más oldalon importálhatja és használhatja :
Fantasztikus!
Megjegyzés : A Next.js használatával nem kell importálnia a React szoftvert, mert a Next.js ezt Ön helyett teszi.
Statikus webhely létrehozása a Next.js segítségével
A kiszolgálóoldali megjelenítés mellett továbbra is lefordíthatja és exportálhatja az alkalmazását HTML statikus webhelyként, és egy olyan statikus webhelyen telepítheti, mint egy GitHub oldal vagy netlify. Itt többet megtudhat arról, hogyan készíthet statikus weboldalt a Next.js segítségével a hivatalos dokumentumokból.
Routerek
Ez a Next.js másik nagyszerű tulajdonsága. A create-react-app használatakor általában telepítenie kell a react-routert és létre kell hoznia az egyéni konfigurációt.
A Next.js saját routerekkel rendelkezik, nulla konfigurációval. Nem kell külön útválasztó konfiguráció. Csak hozza létre az oldalát a pagesmappában, és a Next.js gondoskodik az összes útválasztási konfigurációról.
Menjünk előre, és hozzunk létre egy egyedi navigációt, hogy minden világos legyen!
Az oldalak közötti navigáláshoz a Next.js rendelkezik Linka navigáció kezelésének módszerével.
Hozzunk létre blog.jsés contact.jslapozzunk:
blog.js
És itt van az contact.jsoldal:
És most tudnunk kell navigálni ezek között az oldalak között?
Hú, ez olyan egyszerű és nagyon fantasztikus.
Lusta rakodás
A lusta betöltés révén az alkalmazás jobb felhasználói élményt nyújt. Néha időbe telhet az oldal betöltése. A felhasználó elhagyhatja az alkalmazását, ha a betöltés 30 másodpercnél tovább tart.
Ennek elkerülése az, hogy valamilyen trükkel jelezzük a felhasználónak, hogy az oldal betöltődik, például egy tárcsa megjelenítésével. A lusta betöltés vagy a kódfelosztás az egyik olyan funkció, amely lehetővé teszi a lassú betöltés kezelését és ellenőrzését, így csak a szükséges kódot tölti be az oldalára.
A Next.js saját kódfelosztási módszerrel érkezik. Ez az úgynevezett módszert biztosítja számunkra dynamicaz összetevő betöltésére, az alábbi példához hasonlóan:
Ezeknek a példáknak a forráskódját a GitHubon találja meg
Ez minden. Remélem, hogy ez elég, és remélem, hogy ez a cikk világos képet ad a Next.js-ről és annak jellemzőiről. A hivatalos dokumentumok egyéb funkcióiról többet tudhat meg.
Ha van további kiegészítésed ehhez a bejegyzéshez, akkor írhatsz megjegyzést az alábbiakban, és ha tetszik ez a bejegyzés, akkor kattints a tapsra? és ossza meg.
Megbeszélés a Twitteren ?.
Egyébként nemrégiben egy erős szoftvermérnöki csoporttal dolgoztam az egyik mobilalkalmazásomhoz. A szervezés nagyszerű volt, és a terméket nagyon gyorsan, sokkal gyorsabban szállították, mint más cégek és szabadúszók, akikkel dolgoztam, és azt hiszem, őszintén tudom ajánlani őket más ottani projektekhez. Lőj nekem egy e-mailt, ha kapcsolatba szeretnél lépni - [email protected].