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.
Det er muligt at se i det forrige kodestykke et eksempel på hentning af data på klientsiden ved hjælp af BrugEffekt 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 BrugEffekt 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: npx oprette-næste app-eksempel på næste app.
Opret projekt med en basisskabelon.
2. Tilføj tsconfig.json ind i roden af projektet til aktivt TypeScript.
3. Strukturér projektet i formularen.
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 allesammen:
5. Opret komponenter i Next.js
Nu hvor vi har vores ITONE type, vi kan oprette Todo.tsx komponent.
Som du kan se, starter vi med at importere den forrige type, vi oprettede, og også oprette en anden kaldet rekvisitter, som vil spejle de rekvisitter, der modtages som parametre af komponenten.
Denne komponent er ansvarlig for at vise iTodo objekt. Denne komponent modtager iTodo objekt, en MarkTodo Funktion og en Fjern Todo Fungerer som rekvisitter. Bemærk, at dette argument skal matche rekvisitypen for at gøre Typescript glad.
Lad os nu skabe vores FormTodo.tsx komponent, ansvarlig for tilføjelse Alle i vores app.
Vores komponent accepterer TilføjToDo som parameter. Det håndterer indsendelsen af en ny Todo. Hvis værdien ikke er tom, kalder vi TilføjToDo 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 InfergetStaticPropType, som leveres af Next.js, så vi kan indstille typen på metoden getStaticProps.
Derefter initialiserede vi vores TodoList ved hjælp af BrugEjendom hook, der videregiver som et argument vores oprindelige todos leveret af GetStaticProps.
Endelig erklærede vi vores vigtigste funktioner, der implementerer vores logik:
TilføjToDo - tillader at tilføje en todo på vores listeFjern Todo - giver mulighed for fjern en todo på vores listeMarkTodo - giver mulighed for sæt en todo som færdig på vores liste
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)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
