Inhaltsverzeechnes[Verstoppen][Show]
Wann Dir eng Softwarebibliothéik oder Kader wielt, gëtt d'Entwécklererfahrung normalerweis berücksichtegt.
Wann ech "Entwécklererfahrung" ernimmen, schwätze ech op wéi d'Entwéckler d'Aarbecht maachen. Entwéckler wielen Bibliothéiken oder Kaderen déi agreabel sinn ze benotzen.
Dëst ass ee vun de primäre Grënn firwat mir elo déi populärste Bibliothéiken a Kaderen hunn. Als Entwéckler musse mir net vun Null unzefänken wann existéierend Tools erstallt gi fir eis mat eisen Aufgaben ze hëllefen.
Frameworks si Stécker vu Software déi vun Entwéckler erstallt a benotzt gi fir Uwendungen ze konstruéieren, an NextJS ass ee vun hinnen.
An dësem Post wäerte mir iwwer Nextjs goen, seng Schlësselfeatures, a wéi mir et kënne benotze fir eng Applikatioun ze bauen. Loosst eis direkt eran sprangen.
Wat ass Next.js?
Next.js ass e JavaScript Kader fir séier an einfach statesch Websäiten a React-baséiert Online Uwendungen ze bauen. Et erlaabt Iech super Web Apps fir eng Vielfalt vu Plattformen ze designen, dorënner Windows, Linux a Mac.
Dir sollt mam Next.js Kader vertraut sinn, wann Dir minimal Bekanntschaft mat React hutt a méi iwwer de React-Ökosystem léiere wëllt.
Och wann Next.js mat alles kënnt wat Dir braucht fir unzefänken, kënnt Dir wielen tëscht NPM a Yarn, JavaScript an TypeScript, CSS an SCSS, statesch Export, a Serverlos Deployment.
Eegeschaften
- Routing gëtt automatesch gemaach - Dir braucht näischt ze konfiguréieren well all URL op de Dateiesystem mapéiert ass, op Dateien am Säiten Ordner (Dir hutt natierlech Personnalisatiounsoptiounen).
- Komponente vun enger eenzeger Datei - Et ass einfach Stiler ze addéieren, déi op d'Komponente scoped sinn mat styled-jsx, déi total integréiert a vum selwechte Team produzéiert gëtt.
- Reloading a Hot Code - Wann Next.js eng Ännerung op Disk gespäichert erkennt, lued d'Säit nei.
- Dynamesch Komponenten - Dir kënnt JavaScript Moduler dynamesch lueden a Reaktiounskomponenten.
- Statesch Exporter - Next.js erlaabt Iech e komplett statesche Site vun Ärer App mat dem nächsten Exportkommando ze exportéieren.
- Kompatibilitéit mat der Ëmwelt - Next.js integréiert nahtlos mat de JavaScript, Node a React Ökosystemer.
- Coden automatesch opzedeelen - Nëmmen d'Bibliothéiken a JavaScript déi erfuerderlech sinn, gi benotzt fir Säiten ze maachen. Amplaz eng eenzeg JavaScript-Datei ze kreéieren déi all de Code vun der App enthält, deelt Next.js d'App intelligent a vill Ressourcen.
Wéi erstellen ech eng next.js Applikatioun?
Installatioun
Dir kënnt den Node npx Kommando benotzen fir e Next.js Projet z'installéieren an ze bauen.
Dëst generéiert en Dossier an all d'Dateien, Konfiguratiounen an aner Elementer déi néideg sinn fir e Next.js Projet ze lafen.
Dir kënnt d'App starten nodeems se generéiert gouf.
Säiten & Routing
Fir Strecken mat Next.js ze handhaben, brauche mir kee Routing-Framework ze benotzen. Routing mat Next.js ass eng Loft fir opzestellen. Wann Dir de Create-next-App Kommando benotzt fir eng nei Next.js App ze bauen, erstellt d'App als Standard en Dossier genannt 'Säiten'.
Dëse 'Säiten' Dossier ass wou Dir Är Strecken ënnerhält. Als Resultat gëtt all reagéiert Komponentdatei am Ënnerverzeechnes als separat Wee gehandhabt.
Zum Beispill, wann den Dossier dës Dateien enthält:
- index.js
- iwwer js
- aricles.js
Dëse Fichier gëtt automatesch op dräi Weeër transforméiert:
- D'Index Säit localhost/index
- D'Iwwer Säit localhost / iwwer
- D'Blog Säit localhost / Artikelen
E Beispill vun enger about.js Säit gëtt hei ënnen gewisen. Näischt gëtt iwwer d'Säit geliwwert, wéi Dir kënnt gesinn. Et ass einfach e Standard React funktionell Komponent.
Routes
Fir nestéiert Strecken ze maachen, musst Dir als éischt en Ënnerdopper opbauen. Zum Beispill: Säiten/Artikelen. Erstellt Är 'contact.js' Reaktiounskomponent an deem Dossier, an et generéiert d'Säit localhost/Artikelen/Kontakt.
Wann Dir eng Datei an pages/articles.js an eng aner an pages/articles/index.js. Béid reflektéieren dee selwechte Wee localhost / Blog. An dëser Situatioun wäert Next.js just d'Artikel.js Datei maachen. Wat iwwer dynamesch Strecken, an deenen all Blog Post säin eegene Wee huet:
- localhost/blog/first-article
- localhost/blog/-zweet-Artikel
Mat der Klammer Notatioun kënnt Dir eng dynamesch Streck an Next.js definéieren. Zum Beispill: pages/article/[slug].js
Link routes
Dir hutt elo Ären éischte Wee ofgeschloss. Ech denken, Dir frot wéi Dir Säiten mat deene Strecken verbënnt. Dir braucht 'next/link' fir dat ze maachen.
Hei ass e Beispill vun enger Homepage déi e Link op d'Iwwer Säit enthält:
Wann Dir de Link stiléiere wëllt, benotzt déi folgend Syntax:
Viruleedung routes
Wat wann Dir e Viruleedung op eng bestëmmte Säit forcéiere musst? Zum Beispill, wann e Knäppchen dréckt? Dir kënnt dëst erreechen andeems Dir 'router.push' benotzt:
Am Prinzip
Säiten a Webapplikatiounen erfuerderen Meta (Kapp) Elementer zousätzlech zu Daten am HTML Kierper. Dëst erfuerdert d'Installatioun vun enger extra Ufuerderung mam Numm React Helmet an enger React Applikatioun.
Mir kënnen de Head-Komponent vun Next/head an Next benotze fir einfach Metadaten op eis Websäiten ze addéieren déi an de Sichresultater an embeds ugewise ginn:
Komponente
Dir musst dacks Komponenten oder eng Layoutdatei entwéckelen. Zum Beispill, e Komponent deen d'Navbar rendert. Mir hu just de Säiten Dossier bis elo benotzt. Wat wann Äre Komponent net geduecht ass eng Route Säit ze sinn?
Dir wëllt net datt de Benotzer op eng Säit navigéiert wéi e localhost / navbar. Wann Dir den Navbar.js Komponent am Säiten Dossier Plaz, dat ass wat geschitt. Wat soll Dir an der Situatioun maachen?
Späichert einfach all Är 'net eng Säit' Komponenten an engem separaten Dossier. Déi meescht Next.js Projete benotzen den Moniker 'Komponenten', an dësen Dossier gëtt am Root-Ordner vun Ärem Projet generéiert.
Kapp Komponente
Déi initial Säitbelaaschtung gëtt vum Next.js op der Serversäit ofgeliwwert. Et mécht dëst andeems Dir den HTML vun Ärer Säit ännert. Den Header Sektioun ass abegraff.
D'Next.js Head Komponent gëtt benotzt fir Header Sektioun Tags wéi Titel a Meta ze ginn. De Head Komponent gëtt an dësem Beispill vun engem Layout Komponent benotzt.
Erstellt 404 Säit net fonnt
Et ass machbar Är eege 404 Feeler Säit ze maachen. Dir wëllt vläicht de Message personaliséieren oder Ären eegene Säitdesign derbäisetzen. Am Säiten Dossier, erstellt d'404.js Datei.
Wann e 404 Feeler geschitt, gëtt Next.js automatesch op dës Säit ëmgeleet. Hei ass e Beispill vun enger personaliséierter 404 Säit:
Daten Erhuelung vun Server-Säit
Amplaz d'Daten op der Client-Säit erofzelueden, erlaabt Next.js Iech eng initial Datepopulatioun ze maachen, wat implizéiert d'Säit ze schécken mat den Daten, déi scho vum Server populéiert sinn.
Dir hutt zwou Méiglechkeeten fir d'Server-Säit Datesetching ëmzesetzen:
- Daten sollen op all Ufro gesammelt ginn.
- Kritt nëmmen Donnéeën eemol am ganze Bauprozess (statesch Site)
Gitt Daten op all Ufro
D'getServerSideProps Method gëtt benotzt fir all Ufro op Server Säit ze maachen. Dës Funktioun kann um Enn vun Ärer Komponentdatei abegraff ginn. Next.js populéiert Är Komponentrequisiten automatesch mam getServerSideProps Objet wann dës Funktioun an Ärer Komponentdatei präsent ass.
Fëllt Donnéeën zur Bauzäit
D'getStaticProps Method gëtt benotzt fir Server-Säit zur Bauzäit ze maachen. Dës Funktioun kann um Enn vun Ärer Komponentdatei abegraff ginn. Dës Method leeft de Servercode a schéckt eng GET Ufro un de Server, awer nëmmen eemol wann eise Projet fäerdeg ass.
Firwat sollt Dir Next.js léieren?
Ee vun de Grënn dofir ass well Next.js uewen op React gebaut ass, e Front-End Entwécklung Toolkit fir Benotzer Interface schafen dat sinn meng Liiblingswahl fir Webapps ze designen.
Awer et wier net genuch wann Next.js net gutt wier wat et gemaach huet ... richteg?
Also, wat mécht et genee?
Mir mussen als éischt e puer Konzepter definéieren fir et ze verstoen. Next.js huet Popularitéit gewonnen well et e Problem geléist huet, dee vill Webentwéckler mat Client-Säit Web Apps (am Browser) haten. Dës Single-Page Applikatiounen (SPAs) haten eng besser Erfahrung well se de Benotzer net brauche fir d'Säit nei ze lueden an et erlaabt méi Interaktivitéit.
Wéi och ëmmer, well de gréissten Deel vum Material an enger App wéi dës nëmme sichtbar ass wann et am Browser gemaach gëtt, hunn Webcrawler eng schwiereg Zäit den Textinhalt vun esou enger App ze verstoen.
Als Resultat, trotz hirer Popularitéit, bloufen vill SPAs gréisstendeels anonym fir grouss Sichmotoren wéi Google. Next.js enthält elo e méi robusten agebaute Mechanismus fir Server-Säit Rendering (SSR) vu React Komponenten.
Next.js erlaabt d'Entwéckler JavaScript Code um Server während dem Bauprozess ze konstruéieren an de Benotzer Basis, indexéierbar HTML ze bidden.
Profien
- Super fir Benotzererfarung
- Super fir SEO
- Baut eng super schnell statesch Websäit déi sech wéi eng dynamesch behält
- Flexibilitéit beim Bauen UI & UX.
- Vill Entwécklung Virdeeler
- Grouss Gemeinschaft Ënnerstëtzung
scheinbar
- Websäiten oder Uwendungen hunn eng gewëssen Zäit fir ze bauen oder z'entwéckelen.
- Fir verschidden Aufgaben ass Next.js net genuch. Entwéckler sollen fäeg sinn dynamesch Strecken mat Node.js Tools ze konstruéieren.
Konklusioun
Wéi Dir gesitt, vereinfacht Next.js React App Entwécklung an erlaabt Iech ze fokusséieren op dat wat am meeschte wichteg ass - Är App Logik an UI. Et enthält alles wat néideg ass fir zäitgenëssesch, frontend-räich an API-ugedriwwen Apps ze kreéieren.
Et ass och gëeegent fir Inhalt-nëmmen Projeten, wéi Blogs a Business Websäite, wéinst senger Fäegkeet statesch HTML Säiten ze bauen.
Mat den aktuellen Editiounen hält Next.js net nëmmen en héijen Niveau vun der Entwécklererfahrung, awer gëtt och Tools fir d'Erhéijung vun der visueller Leeschtung a Benotzererfarung, fir eng hell Zukunft fir dëse Kader ze garantéieren.
Hannerlooss eng Äntwert