Next.js vs React? Het is een samenwerking, geen competitie

Er is geen tekort aan JavaScript bibliotheken en frameworks voor moderne webdevelopers. Een van de meest alomtegenwoordige bibliotheken is React, dat Facebook (nu Meta) maakte om te helpen featurerijke applicaties te bouwen. React applicaties draaien traditioneel in webbrowsers, maar het Next.js framework breidt de React functionaliteit uit naar de serverkant via de JavaScript runtime omgeving Node.js.

In dit artikel bekijken we Next.js en React, zodat je kunt beslissen of ze geschikt zijn voor je volgende project.

Next.js en React: next-level JavaScript

Uit een onderzoek van SlashData uit 2022 blijkt dat er wereldwijd meer dan 17 miljoen JavaScript programmeurs zijn, die aan de leiding gaan ten opzichte van andere populaire talen als Python en Java. JavaScript kan zowel aan de client- als aan de serverside worden gebruikt, en deze veelzijdigheid betekent dat developers met één programmeertaal volwaardige applicaties kunnen bouwen.

De introductie van JavaScript bibliotheken als React en frameworks als Next.js hebben die ontwikkeling verder versterkt. Deze bibliotheken en frameworks bieden features die frontend en backend integratie vereenvoudigen. Verder kunnen developers de JavaScript mogelijkheden uitbreiden met behulp van pakketbeheerders zoals npm (de Node.js pakketbeheerder) om JavaScript bibliotheken en tools te installeren. Deze tools bieden geavanceerde mogelijkheden die de hoeveelheid code die je zelf moet schrijven verminderen.

De uitbreidbaarheid van JavaScript betekent dat een uitgebreide kennis van de meest gebruikte tools de sleutel is tot je succes als webdeveloper.

Wat is Next.js?

Next.js, in eerste instantie uitgebracht in 2016 door Vercel, is een open source React framework dat de bouwstenen levert om krachtige webapplicaties te maken. Grote bedrijven hebben het sindsdien overgenomen, waaronder Twitch, TikTok en Uber, om er een paar te noemen.

Next.js biedt een van de beste ervaringen voor developers voor het bouwen van snelle, SEO vriendelijke applicaties. Hieronder staan enkele features van Next.js die het tot een uitzonderlijk productieframework maken:

• Hybride renderingmogelijkheden
• Automatisch splitsen van code
• Afbeeldingoptimalisatie
• Ingebouwde ondersteuning voor CSS preprocessors en CSS in-JS bibliotheken
• Ingebouwde routing

Deze features helpen developers van Next.js aanzienlijk tijd te besparen op configuratie en tooling. Je kunt meteen beginnen met het bouwen van je applicatie, die projecten als de volgende zou kunnen ondersteunen:

• E-commerce winkels
• Blogs
• Dashboards
• Applicaties van één pagina
• Interactieve gebruikersinterfaces
• Statische websites

Wat is React?

React is een JavaScript bibliotheek die gebruikt wordt om dynamische gebruikersinterfaces te bouwen. Naast het maken van webinterfaces kun je ook mobiele applicaties bouwen met React Native.

Enkele voordelen van het gebruik van React zijn:

• Verbeterde prestaties: In plaats van elke component in de DOM bij te werken, gebruikt React een virtuele DOM om alleen de gewijzigde componenten bij te werken.
• Sterk op componenten gebaseerd: Als je eenmaal een component maakt, kun je die herhaaldelijk hergebruiken.
• Gemakkelijk debuggen: React applicaties gebruiken een eenrichtings gegevensstroom – alleen van parent naar childcomponenten.

Next.js vs React

Hoewel developers Next.js en React vaak voor hetzelfde doel gebruiken, zijn er enkele fundamentele verschillen tussen de twee.

Gebruiksgemak

Het is eenvoudig om te beginnen met Next.js en React. Elk vereist het uitvoeren van enkele commando’s in je terminal met behulp van npx, dat deel uitmaakt van de npm voor Node.js.

Voor Next.js is het eenvoudigste commando:

npx create-next-app

Zonder extra argumenten voor create-next-app, zal de installatie doorgaan in interactieve modus. Je wordt gevraagd om een projectnaam (die gebruikt zal worden voor de projectmap), en of je ondersteuning voor TypeScript en de code linter ESLint wilt opnemen.

Het ziet er ongeveer zo uit:

Bij het initialiseren van een React instantie bevat het eenvoudigste commando een naam voor de map van het project:

npx create-react-app new-app

