Det råder ingen brist på JavaScript-bibliotek och ramverk för moderna webbutvecklare. Ett av de mest allmänt förekommande biblioteken är React. Detta skapades av Facebook (numera Meta) för att hjälpa till att bygga funktionsrika applikationer. React-applikationer körs traditionellt sett i webbläsare. Next.js-ramverket utökar dock React-funktionerna till serversidan genom JavaScript-körtidsmiljön Node.js.

I den här artikeln så tittar vi på Next.js och React så att du kan avgöra om de är rätt för ditt nästa projekt.

Next.js och React: JavaScript på nästa nivå

En undersökning från SlashData från 2022 visade att det finns mer än 17 miljoner JavaScript-programmerare i världen. Detta slår en hel del populära språk som exempelvis Python och Java. JavaScript kan användas både på klient- och serversidan. Som ett resultat av denna mångsidighet så an utvecklare bygga fullfjädrade tillämpningar med hjälp av ett enda programmeringsspråk.

Slash/Datas undersökning av språk som används av programmerare år 2022. (Källa: Statista)
Slash/Datas undersökning av språk som används av programmerare år 2022. (Källa: Statista)

Införandet av JavaScript-bibliotek som React och ramverk som Next.js förstärkte den utvecklingen ytterligare. Dessa bibliotek och ramverk tillhandahåller funktioner som förenklar integreringen av frontend och backend. Dessutom så kan utvecklare utöka JavaScript-funktionerna med hjälp av pakethanterare som npm (Node.js-pakethanteraren) för att installera JavaScript-bibliotek och verktyg. Dessa resurser tillhandahåller sofistikerade funktioner som minskar mängden kod som du måste skriva själv.

Utökbarheten hos JavaScript innebär att en omfattande kunskap om dess vanligaste verktyg är nyckeln till framgång som webbutvecklare.

Vad är Next.js?

Next.js, som ursprungligen släpptes 2016 av Vercel, är ett React-ramverk med öppen källkod. Det tillhandahåller byggstenarna för att skapa högpresterande webbapplikationer. Stora företag har sedan dess anammat detta, bland annat Twitch, TikTok och Uber, för att nämna några.

Next.js erbjuder en av de bästa utvecklarupplevelserna för att bygga snabba, SEO-vänliga applikationer. Nedan så följer några funktioner i Next.js som gör det till ett exceptionellt produktionsramverk:

  • Hybrida renderingsmöjligheter
  • Automatisk uppdelning av kod
  • Optimering av bilder
  • Inbyggt stöd för CSS-preprocessorer och CSS-in-JS-bibliotek
  • Inbyggd routing

Som ett resultat av dessa funktioner så kan Next.js-utvecklare spara mycket tid på konfiguration och verktyg. Du kan direkt börja bygga din applikation, som kan stödja projekt som följande:

  • E-handelsbutiker
  • Bloggar
  • Instrumentpaneler
  • Applikationer med en enda sida
  • Interaktiva användargränssnitt
  • Statiska webbplatser

Vad är React?

React är ett JavaScript-bibliotek som används för att bygga dynamiska användargränssnitt. Utöver att skapa webbgränssnitt så kan du även bygga mobila applikationer med React Native.

Några av fördelarna med att använda React är bland annat följande:

  • Förbättrad prestanda: Istället för att uppdatera varje komponent i DOM så använder React en virtuell DOM för att endast uppdatera de ändrade komponenterna.
  • Starkt komponentbaserad: När du väl har skapat en komponent så kan du återanvända den upprepade gånger.
  • Enkel felsökning: React-applikationer använder ett enkelriktat dataflöde – endast från överordnade till underordnade komponenter.

Next.js vs React

Även om utvecklare ofta använder Next.js och React i samma syfte så finns det några grundläggande skillnader mellan dessa två.

Användarvänlighet

Det är lätt att börja med Next.js och React. Båda kräver exempelvis att du kör enstaka kommandon i din terminal med hjälp av npx, som är en del av npm för Node.js.

För Next.js så är detta det enklaste kommandot:

npx create-next-app

Utan ytterligare argument för create-next-app fortsätter installationen i interaktivt läge. Du kommer att tillfrågas om ett projektnamn (som kommer att användas för projektkatalogen) och om du vill inkludera stöd för TypeScript och kodinternatorn ESLint.

Det kommer att se ut ungefär så här:

Skapa en Next.js-applikation i interaktivt läge.
Skapa en Next.js-applikation i interaktivt läge.

