Cheat Sheet

Next.js

Bouw een fullstack Workout Tracker met de App Router, Server Components en API Routes.

Wat is Next.js?

Een framework gebouwd bovenop React. Het voegt dingen toe die React zelf niet heeft:

  • File-based routing — geen react-router nodig
  • Server Components — React-code die op de server draait
  • API Routes — backend endpoints in hetzelfde project
  • Automatische optimalisaties — afbeeldingen, fonts, performance

Ken je de MERN Workout Tracker al?

Dan herken je alles wat je hier bouwt. Dezelfde app — workouts toevoegen, bekijken en verwijderen — maar zonder aparte Express-backend. Alles zit in één Next.js-project.

MERN Next.js
server.js + Express app/api/workouts/route.js
workoutRoutes.js Map app/workouts/page.js
React-frontend apart (Vite) Frontend in hetzelfde project
useEffect om data op te halen async/await direct in component
CORS instellen Niet nodig — alles is één app
Twee terminals (backend + frontend) Één terminal: npm run dev

Next.js vs gewone React

React (Vite) Next.js
Aparte backend nodig Backend in hetzelfde project
React Router installeren Routing via mappenstructuur
Alles draait in browser Code kan op server draaien
Zelf deployen regelen 1-klik deploy op Vercel

Setup

1 onderwerp

Next.js Installatie

Een nieuw Next.js-project aanmaken met de App Router.

Mappenstructuur & Routing

2 onderwerpen

Mappenstructuur

De speciale bestanden en mappen in Next.js.

Routing & Pagina's

Pagina's maken en navigeren met next/link.

Data & Logic

3 onderwerpen

Server & Client Components

Het verschil en wanneer je welke gebruikt.

API Routes

Backend endpoints in hetzelfde Next.js-project.

Data Fetching

Workouts ophalen uit je API in Server Components.

Authenticatie

3 onderwerpen

Auth Setup

NextAuth installeren en inloggen met email + wachtwoord configureren.

Registreren & Inloggen

Registratie- en loginformulieren bouwen.

Protected Routes

Pagina's beveiligen voor alleen ingelogde gebruikers.

Afwerking & Deployment

2 onderwerpen

Styling

Stijl je app met CSS Modules of Tailwind CSS.

Deployment op Vercel

Zet je Workout Tracker live in enkele minuten.

Leerpad

Aanbevolen volgorde
  1. 1 Fundament Setup Mappenstructuur Routing
  2. 2 Data & Backend Server/Client API Routes Fetching
  3. 3 Auth Setup Register/Login Protected
  4. 4 Afronding Styling Deployment