Dit genereert een map met alle noodzakelijke initiële configuraties en dependencies:

Hoewel beide het gemakkelijk maken om te beginnen, vergeet niet dat Next.js bovenop React is gebouwd. Je kunt Next.js dus niet leren zonder eerst React te leren en te begrijpen hoe het werkt. Gelukkig heeft React een milde leercurve en is het geweldig voor beginners.

Het is ook belangrijk op te merken dat React relatief ongestructureerd is. Je moet een React router installeren en instellen en beslissen hoe je het ophalen van gegevens, het optimaliseren van afbeeldingen en het splitsen van code aanpakt. Deze opzet vereist dat je extra bibliotheken en tools installeert en configureert.

Next.js wordt daarentegen geleverd met deze tools vooraf geïnstalleerd en geconfigureerd. Met Next.js dient elk bestand dat wordt toegevoegd aan de map pages automatisch als route. Door deze ingebouwde ondersteuning is Next.js gemakkelijker om dagelijks mee te werken, zodat je meteen kunt beginnen met het coderen van de logica van je applicatie.

Next.js en React features

Omdat Next.js gebaseerd is op React, delen de twee een aantal features. Next.js gaat echter een stap verder en bevat van zichzelf extra features zoals routing, code-splitsing, pre-rendering en API ondersteuning. Dit zijn features die je zelf zou moeten configureren als je React gebruikt.

Gegevens ophalen

React rendert gegevens aan de clientside. De server stuurt statische bestanden naar de browser, en vervolgens haalt de browser de gegevens op uit API’s om de applicatie te vullen. Dit proces vermindert de prestaties van de app en levert een slechte gebruikerservaring op omdat de app langzaam laadt. Next.js lost dit probleem op door pre-rendering.

Met pre-rendering doet de server de nodige API calls en haalt de gegevens op voordat hij de applicatie naar de browser stuurt. De browser ontvangt dus kant-en-klare webpagina’s.

Pre-rendering kan verwijzen naar statische site generatie (SSG) of serverside rendering (SSR). Bij SSG worden de HTML pagina’s tijdens het bouwen gegenereerd en hergebruikt voor meerdere verzoeken. Next.js kan HTML pagina’s genereren met of zonder gegevens.

Hieronder staat een voorbeeld van hoe Next.js pagina’s genereert zonder gegevens:

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

Voor statische pagina’s die externe gegevens consumeren, gebruik je de functie getStaticProps(). Zodra je getStaticProps() van een pagina exporteert, zal Next.js de pagina pre-renderen met behulp van de props die het retourneert. Deze functie draait altijd op de server, dus gebruik getStaticProps() als de gegevens die de pagina gebruikt beschikbaar zijn op het moment van bouwen. Je kunt hem bijvoorbeeld gebruiken om blogberichten op te halen uit een 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 },
    };
};

In situaties waarin de paginapaden afhankelijk zijn van externe gegevens, gebruik je de functie getStaticPaths(). Dus, om een pad te maken op basis van de post ID, exporteer je de getStaticPaths() van de pagina.

Je zou bijvoorbeeld getStaticPaths() kunnen exporteren uit pages/posts/[id].js zoals hieronder getoond.

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() wordt vaak gekoppeld aan getStaticProps(). In dit voorbeeld zou je getStaticProps() gebruiken om de details van de ID in het pad op te halen.

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

In SSR worden de gegevens op het gevraagde moment opgehaald en naar de browser gestuurd. Om SSR te gebruiken, exporteer je de getServerSide() props functie van de pagina die je wilt renderen. De server callt deze functie bij elk verzoek, wat SSR nuttig maakt voor pagina’s die dynamische gegevens gebruiken.

Je kunt het bijvoorbeeld gebruiken om gegevens op te halen uit een nieuws 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 } }
}

De gegevens worden bij elk verzoek opgehaald en via props doorgegeven aan de Nieuws component.

Code splitsen

Code splitsen is het opdelen van code in brokken die de browser op verzoek kan laden. Het vermindert de hoeveelheid code die tijdens de eerste lading naar de browser wordt gestuurd, omdat de server alleen stuurt wat de gebruiker nodig heeft. Bundlers als Webpack, Rollup en Browserify ondersteunen het splitsen van code in React.

Next.js ondersteunt het splitsen van code out of the box.

