Getting Started

Welkom bij de Next.js Cheat Sheet! Je bouwt hier dezelfde Workout Tracker als bij MERN — maar dan met Next.js. Vergelijk de twee en zie hoe anders (en makkelijker) het kan.

💡 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 aanmaken
React frontend apart (Vite) Frontend zit 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

Wat is Next.js?

Next.js is 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

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

Hoe te gebruiken

  • Nieuw? Volg het Leerpad onderaan
  • Elke pagina bouwt voort op de vorige
  • Alle code is klaar om te copy-pasten

Setup & Installatie

Installeer Next.js en maak je project aan.

Basis

Next.js Installatie

Maak een nieuw Next.js project aan met de App Router.

Mappenstructuur & Routing

Begrijp hoe Next.js werkt met mappen en bestanden.

Basis

Mappenstructuur

Leer de speciale bestanden en mappen in Next.js kennen.

 Basis

Routing & Pagina's

Maak pagina's en navigeer tussen routes met next/link.

Data & Logic

Haal data op en verwerk het in je componenten.

Data

Server & Client Components

Begrijp het verschil en wanneer je welke gebruikt.

 Data

API Routes

Bouw backend endpoints in hetzelfde Next.js project.

 Data

Data Fetching

Haal workouts op uit je API in Server Components.

Authenticatie

Voeg inloggen en registreren toe aan je Workout Tracker.

Advanced

Auth Setup

Installeer NextAuth en configureer inloggen met email en wachtwoord.

 Advanced

Registreren & Inloggen

Maak de registratie- en loginformulieren.

 Advanced

Protected Routes

Beveilig pagina's zodat alleen ingelogde gebruikers ze kunnen zien.

Afwerking & Deployment

Maak je app mooi en zet hem live.

Basis

Styling

Stijl je app met CSS Modules of Tailwind CSS.

 Advanced

Deployment op Vercel

Zet je Workout Tracker live in enkele minuten.

Leerpad

Nieuw? Volg deze volgorde en bouw stap voor stap je Workout Tracker:

Start hier — Fundament

  1. Next.js Installatie — Project aanmaken
  2. Mappenstructuur — Hoe Next.js werkt
  3. Routing & Pagina's — Overzicht- en detailpagina

Daarna — Data & Backend

  1. Server & Client Components — Wanneer wat gebruiken
  2. API Routes — Backend endpoints bouwen
  3. Data Fetching — Workouts ophalen uit de API

Authenticatie toevoegen

  1. Auth Setup — NextAuth installeren en configureren
  2. Registreren & Inloggen — Formulieren bouwen
  3. Protected Routes — Pagina's beveiligen

Afronding

  1. Styling — App mooi maken
  2. Deployment — Live zetten op Vercel

Tips

App Router

Gebruik altijd de App Router, niet de Pages Router

Server by default

Componenten zijn standaard Server Components

"use client"

Alleen nodig voor state, events en browser APIs

.env.local

Nooit secrets in je code, altijd in .env.local