Inhoudsopgave[Zich verstoppen][Laten zien]
Bij het kiezen van een softwarebibliotheek of -framework wordt meestal rekening gehouden met de ervaring van de ontwikkelaar.
Als ik 'ontwikkelaarservaring' noem, bedoel ik hoe ontwikkelaars het werk daadwerkelijk doen. Ontwikkelaars kiezen bibliotheken of frameworks die leuk zijn om te gebruiken.
Dit is een van de belangrijkste redenen waarom we nu de meest populaire bibliotheken en frameworks hebben. Als ontwikkelaars hoeven we niet vanaf nul te beginnen als er bestaande tools zijn gemaakt om ons bij onze taken te helpen.
Frameworks zijn stukjes software die door ontwikkelaars zijn gemaakt en gebruikt om applicaties te bouwen, en NextJS is daar een van.
In dit bericht gaan we in op Nextjs, de belangrijkste functies en hoe we het kunnen gebruiken om een applicatie te bouwen. Laten we er meteen in springen.
Wat is Next.js?
Next.js is een JavaScript-framework voor het snel en eenvoudig bouwen van statische webpagina's en op React gebaseerde online applicaties. Hiermee kunt u geweldige webapps ontwerpen voor verschillende platforms, waaronder Windows, Linux en Mac.
U moet bekend zijn met het Next.js-framework als u minimaal bekend bent met react en meer wilt weten over het react-ecosysteem.
Hoewel Next.js wordt geleverd met alles wat je nodig hebt om aan de slag te gaan, kun je kiezen tussen NPM en Yarn, JavaScript en TypeScript, CSS en SCSS, statische export en serverloze implementatie.
Voordelen
- Routering gebeurt automatisch – U hoeft niets te configureren omdat elke URL wordt toegewezen aan het bestandssysteem, aan bestanden in de pagina's-map (u hebt natuurlijk aanpassingsopties).
- Componenten van een enkel bestand – Het is eenvoudig om stijlen toe te voegen aan de component met behulp van styled-jsx, dat volledig is geïntegreerd en geproduceerd door hetzelfde team.
- Een hotcode opnieuw laden – Wanneer Next.js een wijziging detecteert die op schijf is opgeslagen, wordt de pagina opnieuw geladen.
- Dynamische componenten - U kunt JavaScript-modules en React-componenten dynamisch laden.
- Statische exports – Met Next.js kunt u een volledig statische site vanuit uw app exporteren met de volgende exportopdracht.
- Compatibiliteit met de omgeving – Next.js integreert naadloos met de JavaScript-, Node- en React-ecosystemen.
- Codes automatisch splitsen – Alleen de bibliotheken en JavaScript die nodig zijn, worden gebruikt om pagina's weer te geven. In plaats van een enkel JavaScript-bestand te maken dat alle code van de app bevat, verdeelt Next.js de app op intelligente wijze in veel bronnen.
Hoe maak je een next.js-applicatie?
Installatie
U kunt de node npx-opdracht gebruiken om een Next.js-project te installeren en te bouwen.
Dit genereert een map en alle bestanden, configuraties en andere items die nodig zijn om een Next.js-project uit te voeren.
U kunt de app starten zodra deze is gegenereerd.
Pagina's en routering
Om routes met Next.js af te handelen, hoeven we geen routeringsframework te gebruiken. Routing met Next.js is een fluitje van een cent om in te stellen. Wanneer u de opdracht create-next-app gebruikt om een nieuwe Next.js-app te bouwen, maakt de app standaard een map met de naam 'pages'.
In deze map 'pages' onderhoud je je routes. Als gevolg hiervan wordt elk bestand met reactcomponenten in de subdirectory als een afzonderlijke route behandeld.
Als de map bijvoorbeeld die bestanden bevat:
- index.js
- over.js
- artikelen.js
Dit bestand wordt op drie manieren automatisch getransformeerd:
- De indexpagina localhost/index
- De about-pagina localhost/about
- De blogpagina localhost/articles
Hieronder ziet u een voorbeeld van een about.js-pagina. Er wordt niets over de pagina verstrekt, zoals u kunt zien. Het is gewoon een standaard functionele component van React.
routes
Om geneste routes te maken, moet u eerst een submap aanmaken. Bijvoorbeeld: pagina's/artikelen. Maak uw reactiecomponent 'contact.js' in die map en deze genereert de pagina localhost/articles/contact.
Als je een bestand in pages/articles.js plaatst en een ander in pages/articles/index.js. Beide weerspiegelen hetzelfde pad localhost/blog. In deze situatie geeft Next.js alleen het bestand article.js weer. Hoe zit het met dynamische routes, waarin elke blogpost zijn eigen pad heeft:
- localhost/blog/eerste artikel
- localhost/blog/-tweede-artikel
Met behulp van de haakjesnotatie kunt u een dynamische route definiëren in Next.js. Bijvoorbeeld: pagina's/artikel/[slug].js
Routes koppelen
Je hebt nu je eerste route voltooid. Ik vermoed dat je vraagt hoe je pagina's aan die routes kunt koppelen. Je hebt hiervoor 'next/link' nodig.
Hier is een voorbeeld van een startpagina met een link naar de pagina Over:
Gebruik de volgende syntaxis als u de link wilt opmaken:
Routes omleiden
Wat als u een omleiding naar een bepaalde pagina moet forceren? Bijvoorbeeld wanneer er op een knop wordt gedrukt? U kunt dit bereiken door 'router.push' te gebruiken:
SEO
Pagina's in webapplicaties hebben naast gegevens in de HTML-body ook meta-elementen (head) nodig. Dit vereist de installatie van een extra vereiste met de naam React-helm in een React-toepassing.
We kunnen de Head-component van next/head in Next gebruiken om eenvoudig metadata aan onze webpagina's toe te voegen die worden weergegeven in zoekresultaten en insluitingen:
COMPONENTEN
U zult regelmatig componenten of een lay-outbestand moeten ontwikkelen. Bijvoorbeeld een component die de navigatiebalk weergeeft. We hebben tot nu toe alleen de map Pages gebruikt. Wat als je component niet bedoeld is als routepagina?
U wilt niet dat de gebruiker naar een pagina zoals een localhost/navbar navigeert. Als u de component Navbar.js in de map Pages plaatst, gebeurt dat. Wat moet je doen in de situatie?
Bewaar eenvoudig al uw 'not a page'-componenten in een aparte map. De meeste Next.js-projecten gebruiken de bijnaam 'componenten' en deze map wordt gegenereerd in de hoofdmap van uw project.
Hoofdcomponent
Het laden van de eerste pagina wordt weergegeven door Next.js aan de serverzijde. Het doet dit door de HTML van uw pagina aan te passen. Het kopgedeelte is inbegrepen.
De Next.js Head-component wordt gebruikt om koptekstsectie-tags te geven, zoals titel en meta. De component Kop wordt gebruikt in dit voorbeeld van een component Lay-out.
Maak 404-pagina niet gevonden
Het is mogelijk om uw eigen 404-foutpagina te maken. Misschien wilt u het bericht aanpassen of uw eigen paginaontwerp toevoegen. Maak in de map Pages het bestand 404.js aan.
Wanneer een 404-fout optreedt, zal Next.js automatisch doorverwijzen naar deze pagina. Hier is een voorbeeld van een gepersonaliseerde 404-pagina:
Gegevens ophalen van serverzijde
In plaats van gegevens aan de clientzijde te downloaden, kunt u met Next.js een eerste gegevenspopulatie uitvoeren, wat inhoudt dat u de pagina verzendt met de gegevens die al vanaf de server zijn ingevuld.
U hebt twee keuzes voor het implementeren van het ophalen van gegevens aan de serverzijde:
- Bij elk verzoek moeten gegevens worden opgehaald.
- Krijg slechts één keer gegevens tijdens het bouwproces (statische site)
Gegevens ophalen bij elk verzoek
De methode getServerSideProps wordt gebruikt om elk verzoek aan de serverzijde weer te geven. Deze functie kan aan het einde van uw componentbestand worden opgenomen. Next.js vult automatisch uw componentprops met het getServerSideProps-object als die functie aanwezig is in uw componentbestand.
Gegevens ophalen tijdens het bouwen
De methode getStaticProps wordt gebruikt om server-side te renderen tijdens het bouwen. Deze functie kan aan het einde van uw componentbestand worden opgenomen. Deze methode voert de servercode uit en stuurt een GET-verzoek naar de server, maar slechts één keer wanneer ons project is voltooid.
Waarom u Next.js zou moeten leren?
Een van de redenen hiervoor is dat Next.js bovenop React is gebouwd, een toolkit voor front-endontwikkeling voor gebruikersinterfaces maken dat is mijn favoriete keuze voor het ontwerpen van webapps.
Maar het zou niet genoeg zijn als Next.js niet goed was in wat het deed... toch?
Dus, wat doet het precies?
We moeten eerst een paar concepten definiëren om het te begrijpen. Next.js werd populair omdat het een probleem oploste dat veel webontwikkelaars hadden met client-side web-apps (in de browser). Deze Single-Page Applications (SPA's) hadden een betere ervaring omdat ze de gebruiker niet nodig hadden om de pagina opnieuw te laden en meer interactiviteit mogelijk maakten.
Omdat het grootste deel van het materiaal in een app als deze echter alleen zichtbaar wordt wanneer het in de browser wordt uitgevoerd, hebben webcrawlers moeite om de tekstinhoud van een dergelijke app te begrijpen.
Als gevolg hiervan bleven veel SPA's, ondanks hun populariteit, grotendeels anoniem voor grote zoekmachines zoals Google. Next.js bevat nu een robuuster ingebouwd mechanisme voor server-side rendering (SSR) van React-componenten.
Met Next.js kunnen ontwikkelaars tijdens het bouwproces JavaScript-code op de server bouwen en eenvoudige, indexeerbare HTML aan de gebruiker leveren.
VOORDELEN
- Geweldig voor gebruikerservaring
- Geweldig voor SEO
- Bouw een supersnelle statische website die zich gedraagt als een dynamiek
- Flexibiliteit bij het bouwen van UI & UX.
- Veel ontwikkelingsvoordelen
- Geweldige ondersteuning van de gemeenschap
NADELEN
- Websites of applicaties hebben een bepaalde hoeveelheid tijd om te bouwen of te ontwikkelen.
- Voor bepaalde taken is Next.js ontoereikend. Ontwikkelaars zouden dynamische routes moeten kunnen bouwen met behulp van Node.js-tools.
Conclusie
Zoals u kunt zien, vereenvoudigt Next.js de ontwikkeling van React-apps en kunt u zich concentreren op wat het belangrijkst is: uw app-logica en gebruikersinterface. Het bevat alles wat nodig is om eigentijdse, frontend-rijke en API-aangedreven apps te maken.
Het is ook geschikt voor projecten met alleen inhoud, zoals blogs en zakelijke websites, vanwege de mogelijkheid om statische HTML-pagina's te maken.
Met de huidige edities handhaaft Next.js niet alleen een hoog niveau van ontwikkelaarservaring, maar biedt het ook tools voor het verbeteren van visuele prestaties en gebruikerservaring, waardoor dit framework een mooie toekomst tegemoet gaat.
Laat een reactie achter