När du initierar en React-instans så innehåller det enklaste kommandot ett namn för projektkatalogen:

npx create-react-app new-app

Detta genererar en mapp som innehåller alla nödvändiga initiala konfigurationer och beroenden:

Skapa ett React-projekt på terminalens kommandorad.
Skapa ett React-projekt på terminalens kommandorad.

Även om båda gör det enkelt att börja, ska du komma ihåg att Next.js är byggt ovanpå React. Du kan därför inte lära dig Next.js utan att först lära dig React och förstå hur det fungerar. Lyckligtvis så har React en lätt inlärningskurva och är utmärkt för nybörjare.

Det är även viktigt att notera att React är relativt ostrukturerat. Du måste installera och ställa in en React-router. Efter detta så kan du bestämma hur du ska hantera datahämtning, bildoptimering och koduppdelning. Den här inställningen kräver att du installerar och konfigurerar ytterligare bibliotek och verktyg.

Next.js däremot levereras med dessa verktyg förinstallerade och förkonfigurerade. Med Next.js så fungerar alla filer som läggs till i mappen pages automatiskt som en route. Som ett resultat av detta inbyggda stöd är Next.js enklare att arbeta med dagligen, vilket gör att du kan börja koda logiken i din applikation direkt.

Funktioner i Next.js och React

Eftersom Next.js är baserat på React så delar de två vissa funktioner. Next.js går dock ett steg längre och inkluderar ytterligare funktioner som routing, koduppdelning, förrendering och API-stöd direkt ur lådan. Detta är funktioner som du måste konfigurera själv när du använder React.

Hämtning av data

React renderar data på klientsidan. Servern skickar statiska filer till webbläsaren. Efter detta så hämtar webbläsaren data från API: er för att fylla applikationen. Den här processen minskar appens prestanda och ger en dålig användarupplevelse eftersom appen laddas långsamt. Next.js löser det här problemet genom pre-rendering.

Med förrendering så gör servern de nödvändiga API-anropen och hämtar data innan applikationen skickas till webbläsaren. Som ett resultat så får webbläsaren webbsidor som är färdiga att renderas.

Förrendering kan avse generering av statiska webbplatser (SSG) eller serverside-rendering (SSR). I SSG så genereras HTML-sidorna vid byggnadstillfället och återanvänds för flera begäranden. Next.js kan generera HTML-sidor med eller utan data.

Nedan så finns ett exempel på hur Next.js genererar sidor utan data:

function App() {
  return <div>Welcome</div>
}
export default App

För statiska sidor som använder externa data så använder du funktionen getStaticProps(). När du exporterar getStaticProps() från en sida så kommer Next.js att förrendera sidan med hjälp av den prop som returneras. Den här funktionen körs alltid på servern. Använd därför getStaticProps() när de data som sidan använder är tillgängliga vid byggnadstillfället. Du kan exempelvis använda detta för att hämta blogginlägg från ett 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 där sidans sökvägar är beroende av externa data så ska du använda funktionen getStaticPaths(). Om du vill skapa en sökväg baserad på inläggs-ID så exporterar du getStaticPaths() från sidan.

Du kan exempelvis exportera getStaticPaths() från pages/posts/[id].js enligt nedan.

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() getStaticProps() i det här exemplet så skulle du använda getStaticProps() för att hämta information om ID: t i sökvägen.

export const getStaticProps = async ({ params }) => {
    const post = await getSinglePost(params.id);
    return {
        props: { post }
    };
};

I SSR så hämtas data vid den begärda tidpunkten och skickas till webbläsaren. Om du vill använda SSR så exporterar du prop-funktionen getServerSide() från den sida som du vill återge. Servern anropar den här funktionen vid varje begäran. Som ett resultat så blir SSR användbart för sidor som konsumerar dynamiska data.

Du kan exempelvis använda den för att hämta data från ett nyhets-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 } }
}

Uppgifterna hämtas vid varje begäran och skickas till nyhetskomponenten via props.

Uppdelning av kod

Koddelning handlar om att dela upp koden i delar som webbläsaren kan ladda vid behov. Som ett resultat av detta så minskar mängden kod som skickas till webbläsaren under den första laddningen. Detta blir möjligt eftersom servern endast skickar det som användaren behöver. Bundlers som Webpack, Rollup och Browserify stöder koduppdelning i React.

Next.js har stöd för koduppdelning direkt ur lådan.

