Next.js er en open source-ramme designet til at arbejde med React. Det bruges til at opbygge destinationssider, SEO-venlige websteder, e-handelsbutikker og alle slags webapplikationer, der har brug for hurtige, højtydende indlæsningstider. På den anden side TypeScript er et programmeringssprog bygget på JavaScript, som Next.js understøtter. Disse to kombineret giver en bedre oplevelse både for brugeren og for udvikleren.
Next.js og TypeScript er primært klassificeret som henholdsvis full-stack rammer og skabelonsprog og udvidelsesværktøjer, men lad os se på hvad og Hvordan begge anvendes og Hvordan de kan arbejde sammen, herunder eksempler på dens anvendelse.
Next.js er en open source-ramme oprettet af Vercel. Det hævder at være Internets softwareudviklingskit med alle de nødvendige værktøjer „for at lave Internettet. Hurtigere“ (sic). Lær om Next.js funktioner med React og dets applikationer her.
Next.js gør det muligt for søgemaskiner til nemt at optimere React-apps med nul konfiguration. En traditionel React-app gengives på klientsiden, hvor browseren starter med en skal på en HTML-side, der mangler gengivet indhold. Derfra henter browseren JavaScript-filen, der indeholder React-koden for at gengive indhold til siden og gøre det interaktivt. Der er dog to store ulemper ved gengivelse på klientsiden:
1. Indholdet indekseres ikke pålideligt af alle søgemaskiner eller læses af links bots på sociale medier;2. Det kan tage længere tid at nå den første indholdsfulde maling, når en bruger først lander på websiden.
Next.js er en ramme, der giver dig mulighed for at opbygge en React-app, men gengive indholdet på forhånd på serveren så det første, en bruger eller søgebot ser, er den fuldt gengivne HTML. Efter at have modtaget denne indledende side overtager gengivelsen på klientsiden, og det fungerer ligesom en traditionel React-app. Det er det bedste fra begge verdener: fuldt gengivet indhold til bots og meget interaktivt indhold til brugere.
Den virkelige magi spiller ind, når vi taler om datahentning fordi Next.js kan udføre flere servergengivelsesstrategier fra et enkelt projekt. Datahentning på klientsiden er nyttig, når din side ikke kræver SEO-indeksering, når du ikke har brug for at forhåndsgengive dine data, eller når indholdet på dine sider skal opdateres ofte. Statisk generering eller prægengivelse giver dig mulighed for at gengive dine sider på byggetidspunktet. Se eksemplet nedenfor.
undefined
Det er muligt at se i det forrige kodestykke et eksempel på hentning af data på klientsiden ved hjælp af undefined krog af React.
Først initialiserede vi konstanter for at kontrollere, om hentningen stadig venter, og for at gemme dataene, der er resultatet af hentningsprocessen. Derefter kalder vi undefined krog med 2 forskellige argumenter:
TypeScript er et programmeringssprog, der er udviklet og vedligeholdt af Microsoft, og det er et strengt supersæt af JavaScript. Det understøtter statisk og dynamisk skrivning og giver yderligere arvefunktioner, klasser, synlighedsomfang, navnerum, grænseflader, foreninger og andre moderne funktioner. TS er designet til at håndtere større projekter da det er lettere at refaktorere kode. Lær mere om dens funktioner med en dybdegående sammenligning med JavaScript.
Der er mange grunde til, at en JavaScrip-udvikler overvejer at bruge TypeScript:
Her er en trinvis vejledning til installation af TypeScript i en Next.js app:
1. Opret basisprojekt - kommando: undefined.Opret projekt med en basisskabelon.
2. Tilføj undefined ind i roden af projektet til aktivt TypeScript.
3. Strukturér projektet i formularen.
undefined
4. Opret TypeScript-typer i Next.js
Du kan oprette typer til alt i din applikation, herunder rekvisitter, API-svar, argumenter for funktioner osv.
Vi opretter først en type til vores undefined:
undefined
5. Opret komponenter i Next.js
Nu hvor vi har vores undefined type, vi kan oprette undefined komponent.
undefined
Som du kan se, starter vi med at importere den forrige type, vi oprettede, og også oprette en anden kaldet undefined, som vil spejle de rekvisitter, der modtages som parametre af komponenten.
Denne komponent er ansvarlig for at vise undefined objekt. Denne komponent modtager undefined objekt, en undefined Funktion og en undefined Fungerer som rekvisitter. Bemærk, at dette argument skal matche rekvisitypen for at gøre Typescript glad.
Lad os nu skabe vores undefined komponent, ansvarlig for tilføjelse undefined i vores app.
undefined
Vores komponent accepterer undefined som parameter. Det håndterer indsendelsen af en ny undefined. Hvis værdien ikke er tom, kalder vi undefined funktion på den todo-tekst og indstil derefter værdien af formularen til at tømme igen. Denne komponent returnerer en formular, der accepterer todos og har en indsend-knap, som ved at klikke på knappen tilføjer vi todo i todo-listen.
6. Opret vores side for at bruge vores reaktionskomponenter.Vi starter med at importere de komponenter og typer, vi oprettede tidligere.
Efter import af komponenter og typer importerede vi undefined, som leveres af Next.js, så vi kan indstille typen på metoden getStaticProps.
Derefter initialiserede vi vores undefined ved hjælp af undefined hook, der videregiver som et argument vores oprindelige todos leveret af undefined.
Endelig erklærede vi vores vigtigste funktioner, der implementerer vores logik:
Til sidst returnerer vi en liste over vores allesammen, ved hjælp af vores komponenter.
Alsidig og datadrevet vækstmarkedsfører med dybdegående forretningskendskab, opdateret med den seneste udvikling i det digitale marketinglandskab.
En ung og lidenskabelig udvikler, der er på jagt efter at gøre en forskel i, hvordan folk lever deres daglige liv.
People who read this post, also found these interesting:
.webp)
