Wat is Next.js en hoe begin je ermee?

Als je nog niet weet wat een framework precies is of hoe frontend, backend en full-stack verschillen, lees dan eerst de pagina met de populairste frameworks. Hier begin je direct met Next.js. Dat is een full-stack framework dat bovenop React werkt. Het combineert de voorkant en de achterkant van je site. React helpt je de pagina op het scherm te tekenen, maar zorgt niet voor adressen, de server en het opslaan van gegevens. Next.js regelt die dingen wel. In deze pagina leer je hoe je een eerste project maakt en welke begrippen je nodig hebt.

Waarom kies je voor Next.js?

Vercel maakte Next.js. Het verscheen in 2016. Next.js is gebouwd bovenop React. Dat betekent dat je al je React-kennis meeneemt. Next.js voegt er extra functies aan toe.

Denk aan een huis dat je van React hebt gebouwd. Next.js zorgt voor de fundering, de leidingen en het dak. Die dingen hoef je niet meer zelf uit te zoeken.

Next.js heeft drie grote voordelen voor een beginner:

• Pagina's op basis van mappen. Een map met een bestand wordt automatisch een pagina met een adres.
• Pagina's die op de server klaarstaan. Zoekmachines zoals Google zien de inhoud direct. Dat is goed voor vindbaarheid.
• Ingebouwde optimalisaties. Plaatjes en code worden automatisch klein en snel gemaakt.

Hoe zet je een eerste Next.js-project op?

Je hebt Node.js nodig. Installeer het via de officiële Node.js-website. Daarna maak je een project met één commando:

Terminal

npx create-next-app@latest my-app
cd my-app
npm run dev

Wat doen deze commando's?

• npx create-next-app@latest my-app start de officiële opzetter. Die vraagt je een paar dingen, zoals of je TypeScript wil gebruiken. Kies voor een eerste project gerust de standaardoptie. Bij de vraag over de App Router kies je "Yes".
• cd my-app zet je in de nieuwe map.
• npm run dev start de ontwikkelserver op je eigen computer.

Open daarna http://localhost:3000 in je browser. Je ziet de startpagina van je eigen Next.js-project.

Lees de officiële gids

De vragen van de opzetter kunnen na een update veranderen. Check de officiële Next.js-installatiegids als je iets anders ziet dan hierboven.

Hoe ziet een Next.js-project eruit?

Een nieuw project bevat ongeveer deze onderdelen:

my-app/
  app/
    layout.tsx        ← de vaste opmaak die om elke pagina heen zit
    page.tsx          ← de startpagina (adres /)
    globals.css       ← algemene stijlen
  public/             ← bestanden zoals plaatjes die ongewijzigd blijven
  next.config.ts      ← instellingen voor Next.js
  package.json        ← de lijst met pakketten van je project

De map app is het hart van je project. Elke map erin met een page.tsx wordt een pagina. Een map app/over-ons met daarin een page.tsx geeft je het adres /over-ons. Je hoeft geen extra routes in te stellen. De mappen doen dat werk.

Hoe ziet een eerste Next.js-pagina eruit?

Open het bestand app/page.tsx. Vervang de inhoud door:

app/page.tsx

async function getUsers() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users')
    return response.json()
}

export default async function HomePage() {
    const users = await getUsers()

    return (
        <main>
            <h1>Onze gebruikers</h1>
            <ul>
                {users.map((user) => (
                    <li key={user.id}>{user.name}</li>
                ))}
            </ul>
        </main>
    )
}

Wat gebeurt hier?

• getUsers haalt gegevens op bij een externe bron. fetch is een ingebouwde functie om data op te halen.
• async en await zorgen dat de pagina wacht tot de gegevens binnen zijn. Denk aan wachten op een pakket dat met de post komt.
• Deze component draait op de server. De bezoeker krijgt de klare HTML en hoeft niet te wachten op extra JavaScript.
• users.map(...) maakt voor elke gebruiker een lijstitem. Dat ken je al uit de React-pagina.

Open http://localhost:3000 om het resultaat te zien. Je ziet een lijst met namen.

Welke kernbegrippen moet je kennen in Next.js?

• App Router is het systeem van mappen die pagina's worden. Het zit in de map app.
• Layouts zijn de vaste delen van je site, zoals een menu of een voettekst. Ze staan in een layout.tsx-bestand.
• Server Components draaien op de server. Ze zijn standaard in Next.js. Ze halen gegevens op zonder extra code voor de bezoeker.
• Client Components draaien in de browser. Gebruik ze voor interactie, zoals een klik of een invoerveld. Begin zo'n bestand met 'use client'.
• Route handlers zijn kleine server-functies in een route.ts-bestand. Ze maken het mogelijk een eigen API te bouwen.

Wil je deze begrippen uitgebreid zien? De officiële Next.js-documentatie heeft een tutorial en veel voorbeelden. Lees eerst de sectie over de App Router.

Wanneer kies je voor Next.js?

• Je gebruikt React en wil ook de achterkant in JavaScript of TypeScript schrijven.
• Vindbaarheid in zoekmachines is belangrijk, bijvoorbeeld voor een webwinkel of blog.
• Je bouwt een productieklare webapplicatie met snelle laadtijden.
• Je wil niet zelf alle onderdelen van de server en routering koppelen.

Next.js is niet het enige full-stack framework. Nuxt doet hetzelfde voor Vue, en SvelteKit doet het voor Svelte. Kijk op de React-pagina als je de basis wil opfrissen. Wil je de andere opties vergelijken? Lees dan de overzichtspagina.

Veelgemaakte fout

Vergeet je 'use client' niet als je een knop of invoerveld gebruikt met onClick of useState? Dan geeft Next.js een foutmelding. Zet die regel bovenaan het bestand als de component interactief moet zijn.

Wat leer je hierna?

Je kent nu de mappenstructuur van Next.js, hoe een pagina werkt en het verschil tussen server- en client-componenten. Probeer eens een tweede pagina toe te voegen in een nieuwe map. Daarna is het goed om te lezen over het ophalen van data en het werken met formulieren. De officiële Next.js-documentatie is daarvoor de beste bron.

Je zet nu grote stappen. Blijf experimenteren, want zo leer je het snelst!