Wat is Next.js? Een begrijpelijke gids voor appbouwers

Next.js is een framework om websites en webapps met React te bouwen. React geeft je de bouwstenen van een interface — knoppen, formulieren, lijsten. Next.js voegt de rest van de website eromheen toe: pagina’s en URL’s, pagina’s op de server renderen zodat ze klaar zijn om te lezen, gegevens laden, en backendcode draaien in hetzelfde project. Het is open source, gemaakt door het bedrijf Vercel, en een van de meest gebruikte manieren om React-sites te bouwen.

Waarom Next.js ertoe doet als je met AI bouwt

Wanneer je een app beschrijft aan een AI-builder, moet die een technische basis kiezen. Die keuze bepaalt dingen waar je later om geeft:

• Zichtbaarheid in zoekmachines. Een openbare site die in Google moet scoren, heeft baat bij het verzenden van echte HTML, wat Next.js goed doet.
• Waar de backend staat. Next.js laat frontendpagina’s en servercode (zoals „sla dit formulier op” of „roep de betaal-API aan”) in één project leven.
• Hosting. Een Next.js-app met serverfuncties heeft een server nodig om op te draaien, terwijl een gewone Vite-app als statische bestanden kan worden aangeboden.

Mythex start nieuwe projecten standaard met Vite + React + TypeScript + Tailwind, en gebruikt Next.js wanneer je erom vraagt — „Gebruik Next.js” in je eerste prompt is genoeg (hoe de techniek wordt gekozen). Het helpt dus te weten wanneer dat de moeite waard is.

Een dagelijkse vergelijking

Als React een doos met hoogwaardige Lego-blokjes is, dan is Next.js een Lego-set met de handleiding, de bouwplaat en de onderdelen voor deuren en leidingen er al bij.

Je zou hetzelfde huis met losse blokjes kunnen bouwen — je moet dan zelf beslissen hoe de kamers met elkaar verbonden zijn, waar de voordeur komt en hoe het water binnenkomt. Next.js neemt die beslissingen voor je op een standaardmanier, zodat elk Next.js-project op dezelfde manier is opgebouwd en een nieuwe ontwikkelaar (of een AI) snel de weg vindt.

Wat Next.js aan React toevoegt

Next.js organiseert pagina’s op twee manieren. De App Router (de map app/) is de nieuwere en ondersteunt Server Components. De Pages Router (de map pages/) is de oorspronkelijke en wordt nog steeds ondersteund. Nieuwe projecten gebruiken over het algemeen de App Router. Als de code van je AI-builder of een tutorial er vreemd uitziet, is dit vaak de reden.

Een uitgewerkt voorbeeld: een openbare gids met lokale koffiezaken

Stel je voor: een site met koffiezaken in je stad, met een pagina per zaak, die je in zoekresultaten wilt zien.

Een Next.js-pagina voor één koffiezaak zou ongeveer er zo uit kunnen zien:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Wat er gebeurt wanneer iemand (of Google) /cafes/blue-door bezoekt:

1. Next.js koppelt de URL aan dat bestand. De map [slug] betekent „elke koffiezaak”.
2. Het onderdeel draait op de server, leest de koffiezaak uit de database en bouwt de HTML.
3. De browser ontvangt een volledige pagina met de naam en het adres van de zaak al erin — zonder te wachten tot JavaScript de gegevens ophaalt.

Met een client-side React-app zou de browser eerst een bijna lege pagina krijgen, dan JavaScript downloaden, dan de koffiezaak ophalen en dan tonen. Zoekmachines kunnen dat vaak aan, maar een volledig opgebouwde pagina is betrouwbaarder. Zie SEO voor met AI gebouwde websites.

Vergelijk dat met een dashboard voor medewerkers achter een login: zoekmachines kunnen dat sowieso niet zien, dus server-rendering levert er weinig voordeel op, en een eenvoudigere Vite-app is vaak de betere keuze.

Belangrijke termen

Veelvoorkomende misverstanden

• „Next.js vervangt React.” Dat doet het niet. Het gebruikt React. Je onderdelen zijn nog steeds React-onderdelen.
• „Next.js is altijd de betere keuze.” Het is krachtiger, maar ook meer om te begrijpen. Server-rendering, caching en het verschil tussen code voor de server en code voor de client zijn veelvoorkomende bronnen van verwarrende bugs. Voor een app die vooral achter een login zit, is een gewone React-app vaak eenvoudiger.
• „Next.js draait alleen op Vercel.” Het is open source en kan op elke Node.js-server of in een Docker-container draaien. Een volledig statische export is mogelijk als je geen serverfuncties gebruikt.
• „Next.js garandeert goede SEO.” Het maakt leesbare pagina’s makkelijker. Rankings hangen nog steeds af van titels, inhoud, snelheid en links.
• „Servercode in Next.js is automatisch privé.” Code die voor de client is bedoeld, belandt in de browser. Geheimen moeten in code die alleen op de server draait en in omgevingsvariabelen blijven.

Wat je aan je AI-builder kunt vragen

• „Gebruik Next.js met de App Router” — in je eerste prompt, als je dat wilt.
• „Welke pagina’s worden op de server gerenderd, welke zijn statisch en welke draaien in de browser — en waarom?”
• „Maak de openbare marketing- en overzichtspagina’s server-gerenderd of statisch, met goede titels en beschrijvingen.”
• „Houd API-sleutels in code die alleen op de server draait en in omgevingsvariabelen. Laat me zien waar elk ervan wordt gelezen.”
• „Heeft deze app Next.js nodig, of zou een Vite + React-app eenvoudiger zijn voor wat we bouwen?”

Next.js in Mythex

Mythex gebruikt standaard Vite + React + TypeScript + Tailwind en schakelt naar Next.js wanneer je dat in je prompt vraagt; het vroeg noemen bespaart credits vergeleken met later wisselen. Je ziet de app in de live Preview, en Publiceren zet hem live op een URL zonder dat je zelf hosting hoeft in te richten. De documentatie van Mythex vermeldt dat client-gerenderde single-page apps een zwakkere SEO hebben dan server-gerenderde of statische HTML, dus als voor een marketingsite zoekmachines belangrijk zijn, is het de moeite waard dat meteen te zeggen (SEO voor je app).

Veelgestelde vragen