# Les 5 — Lesstof
## Next.js Basics — het React framework

**Vak:** Technical Foundations
**Vorige les:** Les 4 — TypeScript Fundamentals
**Volgende les:** Les 6 — Next.js QuickPoll deel 2

---

## Inhoud

1. [Waarom Next.js](#1-waarom-nextjs)
2. [App Router vs Pages Router](#2-app-router-vs-pages-router)
3. [Setup — eerste project](#3-setup--eerste-project)
4. [Folder-structuur](#4-folder-structuur)
5. [Pages + Layouts](#5-pages--layouts)
6. [Server Components vs Client Components](#6-server-components-vs-client-components)
7. [Routing — dynamic + nested](#7-routing--dynamic--nested)
8. [Data fetching basics](#8-data-fetching-basics)
9. [Styling met Tailwind](#9-styling-met-tailwind)
10. [Loading + Error states](#10-loading--error-states)
11. [QuickPoll — het project van deze les](#11-quickpoll--het-project-van-deze-les)

---

## 1. Waarom Next.js

React alleen is een UI-library — niet meer. Voor een echte website heb je nodig:
- Routing (welke URL → welke pagina)
- Server-side rendering (SEO + snelle first paint)
- API endpoints
- Image optimization, fonts, caching
- Deployment

**Next.js** voegt dit allemaal toe bovenop React. Standaard framework van Vercel.

### Waarom Next.js voor deze leerlijn

- Industrie-standaard sinds 2022
- Werkt naadloos met Vercel deploy (Les 15)
- Server Components + Client Components — modern paradigm
- TypeScript first-class
- AI tools (Cursor, v0) zijn geoptimaliseerd voor Next.js

Andere keuzes (Remix, Astro, SvelteKit) bestaan, maar Next.js is de breedst gebruikte.

---

## 2. App Router vs Pages Router

Next.js heeft twee router-systemen — historisch gegroeid:

### Pages Router (legacy, sinds 2016)

- `pages/` folder
- File = route. `pages/about.tsx` → `/about`
- `_app.tsx`, `_document.tsx`, `getServerSideProps`, ...

### App Router (sinds Next.js 13, default sinds 14)

- `app/` folder
- File = route. `app/about/page.tsx` → `/about`
- Server Components by default
- Layouts, nested routing, loading states als file
- React Server Components paradigm

**In deze leerlijn: App Router.** Alle nieuwe projecten = App Router.

---

## 3. Setup — eerste project

### Create

```bash
pnpm create next-app@latest quickpoll \
  --typescript --tailwind --app --no-src-dir --import-alias "@/*"
cd quickpoll
pnpm dev
```

Open `localhost:3000` → werkt.

### Wat krijg je out-of-the-box

- TypeScript geconfigureerd
- Tailwind CSS v4
- ESLint
- Hot reloading
- File-based routing
- Optimized fonts (Geist)

---

## 4. Folder-structuur

```
quickpoll/
├── app/
│   ├── layout.tsx        # Root layout — wraps every page
│   ├── page.tsx          # Homepage (/)
│   ├── globals.css       # Tailwind imports
│   ├── about/
│   │   └── page.tsx      # /about
│   └── poll/
│       └── [id]/
│           └── page.tsx  # /poll/123 (dynamic)
├── components/           # Herbruikbare components
├── lib/                  # Utility code
├── public/               # Static files
├── next.config.ts
├── tsconfig.json
└── package.json
```

### File-conventies

| Filename | Wat |
|----------|-----|
| `page.tsx` | De pagina-component voor deze route |
| `layout.tsx` | Wraps children met persistent UI |
| `loading.tsx` | Loading state |
| `error.tsx` | Error boundary |
| `not-found.tsx` | 404 voor deze route |
| `route.ts` | API endpoint |

---

## 5. Pages + Layouts

### Page

```tsx
// app/about/page.tsx
export default function AboutPage() {
  return <h1>About us</h1>;
}
```

### Layout

```tsx
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="nl">
      <body>
        <nav>...</nav>
        {children}
        <footer>...</footer>
      </body>
    </html>
  );
}
```

Layouts zijn **persistent** — niet ge-remount tussen pagina-navigaties. State blijft.

### Nested layouts

```
app/
├── layout.tsx           # Root — alle pagina's
├── (marketing)/
│   ├── layout.tsx       # Layout voor marketing pages
│   ├── page.tsx
│   └── about/page.tsx
└── dashboard/
    ├── layout.tsx       # Layout voor dashboard
    └── page.tsx
```

`(marketing)` = "route group" — geen URL-segment, alleen voor file-organisatie.

---

## 6. Server Components vs Client Components

App Router's grootste paradigm-shift.

### Server Component (default)

```tsx
// app/page.tsx — runt op de server
export default async function Home() {
  const data = await fetch("https://api.example.com/posts").then(r => r.json());
  return <ul>{data.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}
```

- Draait alleen op server
- Geen `useState`, geen `useEffect`, geen browser-APIs
- Mag `async` zijn — `await` data fetching direct
- Geen JavaScript naar client (kleinere bundle)

### Client Component

```tsx
// components/Counter.tsx
"use client";
import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

- `"use client"` directive bovenaan
- Gewoon React — hooks, events, state
- Wordt JavaScript naar browser

### Wanneer welke

| | Server | Client |
|---|--------|--------|
| Data fetching | ✓ | (kan, niet ideaal) |
| Hooks (useState, etc.) | ✗ | ✓ |
| Event handlers (onClick) | ✗ | ✓ |
| Browser APIs (localStorage) | ✗ | ✓ |
| SEO content | ✓ | (werkt, minder ideaal) |

**Vuistregel:** Server by default. `"use client"` alleen als nodig.

---

## 7. Routing — dynamic + nested

### Static route

```
app/about/page.tsx → /about
```

### Dynamic route

```
app/poll/[id]/page.tsx → /poll/abc-123
```

In de component:
```tsx
export default async function Poll({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  return <div>Poll {id}</div>;
}
```

Vanaf Next.js 16: `params` is een Promise (was object).

### Catch-all routes

```
app/docs/[...slug]/page.tsx → /docs/a/b/c
```

`params.slug` = `["a", "b", "c"]`.

### Link tussen pages

```tsx
import Link from "next/link";

<Link href="/about">About</Link>
<Link href={`/poll/${id}`}>Bekijk poll</Link>
```

`Link` = client-side navigatie (geen full page reload).

---

## 8. Data fetching basics

### In Server Component

```tsx
async function getPolls() {
  const res = await fetch("https://api.example.com/polls", {
    next: { revalidate: 60 }, // cache 60 sec
  });
  return res.json();
}

export default async function Home() {
  const polls = await getPolls();
  return <PollList polls={polls} />;
}
```

### Cache opties

```tsx
fetch(url, { cache: "force-cache" })        // permanent (default)
fetch(url, { next: { revalidate: 60 } })     // ISR — herval na 60s
fetch(url, { cache: "no-store" })            // nooit cachen (live)
```

### In Client Component

```tsx
"use client";
import { useEffect, useState } from "react";

export function Live() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch("/api/data").then(r => r.json()).then(setData);
  }, []);
  return data ? <p>{data.value}</p> : <p>Loading...</p>;
}
```

Voor interactiviteit. Of via TanStack Query (komt later).

---

## 9. Styling met Tailwind

Tailwind = utility-first CSS framework. Class per CSS-property.

### Basics

```tsx
<div className="flex items-center gap-4 p-4 bg-white rounded-lg shadow">
  <h2 className="text-2xl font-bold text-gray-900">Hello</h2>
  <p className="text-sm text-gray-500">World</p>
</div>
```

### Responsive

```tsx
<div className="text-sm md:text-base lg:text-lg">
```

- Default = mobile
- `md:` = tablet+ (768px+)
- `lg:` = desktop+ (1024px+)

### Hover, focus, dark

```tsx
<button className="bg-blue-500 hover:bg-blue-600 focus:ring-2 dark:bg-blue-700">
```

### Wanneer custom CSS

99% niet nodig. Bij echt aparte animations, complexe selectors → CSS module.

---

## 10. Loading + Error states

### loading.tsx

```tsx
// app/poll/[id]/loading.tsx
export default function Loading() {
  return <div className="animate-pulse">Loading poll...</div>;
}
```

Toont automatisch wanneer page-component nog `await` is.

### error.tsx

```tsx
"use client";
export default function Error({ error, reset }: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div>
      <h2>Oops: {error.message}</h2>
      <button onClick={reset}>Probeer opnieuw</button>
    </div>
  );
}
```

Vangt errors in deze route subtree.

### not-found.tsx

```tsx
export default function NotFound() {
  return <h1>404 — Pagina niet gevonden</h1>;
}
```

Custom 404 voor deze route. Trigger met `notFound()` helper.

---

## 11. QuickPoll — het project van deze les

We bouwen **QuickPoll** — een mini-app voor snelle peilingen. Stack: Next.js + TypeScript + Tailwind.

### Wat we deze les bouwen (Part 1)

- Setup van het project
- Homepage met form om nieuwe poll te maken
- Hardcoded poll-data in een TS-file (in-memory)
- Detail-pagina voor een poll
- Voting werkt via button-click (lokaal in state)

### Volgende les (Les 6 — Part 2)

- Server actions voor vote submission
- Loading + error states
- Polish van de UI
- Setup voor database (komt in Les 7)

### Architectuur

```
app/
├── page.tsx                # Homepage — lijst polls + create form
├── poll/
│   └── [id]/
│       └── page.tsx        # Detail page met voting
├── components/
│   ├── PollForm.tsx        # Client — create poll form
│   └── VoteForm.tsx        # Client — stemmen
└── lib/
    └── data.ts             # In-memory poll store
```

In Les 7 vervangen we `lib/data.ts` door echte Supabase queries — en QuickPoll wordt productie-ready.

---

## Bronnen

- **Next.js docs:** https://nextjs.org/docs
- **App Router intro:** https://nextjs.org/docs/app/getting-started
- **Server Components:** https://nextjs.org/docs/app/getting-started/server-and-client-components
- **Tailwind v4 docs:** https://tailwindcss.com/docs
- **Next.js Learn (interactief):** https://nextjs.org/learn
- **shadcn/ui (component library):** https://ui.shadcn.com
