Mappenstructuur

Overzicht

Na installatie ziet je project er zo uit:

workout-tracker/
├── .next/               ← build cache (automatisch aangemaakt, niet aanpassen)
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.js        ← Root layout (omhult alle pagina's)
│   └── page.js          ← Homepage (route: /)
├── public/              ← Statische bestanden (afbeeldingen etc.)
├── .gitignore
├── next.config.mjs
├── package.json
└── postcss.config.mjs

💡 Het belangrijkste om te onthouden

Alles wat in de app/ map staat bepaalt je routes. Een map = een URL. Dit is de kern van Next.js routing.

De app/ map

De app/ map is het hart van je Next.js project. Elke map erin wordt een URL route.

app/
├── page.js              → route: /
├── layout.js            → gedeelde wrapper
├── workouts/
│   ├── page.js          → route: /workouts
│   └── [id]/
│       └── page.js      → route: /workouts/123

Hoe werkt dit?

app/page.js → bezoekers zien / (homepage)
app/workouts/page.js → bezoekers zien /workouts
app/workouts/[id]/page.js → dynamische route zoals /workouts/42

💡 Analoog aan MERN

In MERN had je aparte backend routes (/api/workouts) en een aparte React app. In Next.js zit alles in één project, in de app/ map.

Speciale Bestanden

Next.js kent een aantal bestanden met een vaste naam die een speciale functie hebben:

layout.js — Gedeelde wrapper

Alles wat in layout.js staat, wordt getoond op elke pagina. Denk aan navigatie en footer.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="nl">
      <body>
        <nav>Workout Tracker</nav>
        {children}   {/* ← hier komt je pagina */}
      </body>
    </html>
  );
}

page.js — De pagina zelf

Dit is de inhoud van een specifieke route. Elke map heeft zijn eigen page.js.

// app/page.js  →  route: /
export default function Home() {
  return <h1>Welkom bij Workout Tracker</h1>;
}

loading.js — Laadscherm

Wordt getoond terwijl de pagina data ophaalt. Next.js toont dit automatisch.

// app/workouts/loading.js
export default function Loading() {
  return <p>Workouts laden...</p>;
}

error.js — Foutpagina

Wordt getoond als er iets fout gaat. Moet een Client Component zijn.

// app/workouts/error.js
'use client';

export default function Error({ error }) {
  return <p>Fout: {error.message}</p>;
}

not-found.js — 404 pagina

// app/not-found.js
export default function NotFound() {
  return <h2>Pagina niet gevonden</h2>;
}

💡 Overzicht speciale bestanden

Bestand	Functie
`layout.js`	Gedeelde wrapper om pagina's heen
`page.js`	Inhoud van de route
`loading.js`	Laadscherm tijdens data fetching
`error.js`	Foutpagina als iets misgaat
`not-found.js`	404 pagina

De public/ map

Afbeeldingen en andere statische bestanden zet je in public/. Ze zijn bereikbaar via de root URL.

public/
├── logo.png       →  bereikbaar via /logo.png
└── icons/
    └── dumbbell.svg  →  bereikbaar via /icons/dumbbell.svg

// Gebruik in een component:
<img src="/logo.png" alt="Logo" />

Project Opruimen

De standaard Next.js installatie bevat demo-content. Ruim dit op zodat je met een schone basis start.

Stap 1: Vervang app/page.js

// app/page.js
export default function Home() {
  return (
    <main>
      <h1>Workout Tracker</h1>
      <p>Bekijk je workouts</p>
    </main>
  );
}

Stap 2: Vervang app/globals.css

Verwijder alle inhoud uit globals.css en vervang met:

/* app/globals.css */
@import "tailwindcss";

Stap 3: Update app/layout.js

// app/layout.js
import './globals.css';

export const metadata = {
  title: 'Workout Tracker',
  description: 'Bijhouden van je workouts',
};

export default function RootLayout({ children }) {
  return (
    <html lang="nl">
      <body>
        {children}
      </body>
    </html>
  );
}

✅ Je hebt nu een schone basis

Sla op en check http://localhost:3000 — je ziet "Workout Tracker" als koptekst.

Checklist

✅ Check of je hebt:

Mappenstructuur begrepen
app/page.js opgeschoond
app/globals.css opgeschoond
app/layout.js bijgewerkt
"Workout Tracker" zichtbaar op http://localhost:3000

Volgende Stap

Structuur is helder! Tijd om pagina's en navigatie toe te voegen.

Routing & Pagina's →

Maak een overzichtspagina en detailpagina voor workouts