Der er ingen mangel på JavaScript-biblioteker og -rammer for moderne webudviklere. Et af de mest udbredte biblioteker er React, som Facebook (nu Meta) har skabt for at hjælpe med at bygge funktionsrige applikationer. React-applikationer kører traditionelt set i webbrowsere, men Next.js framework udvider React-funktionaliteten til serversiden via JavaScript-køremiljøet Node.js.
I denne artikel ser vi på Next.js og React, så du kan beslutte, om de er det rigtige for dit næste projekt.
Next.js og React: JavaScript på det næste niveau
En SlashData-undersøgelse fra 2022 viste, at der er mere end 17 millioner JavaScript-programmører i verden, hvilket fører en flok, der omfatter populære sprog som Python og Java. JavaScript kan bruges på både klient- og serversiden, og denne alsidighed betyder, at udviklere kan bygge komplette applikationer med ét programmeringssprog.
Indførelsen af JavaScript-biblioteker som React og frameworks som Next.js har yderligere styrket denne udvikling. Disse biblioteker og frameworks giver funktioner, der forenkler integrationen af frontend og backend. Desuden kan udviklere udvide JavaScript-funktionerne ved hjælp af pakkehåndteringsprogrammer som npm (Node.js-pakkehåndteringsprogrammet) til at installere JavaScript-biblioteker og -værktøjer. Disse ressourcer giver sofistikerede funktioner, der reducerer mængden af kode, som du selv skal skrive.
Udvideligheden af JavaScript betyder, at et omfattende kendskab til de mest almindelige værktøjer er nøglen til din succes som webudvikler.
Hvad er Next.js?
Next.js blev oprindeligt udgivet i 2016 af Vercel og er en open source React-ramme, der giver byggeklodserne til at skabe højtydende webapplikationer. Store virksomheder har siden da taget det til sig, herunder Twitch, TikTok og Uber, for blot at nævne nogle få.
Next.js tilbyder en af de bedste udvikleroplevelser til at bygge hurtige, SEO-venlige applikationer. Nedenfor er nogle af Next.js’ funktioner, der gør det til en enestående produktionsramme:
- Hybrid renderingsmuligheder
- Automatisk kodeopdeling
- Optimering af billeder
- Indbygget understøttelse af CSS-præprocessorer og CSS-in-JS-biblioteker
- Indbygget routing
Disse funktioner hjælper Next.js-udviklere med at spare betydelig tid på konfiguration og værktøj. Du kan gå direkte i gang med at bygge din applikation, som kan understøtte projekter som f.eks. følgende:
- E-handelsbutikker
- Blogs
- Dashboards
- Applikationer med en enkelt side
- Interagerende brugergrænseflader
- Statiske websteder
Hvad er React?
React er et JavaScript-bibliotek, der bruges til at bygge dynamiske brugergrænseflader. Ud over at skabe webgrænseflader kan du også bygge mobilapplikationer ved hjælp af React Native.
Nogle af fordelene ved at bruge React er bl.a:
- Forbedret ydeevne: I stedet for at opdatere hver enkelt komponent i DOM’en bruger React en virtuel DOM til kun at opdatere de ændrede komponenter.
- Stærkt komponentbaseret: Når du først har oprettet en komponent, kan du genbruge den gentagne gange.
- Nem fejlfinding: React-applikationer bruger en ensrettet datastrøm – kun fra overordnede til underordnede komponenter.
Next.js vs React
Selv om udviklere ofte bruger Next.js og React til samme formål, er der nogle grundlæggende forskelle mellem de to.
Brugervenlighed
Det er nemt at komme i gang med Next.js og React. Begge kræver, at du kører enkelte kommandoer i din terminal ved hjælp af npx, som er en del af npm til Node.js.
For Next.js er den enkleste kommando:
npx create-next-appUden yderligere argumenter til create-next-app vil installationen fortsætte i interaktiv tilstand. Du vil blive spurgt om et projektnavn (som vil blive brugt til projektmappen), og om du ønsker at inkludere understøttelse af TypeScript og kodeinterviseren ESLint.
Det vil se nogenlunde sådan her ud:
Når du initialiserer en React-instans, indeholder den enkleste kommando et navn for projektets mappe:
npx create-react-app new-appDette genererer en mappe, der indeholder alle de nødvendige indledende konfigurationer og afhængigheder:
Selvom begge gør det nemt at komme i gang, skal du huske, at Next.js er bygget oven på React. Så du kan ikke lære Next.js uden først at lære React og forstå, hvordan det fungerer. Heldigvis kan React prale af en let indlæringskurve og er fantastisk for begyndere.
Det er også vigtigt at bemærke, at React er relativt ustruktureret. Du skal installere og opsætte en React-router og beslutte, hvordan du vil håndtere datahentning, billedoptimering og kodeopdeling. Denne opsætning kræver, at du installerer og konfigurerer yderligere biblioteker og værktøjer.
I modsætning hertil leveres Next.js med disse værktøjer præinstalleret og prækonfigureret. Med Next.js fungerer enhver fil, der tilføjes til mappen pages, automatisk som en rute. På grund af denne indbyggede understøttelse er Next.js lettere at arbejde med i det daglige, så du kan begynde at kode logikken i din applikation med det samme.
Next.js og React-funktioner
Fordi Next.js er baseret på React, deler de to funktioner. Next.js går dog et skridt videre og indeholder yderligere funktioner som routing, code-splitting, pre-rendering og API-understøttelse lige ud af boksen. Det er funktioner, som du selv skal konfigurere, når du bruger React.
Hentning af data
React renderer data på klientsiden. Serveren sender statiske filer til browseren, og derefter henter browseren dataene fra API’er for at fylde applikationen op. Denne proces reducerer appens ydeevne og giver en dårlig brugeroplevelse, da appen indlæses langsomt. Next.js løser dette problem gennem pre-rendering.
Med pre-rendering foretager serveren de nødvendige API-opkald og henter dataene, inden applikationen sendes til browseren. Som sådan modtager browseren websider, der er klar til at blive renderet.
Pre-rendering kan henvise til statisk generering af websteder (SSG) eller server-side rendering (SSR). I SSG genereres HTML-siderne på opbygningstidspunktet og genbruges til flere anmodninger. Next.js kan generere HTML-sider med eller uden data.
Nedenfor er et eksempel på, hvordan Next.js genererer sider uden data:
function App() {
return <div>Welcome</div>
}
export default AppFor statiske sider, der bruger eksterne data, skal du bruge funktionen getStaticProps(). Når du eksporterer getStaticProps() fra en side, vil Next.js forrendere siden ved hjælp af de rekvisitter, den returnerer. Denne funktion kører altid på serveren, så brug getStaticProps(), når de data, som siden bruger, er tilgængelige på byggetidspunktet. Du kan f.eks. bruge den til at hente blogindlæg fra et CMS.
const Posts= ({ posts }) => {
return (
<div className={styles.container}>
{posts.map((post, index) => (
// render each post
))}
</div>
);
};
export const getStaticProps = async () => {
const posts = getAllPosts();
return {
props: { posts },
};
};I situationer, hvor sidens stier afhænger af eksterne data, skal du bruge funktionen getStaticPaths(). Så hvis du vil oprette en sti baseret på indlægs-id’et, skal du eksportere getStaticPaths() fra siden.
Du kan f.eks. eksportere getStaticPaths() fra pages/posts/[id].js som vist nedenfor.
export getStaticPaths = async() => {
// Get all the posts
const posts = await getAllPosts()
// Get the paths you want to pre-render based on posts
const paths = posts.map((post) => ({
params: { id: post.id },
}))
return { paths, fallback: false }
}getStaticPaths() er ofte parret med getStaticProps(). I dette eksempel ville du bruge getStaticProps() til at hente detaljerne for ID’et i stien.
export const getStaticProps = async ({ params }) => {
const post = await getSinglePost(params.id);
return {
props: { post }
};
};I SSR hentes data på det ønskede tidspunkt og sendes til browseren. Hvis du vil bruge SSR, skal du eksportere rekvisitfunktionen getServerSide() fra den side, du vil gengive. Serveren kalder denne funktion ved hver anmodning, hvilket gør SSR nyttigt for sider, der bruger dynamiske data.
Du kan f.eks. bruge den til at hente data fra en nyheds-API.
const News = ({ data }) => {
return (
// render data
);
};
export async function getServerSideProps() {
const res = await fetch(`https://app-url/data`)
const data = await res.json()
return { props: { data } }
}Dataene hentes ved hver anmodning og sendes til News-komponenten via props.
Opsplitning af kode
Kodeopdeling er opdeling af kode i bidder, som browseren kan indlæse efter behov. Det reducerer mængden af kode, der sendes til browseren under den første indlæsning, da serveren kun sender det, som brugeren har brug for. Bundlers som Webpack, Rollup og Browserify understøtter kodeopdeling i React.
Next.js understøtter kodeopsplitning uden videre.
Med Next.js er hver side kodeopdelt, og tilføjelse af sider til applikationen øger ikke bundle-størrelsen. Next.js understøtter også dynamisk import, hvilket giver dig mulighed for at importere JavaScript-moduler og indlæse dem dynamisk under kørselstiden. Dynamisk import bidrager til hurtigere sidehastigheder, fordi bundles lazy-loads.
I Home-komponenten nedenfor vil serveren f.eks. ikke inkludere hero-komponenten i det oprindelige bundle.
const DynamicHero = dynamic(() => import('../components/Hero'), {
suspense: true,
})
export default function Home() {
return (
<Suspense fallback={`Loading...`}>
<DynamicHero />
</Suspense>
)
}I stedet vil spændingens fallback-element blive gengivet, før heltekomponenten indlæses.
API-understøttelse i Next.js vs. React
Next.js API-routing-funktionen gør det muligt at skrive backend- og frontend-kode i den samme kodebase. Enhver side gemt i mappen /pages/api/ mappes til /api/*-ruten, og Next.js behandler den som et API-endpoint.
Du kan f.eks. oprette en pages/api/user.js API-rute, der returnerer den aktuelle brugers navn på denne måde:
export default function user(req, res) {
res.status(200).json({ username: 'Jane' });
}Hvis du besøger https://app-url/api/user-URL’en, vises objektet brugernavn.
{
username: 'Jane'
}API-ruter er nyttige, når du ønsker at maskere URL’en for en tjeneste, du har adgang til, eller når du ønsker at holde miljøvariabler hemmelige uden at kode et helt backend-program.
Ydeevne
Next.js er utvivlsomt overlegen i sin evne til at skabe apps med bedre ydeevne og en forenklet proces. SSR- og SSG Next.js-applikationer præsterer bedre end React-applikationer med client-side rendering (CSR). Ved at hente data på serveren og sende alt det, som browseren har brug for at rendere, eliminerer Next.js behovet for en data-fetch-forespørgsel til API’er. Det betyder hurtigere indlæsningstider.
Desuden fordi Next.js understøtter client-side routing. Behøver browseren ikke at hente data fra serveren, hver gang en bruger navigerer til en anden rute. Derudover muliggør Next.js-billedkomponenten automatisk billedeoptimering. Billeder indlæses kun, når de kommer ind i visningsområdet. Hvor det er muligt, serverer Next.js også billeder i moderne formater som WebP.
Next.js tilbyder også optimering af skrifttyper, smart route prefetching og optimering af bundling. Disse optimeringer er ikke automatisk tilgængelige i React.
Støtte
Da React har eksisteret i længere tid end Next.js, har den et mere omfattende fællesskab. Mange React-udviklere er dog ved at indføre Next.js, så dette fællesskab vokser støt og roligt. Udviklere finder lettere eksisterende løsninger på problemer, de støder på, i stedet for at skulle bygge løsninger fra bunden.
Next.js har også en fremragende dokumentation med omfattende eksempler, der er lette at forstå. På trods af sin popularitet er React-dokumentationen ikke lige så overskuelig.
Opsummering
Valget mellem Next.js og React afhænger af kravene til en applikation.
Next.js forbedrer React’s muligheder ved at give struktur og værktøjer, der forbedrer ydeevnen. Disse værktøjer, som f.eks. routing, kodeopdeling og billedeoptimering, er indbygget i Next.js, hvilket betyder, at udviklere ikke behøver at konfigurere noget manuelt. Takket være disse funktioner er Next.js let at bruge, og udviklerne kan begynde at kode forretningslogikken med det samme.
På grund af de forskellige renderingsmuligheder er Next.js velegnet til server-side renderede applikationer eller applikationer, der kombinerer statisk generering og Node.js server-side rendering. Takket være optimeringsfunktionen i Next.js er det også perfekt til websteder, der skal være hurtige, som f.eks. e-handelsbutikker.
React er et JavaScript-bibliotek, der kan hjælpe dig med at oprette og skalere robuste front-end-applikationer. Dens syntaks er også ligetil, især for udviklere med en JavaScript-baggrund. Desuden har du kontrol over de værktøjer, du bruger i din applikation, og hvordan du konfigurerer dem.
Planlægger du din egen verdensdominerende applikation? Dyk ned i Kinsta’s tilgang til Node.js applikationshosting for tjenester, der understøtter React og Next.js.
Han er en selvlært webudvikler, skribent, skaber og en stor beundrer af Free and Open Source Software (FOSS). Udover teknologi, er han begejstret for videnskab, filosofi, fotografi, kunst, katte og mad. Lær mere om ham på hans hjemmeside, og kontakt Salman på X.
Skriv et svar