Fullstackwebapps met Next.js 15 · Les

Client Components en interactiviteit

Leer wanneer en hoe u Client Components gebruikt voor interactieve UI-elementen die state aan de clientzijde vereisen.

Les 2 van 411 stappen

Client Components en interactiviteit is een gratis Fullstackwebapps met Next.js 15-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackwebapps met Next.js 15. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Kennismaken met clientcomponenten

Welkom bij clientcomponenten! In Next.js met de App Router zijn componenten standaard servercomponenten. Soms heb je echter rechtstreeks in de browser interactiviteit nodig.

Clientcomponenten zijn speciale componenten die aan de clientzijde worden uitgevoerd, dus in de webbrowser van de gebruiker. Ze zijn onmisbaar voor het toevoegen van dynamische functies aan je applicatie.

Server versus client: snel overzicht

Laten we dit kort herhalen: servercomponenten renderen op de server en zijn ideaal voor statische inhoud, het ophalen van gegevens en het beperken van JavaScript aan de clientzijde.

Clientcomponenten maken daarentegen het volgende mogelijk:

Interactie van gebruikers (klikken, wijzigingen in invoer)
Status beheren met React-hooks (useState, useEffect)
Browser-specifieke API's benaderen (localStorage, window)

Ze brengen je gebruikersinterface tot leven!

Waarom clientcomponenten gebruiken?

Gebruik een clientcomponent wanneer je gebruikersinterface interactief moet zijn. Denk aan veelvoorkomende webfuncties:

Tellers en schakelaars: Elk element van de gebruikersinterface dat verandert op basis van invoer van de gebruiker.
Formulieren: Invoervelden, validatie en logica voor het verzenden.
Animaties: Animaties en overgangen aan de clientzijde.
Realtime-updates: Componenten die reageren op WebSocket-gebeurtenissen.
Browser-specifieke logica: Alles wat rechtstreeks de DOM aanpast of browser-API's gebruikt.

De instructie 'use client'

Om Next.js te laten weten dat een component een clientcomponent moet zijn, voeg je de instructie "use client" helemaal bovenaan het bestand toe, vóór alle imports.

Deze instructie is cruciaal! Ze markeert de grens tussen code aan de serverzijde en aan de clientzijde. Alles eronder (inclusief geïmporteerde modules) wordt behandeld als onderdeel van de clientbundel.

Een interactieve teller bouwen

Hier is een klassiek voorbeeld: een eenvoudige teller. Let op de instructie "use client" en het gebruik van Reacts hook useState om count te beheren.

De onClick-gebeurtenisafhandelaar van de knop werkt de status bij, waardoor de browser opnieuw rendert.

    "use client";
    import React, { useState } from 'react';

    export default function Counter() {
      const [count, setCount] = useState(0);

      return (
        <div>
          <p>Count: {count}</p>
          <button onClick={() => setCount(count + 1)}>
            Increment
          </button>
        </div>
      );
    }

Meer interactie verwerken

Clientcomponenten zijn niet alleen goed voor eenvoudige klikken, maar ook voor het beheren van invoer van gebruikers. Hier is een voorbeeld met een invoerveld dat tekst tijdens het typen weerspiegelt.

De gebeurtenisafhandelaar onChange werkt de status van de component bij telkens wanneer de invoerwaarde verandert.

    "use client";
    import React, { useState } from 'react';

    export default function InputMirror() {
      const [text, setText] = useState('');

      return (
        <div>
          <input
            type="text"
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="Type here..."
          />
          <p>You typed: {text}</p>
        </div>
      );
    }

Effecten aan de clientzijde met useEffect

De useEffect-hook is dé keuze voor neveneffecten die in de browser moeten worden uitgevoerd, zoals timers instellen, gegevens ophalen wanneer een component wordt gemount of luisteren naar externe gebeurtenissen.

Dit timercomponent gebruikt useEffect om de status seconds elke seconde bij te werken.

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

    export default function Timer() {
      const [seconds, setSeconds] = useState(0);

      useEffect(() => {
        const interval = setInterval(() => {
          setSeconds(prev => prev + 1);
        }, 1000);
        return () => clearInterval(interval); // Cleanup function
      }, []); // Empty dependency array means run once on mount

      return (
        <p>Timer: {seconds} seconds</p>
      );
    }

Toegang tot browserfuncties

Omdat Client Components in de browser worden uitgevoerd, hebben ze volledige toegang tot browserspecifieke API's en globale objecten zoals window en localStorage.

Dit voorbeeld laat zien hoe je gegevens uit localStorage leest en ernaar schrijft. Server Components hebben hier geen toegang toe.

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

    export default function LocalStorageDisplay() {
      const [storedValue, setStoredValue] = useState('');

      useEffect(() => {
        // This code runs only on the client after hydration
        const item = localStorage.getItem('myKey');
        if (item) {
          setStoredValue(item);
        }
      }, []);

      const saveValue = () => {
        localStorage.setItem('myKey', 'Hello from CoddyKit!');
        setStoredValue('Hello from CoddyKit!');
      };

      return (
        <div>
          <p>Stored: {storedValue || 'Nothing yet!'}</p>
          <button onClick={saveValue}>
            Save to LocalStorage
          </button>
        </div>
      );
    }

Client Components nesten

Je kunt Client Components nesten in andere Client Components en zelfs in Server Components. Een Server Component kan een Client Component als kind renderen.

Wanneer een Server Component een Client Component rendert, wordt de JavaScript-code van de Client Component naar de browser gestuurd. Zodra deze is geladen, wordt de component gehydrateerd (interactief gemaakt).

Zo kun je complexe gebruikersinterfaces bouwen waarin statische onderdelen op de server worden gerenderd en interactieve onderdelen op de client.

Client Component controleren

Het is tijd om je begrip van Client Components te testen!

Beantwoord dit in de interactieve les

Client Components: belangrijkste punten

Je beheerst nu de basis van Client Components!

Je markeert ze bovenaan het bestand met "use client".
Ze zijn essentieel voor interactiviteit, statusbeheer met Hooks (useState, useEffect) en het afhandelen van gebeurtenissen.
Ze hebben toegang tot browserspecifieke API's (bijvoorbeeld localStorage en window).
Server Components kunnen Client Components renderen, zodat je server- en clientrendering kunt combineren.

Vervolgens bekijken we geavanceerdere patronen voor het ophalen van gegevens, waarbij we Server Components en Client Components effectief inzetten!

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Client Components en interactiviteit” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackwebapps met Next.js 15, waaronder “Client Components en interactiviteit”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Wat leer ik in “Client Components en interactiviteit”?

Leer wanneer en hoe u Client Components gebruikt voor interactieve UI-elementen die state aan de clientzijde vereisen. Je oefent met Fullstackwebapps met Next.js 15 door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Fullstackwebapps met Next.js 15 te beginnen?

Ervaring vooraf is niet nodig. Fullstackwebapps met Next.js 15 op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Client Components en interactiviteit”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Fullstackwebapps met Next.js 15?

Ja. Elke les over Fullstackwebapps met Next.js 15 bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Fullstackwebapps met Next.js 15