Next.js är ett ramverk med öppen källkod som är utformat för att fungera med React. Det används för att bygga målsidor, SEO-vänliga webbplatser, e-handelsbutiker och alla typer av webbapplikationer som behöver snabba, högpresterande laddningstider. Å andra sidan, TypeScript är ett programmeringsspråk byggt på JavaScript, som Next.js stöder. Dessa två tillsammans ger en bättre upplevelse både för användaren och för utvecklaren.
Next.js och TypeScript klassificeras främst som full-stack ramverk och mallspråk respektive tilläggsverktyg, men låt oss ta en titt på vad och Hur båda tillämpas och hur de kan arbeta tillsammans, inklusive exempel på dess tillämpning.
Next.js är ett open source-ramverk skapat av Vercel. Det påstår sig vara webbens programvaruutvecklingspaket med alla verktyg som behövs ”för att göra webben. Snabbare” (sic). Lär dig mer om Next.js funktioner med React och dess applikationer här.
Next.js gör det möjligt för sökmotorer att enkelt optimera React-appar med noll konfiguration. En traditionell React-app återges på klientsidan där webbläsaren börjar med ett skal på en HTML-sida som saknar renderat innehåll. Därifrån hämtar webbläsaren JavaScript-filen som innehåller React-koden för att återge innehåll till sidan och göra den interaktiv. Det finns dock två stora nackdelar med rendering på klientsidan:
1. Innehållet indexeras inte på ett tillförlitligt sätt av alla sökmotorer eller läses av länkbots för sociala medier;
2. Det kan ta längre tid att nå den första innehållsfulla färgen när en användare först landar på webbsidan.
Next.js är ett ramverk som låter dig bygga en React-app men återge innehållet i förväg på servern så det första en användare eller sökbot ser är den fullständigt renderade HTML-koden. Efter att ha fått den här första sidan tar rendering på klientsidan över och det fungerar precis som en traditionell React-app. Det är det bästa av två världar: fullt renderat innehåll för bots och mycket interaktivt innehåll för användare.
Den verkliga magin spelar in när vi pratar om datahämtning eftersom Next.js kan utföra flera serverrenderingsstrategier från ett enda projekt. Datahämtning på klientsidan är användbar när din sida inte kräver SEO-indexering, när du inte behöver förrendera dina data eller när innehållet på dina sidor behöver uppdateras ofta. Statisk generering eller föråtergivning gör att du kan rendera dina sidor vid byggtiden. Se exemplet nedan.
Det är möjligt att se i föregående kodfragment ett exempel på datahämtning på klientsidan med hjälp av AnvändningEffekt Hook of React.
Först initierade vi konstanter för att kontrollera om hämtningen fortfarande väntar och för att spara data som härrör från hämtningsprocessen. Sedan kallar vi AnvändningEffekt krok med 2 olika argument:
TypeScript är ett programmeringsspråk som utvecklas och underhålls av Microsoft, och det är en strikt superset av JavaScript. Den stöder statisk och dynamisk typning och ger vidare arvsfunktioner, klasser, synlighetsomfång, namnrymder, gränssnitt, fackföreningar och andra moderna funktioner. TS designades för att hantera större projekt eftersom det är lättare att refaktorera kod. Läs mer om dess funktioner med en djupgående jämförelse med JavaScript.
Det finns många anledningar till varför en JavaScrip-utvecklare överväger att använda TypeScript:
Här är en steg-för-steg-guide för att installera TypeScript i en Next.js app:
1. Skapa basprojekt - kommando: npx skapa-nästa-app nästa-app-exempel.
Skapa projekt med en basmall.
2. Lägg till tsconfig.json in i roten av projektet till aktivt TypeScript.
3. Strukturera projektet i formuläret.
4. Skapa TypeScript-typer i Next.js
Du kan skapa typer för vad som helst i ditt program, inklusive rekvisitatyper, API-svar, argument för funktioner och så vidare.
Vi skapar först en typ för vår allesammans:
5. Skapa komponenter i Next.js
Nu när vi har vår ITÓDÓ typ, vi kan skapa Allt.tsx komponent.
Som ni ser börjar vi med att importera den tidigare typen vi skapade, och också skapa en annan som heter rekvisita, som kommer att spegla rekvisita som mottas som parametrar av komponenten.
Denna komponent ansvarar för att visa iToDo objekt. Denna komponent tar emot iToDo objekt, a MarkTodo Funktion, och en Ta bort Todo Fungerar som rekvisita. Lägg märke till att detta argument måste matcha rekvisitypen för att göra Typescript lycklig.
Låt oss nu skapa vår FormToDo.tsx komponent, ansvarig för att lägga till Alla i vår app.
Vår komponent accepterar Lägg tillToDo som en parameter. Den hanterar inlämningen av en ny Allt. Om värdet inte är tomt, kallar vi Lägg tillToDo fungerar på den todo-texten och ställ sedan in värdet på formuläret till tomt igen. Denna komponent returnerar ett formulär som accepterar todos och har en skicka-knapp, som genom att klicka på knappen lägger vi till todo i todo-listan.
6. Skapa vår sida för att använda våra react-komponenter.
Vi börjar med att importera de komponenter och typer som vi skapade tidigare.
Efter att ha importerat komponenterna och typerna importerade vi InfergetStaticPropType, som tillhandahålls av Next.js så att vi kan ställa in typen på metoden getStaticProps.
Efter det initierade vi vår TodoList med hjälp av nyttjastad krok, skickar som ett argument våra initiala todos som tillhandahålls av GetStaticProps.
Slutligen förklarade vi våra huvudfunktioner som implementerar vår logik:
Lägg tillToDo - gör det möjligt att lägga till en allting i vår listaTa bort Todo - gör det möjligt att ta bort en todo i vår listaMarkTodo - gör det möjligt att ställ in en todo som klar i vår lista
Till slut returnerar vi en lista över våra allesammans, med hjälp av våra komponenter.
Mångsidig och datadriven tillväxtmarknadsförare med fördjupad affärskunskap, uppdaterad med den senaste utvecklingen inom det digitala marknadsföringslandskapet.
En ung och passionerad utvecklare som är på jakt efter att göra skillnad i hur människor gör sitt dagliga liv.
Människor som läste det här inlägget tyckte också att dessa var intressanta:
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
