Foutmeldingen

Een foutmelding lezen

Een foutmelding is geen straf, maar een hint. De computer vertelt je wat er mis is, en vaak ook waar.

Waar zie je de foutmelding?

• Terminal: waar npm run dev draait (fouten van de server)
• Browser: het rode Next.js-venster, of linksonder een rondje met het aantal issues

Zo pak je het aan

1. Lees de eerste rode regel. Die zegt wat er mis is
2. Zoek de bestandsnaam en het regelnummer, bijv. App.jsx:12. Daar zit de fout (of net een regel erboven)
3. Zoek je foutmelding hieronder op

Hook in Server Component

You're importing a component that needs useState. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the "use client" directive.

Wat betekent het? In Next.js zijn componenten standaard Server Components. Hooks zoals useState en useEffect werken alleen in een Client Component.

import { useState } from "react";

export default function Teller() {
  const [count, setCount] = useState(0);
  // ...
}

"use client";

import { useState } from "react";

export default function Teller() {
  const [count, setCount] = useState(0);
  // ...
}

"use client"; moet op de allereerste regel staan, nog boven de imports.

Event handlers in Server Component

Event handlers cannot be passed to Client Component props.

Wat betekent het? Je gebruikt onClick (of onChange, …) in een Server Component. Klikken gebeurt in de browser, dus dat moet in een Client Component.

Maak van het klikbare stuk een eigen component met "use client";:

// components/LikeButton.js
"use client";

export default function LikeButton() {
  return <button onClick={() => alert("Liked!")}>Like</button>;
}

Die kun je daarna gewoon gebruiken in je (server) page.js.

window / localStorage is not defined

ReferenceError: window is not defined

Wat betekent het? Je code draait (ook) op de server, en daar bestaat geen browser: geen window, document of localStorage.

"use client";

export default function Page() {
  const token = localStorage.getItem("token");
}

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

export default function Page() {
  const [token, setToken] = useState(null);

  useEffect(() => {
    setToken(localStorage.getItem("token")); // draait alleen in de browser
  }, []);
}

Zelfde fout voor localStorage is not defined en document is not defined.

Hydration failed

Hydration failed because the server rendered HTML didn't match the client.

Wat betekent het? De HTML die de server maakte is anders dan wat de browser daarna maakt.

Veelvoorkomende oorzaken:

• Iets dat elke keer anders is: new Date(), Math.random()
• localStorage of window gebruiken tijdens het renderen → zet het in een useEffect (zie hierboven)
• Foute HTML: een <div> of <p> binnen een <p>
• Browser-extensies die de pagina aanpassen → test in een incognitovenster

async in Client Component

async/await is not yet supported in Client Components, only Server Components.

Wat betekent het? Je hebt een Client Component ("use client") async gemaakt. Dat mag alleen bij Server Components.

Kies één van de twee:

• Data ophalen op de server: haal "use client" weg. Dan mag async wel
• Data ophalen in de browser: laat async weg en gebruik useEffect

Zie Data Fetching.

404 voor je eigen pagina

404 | This page could not be found.

Wat betekent het? Next.js vindt geen pagina voor deze URL.

• Het bestand moet precies page.js heten (niet about.js of Page.js)
• De mapnaam is de URL: app/about/page.js → /about
• Staat de map wel ín app/?

Module not found: Can't resolve

Module not found: Can't resolve '@/components/Navbar'

Wat betekent het? Next.js kan het bestand niet vinden.

• @/ verwijst naar de hoofdmap van je project. Staat je components-map daar?
• Hoofdletters? navbar.js en Navbar.js zijn verschillend
• Een package? Dan is het niet geïnstalleerd: npm install

NextRouter was not mounted

Error: NextRouter was not mounted.

Wat betekent het? Je importeert useRouter uit de verkeerde plek. In de App Router komt hij uit next/navigation.

import { useRouter } from "next/router";

import { useRouter } from "next/navigation";

Mijn .env variabele is undefined

process.env.API_URL → undefined

Wat betekent het? Geen echte foutmelding, maar je variabele is leeg in de browser.

• In de browser (Client Component) zie je alleen variabelen die beginnen met NEXT_PUBLIC_
• Heb je .env.local aangepast? Start de dev server opnieuw

# .env.local
NEXT_PUBLIC_API_URL=http://localhost:3000/api   # zichtbaar in de browser
MONGODB_URI=mongodb+srv://...                     # alleen op de server

No HTTP methods exported

No HTTP methods exported in 'app/api/workouts/route.js'. Export a named export for each HTTP method.

Wat betekent het? In een route.js moet je een functie per methode exporteren (GET, POST, …), geen export default.

export default async function handler(req, res) {
  // ...
}

export async function GET() {
  return Response.json({ workouts: [] });
}

export async function POST(request) {
  const body = await request.json();
  // ...
}

Hostname not configured (next/image)

Invalid src prop (https://images.unsplash.com/photo-123) on `next/image`, hostname "images.unsplash.com" is not configured under images in your `next.config.js`

Wat betekent het? Voor afbeeldingen van een andere website moet je die website eerst toestaan.

// next.config.mjs
const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "images.unsplash.com" },
    ],
  },
};

export default nextConfig;

Start daarna de dev server opnieuw.