Med Next.js så är varje sida koduppdelad. Om man lägger till sidor i applikationen så ökar inte buntstorleken. Next.js stöder även dynamisk import. Som ett resultat så kan du importera JavaScript-moduler och ladda dem dynamiskt under körningen. Dynamisk import bidrar till snabbare sidhastigheter eftersom paketen laddas utan ansträngning.

I hemkomponenten nedan så kommer servern exempelvis inte att inkludera hjältekomponenten i det första paketet.

const DynamicHero = dynamic(() => import('../components/Hero'), {
  suspense: true,
})

export default function Home() {
  return (
    <Suspense fallback={`Loading...`}>
      <DynamicHero />
    </Suspense>
  )
}

Istället så kommer spänningselementets fallback-element att renderas innan hjältekomponenten laddas.

API-stöd i Next.js jämfört med React

Next.js API-routing-funktionen gör att du kan skriva backend- och frontendkod i samma kodbas. Varje sida som sparas i mappen /pages/api/ mappas till routen /api/* och Next.js behandlar den som en API-slutpunkt.

Du kan exempelvis skapa en pages/api/user.js API-väg som returnerar den aktuella användarens namn på följande sätt:

export default function user(req, res) {
    res.status(200).json({ username: 'Jane' });
}

Om du besöker webbadressen https://app-url/api/user så visas användarnamnet.

{
        username: 'Jane'
}

API-router är användbara när du vill dölja webbadressen för en tjänst som du har tillgång till eller när du vill hålla miljövariabler hemliga utan att behöva koda en hel backend-applikation.

Prestanda

Next.js är utan tvekan överlägsen i sin förmåga att skapa appar med bättre prestanda med en förenklad process. SSR- och SSG Next.js-applikationer presterar bättre än React-applikationer med klientsidesrendering (CSR). Next.js hämtar data på servern och skicka allt som webbläsaren behöver för att rendera. Som ett resultat så elimineras behovet av en begäran om datahämtning till API: er. Detta innebär snabbare laddningstider.

Next.js stöder dessutom routning på klientsidan. Webbläsaren behöver därför inte hämta data från servern varje gång som en användare navigerar till en annan route. Next.js’s bildkomponent möjliggör även automatisk bildoptimering. Bilderna laddas endast när de kommer in i visningsfältet. Där det är möjligt så serverar Next.js även bilder i moderna format som WebP.

Next.js erbjuder även optimering av teckensnitt, smart route-prefetching och optimering av paketering. Dessa optimeringar är inte automatiskt tillgängliga i React.

Stöd för

Eftersom React har funnits längre än Next.js så finns det ett mer omfattande community. Många React-utvecklare använder sig dock av Next.js, så dess community växer stadigt. Det är lättare för utvecklare att hitta befintliga lösningar på problem som de stöter på än att behöva bygga lösningar från grunden.

Next.js har även en utmärkt dokumentation med omfattande exempel som är lätta att förstå. Trots sin popularitet så är React-dokumentationen inte lika lättnavigerad.

Sammanfattning

Att välja Next.js eller React beror på applikationens krav.

Next.js förbättrar React’s kapacitet genom att tillhandahålla struktur och verktyg som förbättrar prestandan. Dessa verktyg, som routning, koduppdelning och bildoptimering, är inbyggda i Next.js. Som ett resultat så behöver utvecklare inte konfigurera något manuellt. Tack vare dessa funktioner så är Next.js lätt att använda och utvecklare kan börja att koda affärslogiken direkt.

På grund av de olika renderingsalternativen så är Next.js lämpligt för serverside-renderade applikationer. Det är även lämpligt för applikationer som kombinerar statisk generering och Node.js serverside-rendering. Som ett resultat av den optimeringsfunktion som Next.js tillhandahåller så är det även perfekt för webbplatser som måste vara snabba, som e-handelsbutiker.

React är ett JavaScript-bibliotek som kan hjälpa dig att skapa och skala robusta frontend-applikationer. Dess syntax är också okomplicerad, särskilt för utvecklare med JavaScript-bakgrund. Du har dessutom kontroll över vilka verktyg som du använder i din applikation och hur du konfigurerar dem.

Planerar du din egen världsdominerande applikation? Djupdyk i Kinsta’s strategi för Node.js-applikationshosting för tjänster som stöder React och Next.js.

Salman Ravoof

Salman Ravoof är en självlärd webbutvecklare, författare, skapare och en stor beundrare av fri och öppen källkod (FOSS). Förutom teknik är han intresserad av vetenskap, filosofi, fotografi, konst, katter och mat. Lär dig mer om honom på hans hemsida och kontakta Salman på X.