Innholdsfortegnelse[Gjemme seg][Forestilling]
Når du velger et programvarebibliotek eller rammeverk, tas vanligvis utvikleropplevelsen i betraktning.
Når jeg nevner «utviklererfaring», sikter jeg til hvordan utviklere faktisk gjør jobben. Utviklere velger biblioteker eller rammeverk som er morsomme å bruke.
Dette er en av hovedgrunnene til at vi nå har de mest populære bibliotekene og rammeverkene. Som utviklere trenger vi ikke starte fra bunnen av når det er opprettet eksisterende verktøy for å hjelpe oss med oppgavene våre.
Rammer er stykker programvare som lages og brukes av utviklere til å konstruere applikasjoner, og NextJS er en av dem.
I dette innlegget vil vi gå over Nextjs, dens nøkkelfunksjoner, og hvordan vi kan bruke den til å bygge en applikasjon. La oss hoppe rett inn.
Hva er Next.js?
Next.js er et JavaScript-rammeverk for raskt og enkelt å konstruere statiske nettsider og React-baserte nettapplikasjoner. Den lar deg designe flotte nettapper for en rekke plattformer, inkludert Windows, Linux og Mac.
Du bør være kjent med Next.js-rammeverket hvis du har minimal kjennskap til react og ønsker å lære mer om react-økosystemet.
Selv om Next.js kommer med alt du trenger for å komme i gang, kan du velge mellom NPM og Yarn, JavaScript og TypeScript, CSS og SCSS, statisk eksport og serverløs distribusjon.
Egenskaper
- Ruting gjøres automatisk – Du trenger ikke konfigurere noe fordi en hvilken som helst URL er tilordnet filsystemet, til filer i sider-mappen (du har selvfølgelig tilpasningsmuligheter).
- Komponenter av en enkelt fil – Det er enkelt å legge til stiler med omfang til komponenten ved å bruke styled-jsx, som er fullstendig integrert og produsert av samme team.
- Laste inn en Hot Code på nytt – Når Next.js oppdager en modifikasjon som er lagret på disken, laster den inn siden på nytt.
- Dynamiske komponenter – Du kan dynamisk laste JavaScript-moduler og React-komponenter.
- Statisk eksport – Next.js lar deg eksportere et helt statisk nettsted fra appen din med neste eksportkommando.
- Kompatibilitet med miljøet – Next.js integreres sømløst med JavaScript-, Node- og React-økosystemene.
- Splitte koder automatisk – Bare bibliotekene og JavaScript som kreves, brukes til å gjengi sider. I stedet for å lage en enkelt JavaScript-fil som inneholder all appens kode, deler Next.js appen intelligent inn i mange ressurser.
Hvordan oppretter jeg en next.js-applikasjon?
Installasjon
Du kan bruke node npx-kommandoen til å installere og bygge et Next.js-prosjekt.
Dette vil generere en mappe og alle filene, konfigurasjonene og andre elementer som kreves for å kjøre et Next.js-prosjekt.
Du kan starte appen når den er generert.
Sider og ruting
For å håndtere ruter med Next.js trenger vi ikke bruke et ruterammeverk. Ruting med Next.js er en lek å sette opp. Når du bruker kommandoen create-next-app til å bygge en ny Next.js-app, oppretter appen som standard en mappe kalt "sider".
Denne 'sider'-mappen er der du vedlikeholder rutene dine. Som et resultat vil hver reagerer komponentfil i underkatalogen bli håndtert som en egen rute.
For eksempel, hvis mappen inneholder disse filene:
- index.js
- about.js
- aricles.js
Denne filen vil bli transformert automatisk på tre måter:
- Indekssiden localhost/index
- Om-siden localhost/om
- Bloggsiden localhost/artikler
Et eksempel på en about.js-side vises nedenfor. Det er ikke gitt noe om siden, som du kan se. Det er rett og slett en standard React funksjonell komponent.
ruter
For å lage nestede ruter må du først opprette en undermappe. For eksempel: sider/artikler. Opprett din 'contact.js'-reaksjonskomponent i den mappen, og den vil generere siden localhost/articles/contact.
Hvis du legger en fil i pages/articles.js og en annen i pages/articles/index.js. Begge gjenspeiler den samme banen localhost/blogg. I denne situasjonen vil Next.js bare gjengi article.js-filen. Hva med dynamiske ruter, der hvert blogginnlegg har sin egen vei:
- localhost/blogg/førsteartikkel
- localhost/blogg/-andre-artikkel
Ved å bruke parentesnotasjonen kan du definere en dynamisk rute i Next.js. For eksempel: pages/article/[slug].js
Koble ruter
Du har nå fullført din første rute. Jeg tipper du spør hvordan du kobler sider til disse rutene. Du trenger «neste/lenke» for å gjøre det.
Her er et eksempel på en hjemmeside som inneholder en kobling til Om-siden:
Hvis du ønsker å style lenken, bruk følgende syntaks:
Omdiriger ruter
Hva om du trenger å tvinge en omdirigering til en bestemt side? For eksempel, når en knapp trykkes? Du kan oppnå dette ved å bruke 'router.push':
SEO
Sider i nettapplikasjoner krever meta (hode)-elementer i tillegg til data i HTML-kroppen. Dette vil nødvendiggjøre installasjon av et ekstra krav kalt React Helmet i en React-applikasjon.
Vi kan bruke Head-komponenten fra next/head i Next for enkelt å legge til metadata på nettsidene våre som vil bli vist i søkeresultater og innebygde:
komponenter
Du må ofte utvikle komponenter eller en layoutfil. For eksempel en komponent som gjengir navigasjonslinjen. Vi har akkurat brukt sider-mappen så langt. Hva om komponenten din ikke er ment å være en ruteside?
Du vil ikke at brukeren skal navigere til en side som en localhost/navbar. Hvis du plasserer Navbar.js-komponenten i pages-mappen, er det det som vil skje. Hva bør du gjøre i situasjonen?
Bare lagre alle "ikke en side"-komponenter i en egen mappe. De fleste Next.js-prosjekter bruker monikeren 'komponenter', og denne mappen genereres i rotmappen til prosjektet ditt.
Hodekomponent
Den første sideinnlastingen gjengis av Next.js på serversiden. Den gjør dette ved å endre HTML-en på siden din. Overskriftsdelen er inkludert.
Next.js Head-komponenten brukes til å gi header-seksjonskoder som tittel og meta. Head-komponenten brukes i dette eksemplet av en layout-komponent.
Opprett 404-siden ble ikke funnet
Det er mulig å lage din egen 404-feilside. Du ønsker kanskje å tilpasse meldingen eller legge til ditt eget sidedesign. Opprett 404.js-filen i pages-mappen.
Når en 404-feil oppstår, vil Next.js automatisk omdirigere til denne siden. Her er et eksempel på en personlig 404-side:
Henter data fra serversiden
I stedet for å laste ned data på klientsiden, lar Next.js deg utføre en innledende datapopulasjon, noe som innebærer å sende siden med dataene som allerede er fylt ut fra serveren.
Du har to valg for å implementere datahenting på serversiden:
- Data bør hentes på hver forespørsel.
- Få data kun én gang gjennom byggeprosessen (statisk nettsted)
Hent data på hver forespørsel
GetServerSideProps-metoden brukes til å gjengi hver forespørsel på serversiden. Denne funksjonen kan inkluderes på slutten av komponentfilen. Next.js vil automatisk fylle ut komponentrekvisittene dine med getServerSideProps-objektet hvis denne funksjonen er til stede i komponentfilen.
Hent data på byggetidspunktet
GetStaticProps-metoden brukes til å gjengi serversiden på byggetidspunktet. Denne funksjonen kan inkluderes på slutten av komponentfilen. Denne metoden kjører serverkoden og sender en GET-forespørsel til serveren, men bare én gang når prosjektet vårt er ferdig.
Hvorfor bør du lære Next.js?
En av grunnene til dette er fordi Next.js er bygget på toppen av React, et front-end utviklingsverktøysett for lage brukergrensesnitt som er favorittvalget mitt for å designe webapper.
Men det ville ikke vært nok hvis Next.js ikke var god på det den gjorde … ikke sant?
Så hva gjør det egentlig?
Vi må først definere noen få begreper for å forstå det. Next.js ble populær fordi det løste et problem som mange nettutviklere hadde med nettapper på klientsiden (i nettleseren). Disse Single-Page Applications (SPA-ene) hadde en bedre opplevelse siden de ikke trengte at brukeren lastet inn siden på nytt og tillot mer interaktivitet.
Men fordi mesteparten av materialet i en app som denne blir synlig først når den utføres i nettleseren, har webcrawlere vanskelig for å forstå tekstinnholdet i en slik app.
Som et resultat, til tross for deres popularitet, forble mange SPA-er stort sett anonyme for store søkemotorer som Google. Next.js inkluderer nå en mer robust innebygd mekanisme for server-side rendering (SSR) av React-komponenter.
Next.js lar utviklere konstruere JavaScript-kode på serveren under byggeprosessen og gi grunnleggende, indekserbar HTML til brukeren.
Pros
- Flott for brukeropplevelse
- Flott for SEO
- Bygg en superrask statisk nettside som oppfører seg som en dynamisk
- Fleksibilitet i å bygge UI og UX.
- Mange utviklingsfordeler
- Stor samfunnsstøtte
Ulemper
- Nettsteder eller applikasjoner har en viss tid på å konstruere eller utvikle.
- For enkelte oppgaver er Next.js utilstrekkelig. Utviklere bør kunne konstruere dynamiske ruter ved å bruke Node.js-verktøy.
konklusjonen
Som du kan se, forenkler Next.js React apputvikling og lar deg fokusere på det som betyr mest – applogikken og brukergrensesnittet. Den inkluderer alt som trengs for å lage moderne, frontendrike og API-drevne apper.
Den er også egnet for innholdsprosjekter, for eksempel blogger og forretningsnettsteder, på grunn av dens evne til å bygge statiske HTML-sider.
Med de nåværende utgavene opprettholder Next.js ikke bare et høyt nivå av utvikleropplevelse, men gir også verktøy for å øke visuell ytelse og brukeropplevelse, noe som sikrer en lys fremtid for dette rammeverket.
Legg igjen en kommentar