Met Next.js wordt elke pagina in code gesplitst, en het toevoegen van pagina’s aan de applicatie vergroot de bundel niet. Next.js ondersteunt ook dynamische imports, waarmee je JavaScript modules kunt importeren en dynamisch laden tijdens runtime. Dynamische import draagt bij aan snellere pagina’s omdat bundels lazy geladen worden.

Bijvoorbeeld, in de Home component hieronder zal de server de hero component niet opnemen in de initiële bundel.

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

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

In plaats daarvan zal het fallback element van de suspense worden gerenderd voordat de hero component wordt geladen.

API ondersteuning in Next.js vs React

Met de Next.js API routing feature kun je backend en frontend code schrijven in dezelfde codebase. Elke pagina die is opgeslagen in de map /pages/api/ wordt gekoppeld aan de route /api/*, en Next.js behandelt die als een API eindpunt.

Je kunt bijvoorbeeld een pages/api/user.js API route maken die de naam van de huidige gebruiker als volgt retourneert:

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

Als je de https://app-url/api/user URL bezoekt, zie je het object gebruikersnaam.

{
        username: 'Jane'
}

API routes zijn handig als je de URL van een dienst die je benadert wilt maskeren of omgevingsvariabelen geheim wilt houden zonder een hele backend applicatie te coderen.

Prestaties

Next.js is ongetwijfeld superieur in zijn vermogen om beter presterende apps te maken met een vereenvoudigd proces. SSR en SSG Next.js applicaties presteren beter dan clientside rendering (CSR) React applicaties. Door het ophalen van gegevens op de server en het verzenden van alles wat de browser nodig heeft om te renderen, elimineert Next.js de noodzaak voor een data-fetch verzoek aan API’s. Dit betekent snellere laadtijden.

Omdat Next.js clientside routing ondersteunt, hoeft de browser niet telkens gegevens van de server op te halen als een gebruiker naar een andere route navigeert. Bovendien maakt de Next.js afbeeldingscomponent automatische afbeeldingsoptimalisatie mogelijk. Afbeeldingen worden alleen geladen als ze de viewport binnenkomen. Waar mogelijk serveert Next.js ook afbeeldingen in moderne formats zoals WebP.

Next.js biedt ook lettertype optimalisaties, slimme route prefetching, en bundeling optimalisaties. Deze optimalisaties zijn niet automatisch beschikbaar in React.

Ondersteuning

Omdat React al langer bestaat dan Next.js, heeft het een uitgebreidere community. Veel React developers adopteren echter Next.js, dus die community groeit gestaag. Developers vinden gemakkelijker bestaande oplossingen voor problemen die ze tegenkomen dan dat ze oplossingen vanaf nul moeten opbouwen.

Next.js heeft daarnaast uitstekende documentatie met uitgebreide voorbeelden die gemakkelijk te begrijpen zijn. Ondanks zijn populariteit is de documentatie van React niet erg makkelijk te navigeren.

Samenvatting

Kiezen voor Next.js of React komt neer op de eisen van je applicatie.

Next.js verbetert de mogelijkheden van React door structuur en tools te bieden die de prestaties verbeteren. Deze tools, zoals routing, codesplitsing en beeldoptimalisatie, zijn ingebouwd in Next.js, wat betekent dat developers niets handmatig hoeven te configureren. Dankzij deze mogelijkheden is Next.js gemakkelijk te gebruiken, en kunnen developers meteen beginnen met het coderen van de bedrijfslogica.

Door de verschillende renderopties is Next.js geschikt voor serverside gerenderde applicatie of applicaties die statische generatie en Node.js serverside rendering combineren. Dankzij de optimalisatiefunctie van Next.js is het ook perfect voor sites die snel moeten zijn, zoals e-commerce winkels.

React is een JavaScript bibliotheek waarmee je robuuste frontendapplicaties kunt maken en opschalen. De syntaxis is daarnaast eenvoudig, vooral voor developers met een JavaScript achtergrond. Bovendien heb je controle over de tools die je in je applicatie gebruikt en hoe je ze configureert.

Ben jij bezig met het plannen van je eigen applicatie om de wereld over te nemen? Kijk dan eens naar Kinsta’s Node.js applicatiehosting voor diensten die React en Next.js ondersteunen.

Salman Ravoof

Salman Ravoof is een autodidactische webdeveloper, schrijver, creator en een groot bewonderaar van Free and Open Source Software (FOSS). Naast techniek is hij enthousiast over wetenschap, filosofie, fotografie, kunst, katten en eten. Lees meer over hem op zijn website en kom in contact met Salman op X.

• Website
• LinkedIn
• Twitter