Indholdsfortegnelse[Skjule][At vise]
Når du vælger et softwarebibliotek eller -ramme, tages der normalt højde for udvikleroplevelsen.
Når jeg nævner "udvikleroplevelse", refererer jeg til, hvordan udviklere rent faktisk udfører arbejdet. Udviklere vælger biblioteker eller rammer, der er behagelige at bruge.
Dette er en af de primære grunde til, at vi nu har de mest populære biblioteker og rammer. Som udviklere behøver vi ikke starte fra bunden, når der er oprettet eksisterende værktøjer til at hjælpe os med vores opgaver.
Frameworks er stykker software, der er skabt og brugt af udviklere til at konstruere applikationer, og NextJS er en af dem.
I dette indlæg vil vi gennemgå Nextjs, dets nøglefunktioner, og hvordan vi kan bruge det til at bygge en applikation. Lad os springe lige ind.
Hvad er Next.js?
Next.js er en JavaScript-ramme til hurtigt og nemt at konstruere statiske websider og React-baserede online applikationer. Det giver dig mulighed for at designe fantastiske webapps til en række forskellige platforme, herunder Windows, Linux og Mac.
Du bør være bekendt med Next.js-rammen, hvis du har minimal fortrolighed med react og ønsker at lære mere om react-økosystemet.
Selvom Next.js kommer med alt hvad du behøver for at komme i gang, kan du vælge mellem NPM og Yarn, JavaScript og TypeScript, CSS og SCSS, statisk eksport og serverløs implementering.
Funktionalitet
- Routing udføres automatisk – Du behøver ikke at konfigurere noget, fordi enhver URL er knyttet til filsystemet, til filer i sider-mappen (du har selvfølgelig tilpasningsmuligheder).
- Komponenter af en enkelt fil – Det er nemt at tilføje stilarter, der er scoped til komponenten ved hjælp af styled-jsx, som er fuldstændig integreret og produceret af det samme team.
- Genindlæsning af en Hot Code – Når Next.js registrerer en ændring, der er gemt på disken, genindlæser den siden.
- Dynamiske komponenter – Du kan indlæse JavaScript-moduler og React-komponenter dynamisk.
- Statisk eksport – Next.js giver dig mulighed for at eksportere et helt statisk websted fra din app med den næste eksportkommando.
- Kompatibilitet med miljøet – Next.js integreres problemfrit med JavaScript-, Node- og React-økosystemerne.
- Automatisk opdeling af koder – Kun de biblioteker og JavaScript, der kræves, bruges til at gengive sider. I stedet for at oprette en enkelt JavaScript-fil, der indeholder al appens kode, opdeler Next.js intelligent appen i mange ressourcer.
Hvordan opretter man en next.js-applikation?
Installation
Du kan bruge kommandoen node npx til at installere og bygge et Next.js-projekt.
Dette vil generere en mappe og alle de filer, konfigurationer og andre elementer, der kræves for at køre et Next.js-projekt.
Du kan starte appen, når den er blevet genereret.
Sider & Routing
For at håndtere ruter med Next.js behøver vi ikke bruge en routingramme. Routing med Next.js er en leg at konfigurere. Når du bruger kommandoen create-next-app til at bygge en ny Next.js-app, opretter appen som standard en mappe kaldet 'sider'.
Denne 'sider'-mappe er hvor du vedligeholder dine ruter. Som et resultat heraf vil hver reagerende komponentfil i underbiblioteket blive håndteret som en separat rute.
For eksempel, hvis mappen indeholder disse filer:
- index.js
- about.js
- aricles.js
Denne fil vil blive transformeret automatisk på tre måder:
- Indekssiden localhost/index
- Om siden localhost/om
- Blogsiden localhost/artikler
Et eksempel på en about.js-side er vist nedenfor. Der er ikke angivet noget om siden, som du kan se. Det er simpelthen en standard React funktionel komponent.
Ruter
For at lave indlejrede ruter skal du først oprette en undermappe. For eksempel: sider/artikler. Opret din 'contact.js'-reaktionskomponent i den mappe, og den vil generere siden localhost/articles/contact.
Hvis du lægger en fil i pages/articles.js og en anden i pages/articles/index.js. Begge afspejler den samme sti localhost/blog. I denne situation vil Next.js blot gengive filen article.js. Hvad med dynamiske ruter, hvor hvert blogindlæg har sin egen vej:
- localhost/blog/første-artikel
- localhost/blog/-anden-artikel
Ved at bruge parentesnotationen kan du definere en dynamisk rute i Next.js. For eksempel: pages/article/[slug].js
Link ruter
Du har nu gennemført din første rute. Jeg gætter på, at du spørger, hvordan man forbinder sider til disse ruter. Du skal bruge 'næste/link' for at gøre det.
Her er et eksempel på en startside, der indeholder et link til siden Om:
Hvis du ønsker at style linket, skal du bruge følgende syntaks:
Omdiriger ruter
Hvad hvis du har brug for at tvinge en omdirigering til en bestemt side? For eksempel, når der trykkes på en knap? Du kan opnå dette ved at bruge 'router.push':
SEO
Sider i webapplikationer kræver metaelementer (hoved) ud over data i HTML-kroppen. Dette vil nødvendiggøre installation af et ekstra krav kaldet React Helmet i en React-applikation.
Vi kan bruge Head-komponenten fra next/head i Next for nemt at tilføje metadata til vores websider, som vil blive vist i søgeresultater og indlejrede:
komponenter
Du bliver ofte nødt til at udvikle komponenter eller en layoutfil. For eksempel en komponent, der gengiver navbaren. Vi har kun brugt sider-mappen indtil videre. Hvad hvis din komponent ikke er beregnet til at være en ruteside?
Du ønsker ikke, at brugeren skal navigere til en side såsom en localhost/navbar. Hvis du placerer Navbar.js-komponenten i pages-mappen, er det, hvad der vil ske. Hvad skal du gøre i situationen?
Du skal blot gemme alle dine 'ikke en side'-komponenter i en separat mappe. De fleste Next.js-projekter bruger monikeren 'komponenter', og denne mappe genereres i dit projekts rodmapp.
Hovedkomponent
Den første sideindlæsning gengives af Next.js på serversiden. Det gør den ved at ændre HTML-koden på din side. Overskriftssektionen er inkluderet.
Next.js Head-komponenten bruges til at give header-sektionstags såsom titel og meta. Hovedkomponenten bruges i dette eksempel på en Layout-komponent.
Opret 404-siden blev ikke fundet
Det er muligt at lave din egen 404-fejlside. Du ønsker måske at tilpasse beskeden eller tilføje dit eget sidedesign. Opret 404.js-filen i pages-mappen.
Når der opstår en 404-fejl, omdirigerer Next.js automatisk til denne side. Her er et eksempel på en personlig 404-side:
Datahentning fra serversiden
I stedet for at downloade data på klientsiden, giver Next.js dig mulighed for at udføre en indledende datapopulation, hvilket indebærer at sende siden med de data, der allerede er udfyldt fra serveren.
Du har to muligheder for at implementere datahentning på serversiden:
- Data skal hentes på hver anmodning.
- Få kun data én gang gennem hele byggeprocessen (statisk site)
Hent data på hver anmodning
GetServerSideProps-metoden bruges til at gengive hver anmodning på serversiden. Denne funktion kan inkluderes i slutningen af din komponentfil. Next.js vil automatisk udfylde dine komponentrekvisitter med getServerSideProps-objektet, hvis denne funktion er til stede i din komponentfil.
Hent data på byggetidspunktet
GetStaticProps-metoden bruges til at gengive server-side på byggetidspunktet. Denne funktion kan inkluderes i slutningen af din komponentfil. Denne metode kører serverkoden og sender en GET-anmodning til serveren, men kun én gang, når vores projekt er færdigt.
Hvorfor bør du lære Next.js?
En af grundene til dette er, at Next.js er bygget oven på React, et front-end udviklingsværktøj til skabe brugergrænseflader det er mit foretrukne valg til at designe webapps.
Men det ville ikke være nok, hvis Next.js ikke var god til, hvad den gjorde... ikke?
Så hvad gør det præcist?
Vi skal først definere nogle få begreber for at forstå det. Next.js vandt popularitet, fordi det løste et problem, som mange webudviklere havde med web-apps på klientsiden (i browseren). Disse Single-Page Applications (SPA'er) havde en bedre oplevelse, da de ikke behøvede, at brugeren skulle genindlæse siden og gav mulighed for mere interaktivitet.
Men fordi hovedparten af materialet i en app som denne først bliver synlig, når den udføres i browseren, har webcrawlere svært ved at forstå tekstindholdet i en sådan app.
Som et resultat, på trods af deres popularitet, forblev mange SPA'er stort set anonyme for store søgemaskiner såsom Google. Next.js inkluderer nu en mere robust indbygget mekanisme til server-side rendering (SSR) af React-komponenter.
Next.js giver udviklere mulighed for at konstruere JavaScript-kode på serveren under byggeprocessen og levere grundlæggende, indekserbar HTML til brugeren.
FORDELE
- Fantastisk til brugeroplevelse
- Fantastisk til SEO
- Byg en superhurtig statisk hjemmeside, der opfører sig som en dynamik
- Fleksibilitet i opbygning af UI & UX.
- Mange udviklingsfordele
- Stor samfundsstøtte
ULEMPER
- Websites eller applikationer har en vis tid til at konstruere eller udvikle.
- Til visse opgaver er Next.js utilstrækkelig. Udviklere bør være i stand til at konstruere dynamiske ruter ved hjælp af Node.js-værktøjer.
Konklusion
Som du kan se, forenkler Next.js React app-udvikling og giver dig mulighed for at fokusere på det, der betyder mest – din applogik og brugergrænseflade. Det inkluderer alt det nødvendige for at skabe moderne, frontend-rige og API-drevne apps.
Det er også velegnet til projekter med kun indhold, såsom blogs og virksomhedswebsteder, på grund af dets evne til at bygge statiske HTML-sider.
Med de nuværende udgaver opretholder Next.js ikke kun et højt niveau af udvikleroplevelse, men giver også værktøjer til at øge den visuelle ydeevne og brugeroplevelse, hvilket sikrer en lys fremtid for denne ramme.
Giv en kommentar