Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) · Les

Optimalisatie van afbeeldingen en lettertypen

Gebruik de ingebouwde Image- en Font-componenten van Next.js voor automatische optimalisatie en betere laadprestaties.

Les 1 van 411 stappen

Optimalisatie van afbeeldingen en lettertypen is een gratis Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)-les op CoddyKit. Dit is les 1 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions). Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.

Waarom assets optimaliseren?

Webprestaties zijn cruciaal voor de gebruikerservaring en SEO. Grote afbeeldingen en niet-geoptimaliseerde lettertypen kunnen je website aanzienlijk vertragen.

Next.js biedt ingebouwde componenten om deze assets automatisch te optimaliseren, waardoor je toepassingen sneller en efficiënter worden.

Uitdagingen bij het laden van afbeeldingen

Traditioneel krijgen ontwikkelaars met de volgende uitdagingen rond afbeeldingen te maken:

Grote bestandsgroottes: Trage downloads en hoog bandbreedtegebruik.
Onjuiste afmetingen: Enorme afbeeldingen aanbieden op kleine schermen.
Verschuivingen in de lay-out (CLS): Afbeeldingen die laat laden en inhoud verplaatsen.
Toegankelijkheid: Ontbrekende alt-attributen.

Maak kennis met `next/image`

De Image-component van Next.js (uit next/image) is een krachtig hulpmiddel dat deze problemen automatisch oplost. De component verzorgt het volgende:

Automatische optimalisatie: Afbeeldingen converteren naar moderne indelingen zoals WebP.
Responsieve afmetingen: Verschillende afbeeldingsgroottes aanbieden op basis van het apparaat.
Lazy loading: Afbeeldingen pas laden wanneer ze de viewport binnenkomen.
CLS voorkomen: Ervoor zorgen dat afbeeldingen al vóór het laden ruimte innemen.

Basisgebruik van `next/image`

Als je Image wilt gebruiken, importeer je deze eenvoudig en vervang je je standaard <img>-tags. Je moet de props width, height en alt opgeven.

Probeer dit voorbeeld uit te voeren (ervan uitgaande dat /my-image.jpg in je map public staat):

import Image from 'next/image';

export default function HomePage() {
  return (
    <div>
      <h1>Optimized Image</h1>
      <Image
        src="/my-image.jpg"
        alt="A beautiful landscape"
        width={500}
        height={300}
      />
      <p>This image is now optimized!</p>
    </div>
  );
}

Belangrijke props voor afbeeldingen

Bekijk de essentiële props voor de Image-component:

src: Pad naar je afbeelding (lokaal of extern).
alt: Cruciaal voor toegankelijkheid en SEO.
width, height: De intrinsieke afmetingen opgeven om verschuivingen in de lay-out te voorkomen.
priority: (Optioneel) De afbeelding onmiddellijk laden als deze boven de vouw staat.

Afbeeldingslay-out met `fill`

Gebruik de prop fill voor afbeeldingen die hun bovenliggende container moeten vullen. Dit is ideaal voor hero-afbeeldingen of achtergronden.

Het bovenliggende element heeft position: 'relative' nodig om als container voor de gevulde afbeelding te fungeren.

import Image from 'next/image';

export default function Banner() {
  return (
    <div style={{
      position: 'relative',
      width: '100%',
      height: '200px',
      backgroundColor: '#eee'
    }}>
      <Image
        src="/banner.jpg"
        alt="Website banner"
        fill
        style={{ objectFit: 'cover' }}
        sizes="(max-width: 768px) 100vw, 50vw"
      />
      <h2 style={{ position: 'absolute', color: 'white', zIndex: 10 }}>
        Awesome Banner
      </h2>
    </div>
  );
}

Waarom lettertypen optimaliseren?

Aangepaste lettertypen geven je site een eigen karakter, maar het kunnen grote bestanden zijn die prestatieproblemen veroorzaken, zoals:

FOIT (Flash of Invisible Text): De tekst blijft onzichtbaar totdat het lettertype is geladen.
FOUT (Flash of Unstyled Text): De tekst wordt eerst in een standaardlettertype weergegeven en daarna vervangen.
Grote bundels: Lettertypebestanden vergroten het totale paginagewicht.

De module next/font van Next.js helpt deze uitdagingen aan te pakken.

Google Fonts optimaliseren

next/font/google optimaliseert Google Fonts automatisch, downloadt ze tijdens het bouwen en host ze zelf met sterke caching. Hierdoor zijn externe netwerkaanvragen niet nodig en wordt het laden consistenter.

Pas de klassenaam van het lettertype toe op je HTML of op een specifiek element:

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap', // Prevents FOIT
});

export default function AppLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <h1>My App Header</h1>
        {children}
      </body>
    </html>
  );
}

Lokale lettertypen gebruiken

Gebruik next/font/local voor zelfgehoste lettertypen (lettertypen die je zelf aanlevert). Deze module werkt vergelijkbaar met next/font/google en optimaliseert het laadproces voor je lokale bestanden.

Plaats je lettertypebestanden (bijvoorbeeld .woff2) in de map public of in een speciale map fonts.

import localFont from 'next/font/local';

const myCustomFont = localFont({
  src: './fonts/MyCustomFont.woff2',
  display: 'swap',
});

export default function AboutPage() {
  return (
    <div className={myCustomFont.className}>
      <h2>About Us</h2>
      <p>This page uses a custom font.</p>
    </div>
  );
}

Je assets optimaliseren

Welke van de volgende opties zijn voordelen van het gebruik van de componenten Image en Font van Next.js voor assetoptimalisatie?

Beantwoord dit in de interactieve les

Samenvatting: geoptimaliseerde assets

Je hebt geleerd hoe Next.js je helpt om belangrijke assets zoals afbeeldingen en lettertypen te optimaliseren:

De component next/image biedt automatische optimalisatie, lazy loading en voorkomt CLS.
De module next/font zorgt voor efficiënt laden van zowel Google-lettertypen als lokale lettertypen, waardoor de prestaties en visuele stabiliteit verbeteren.

Door deze componenten te gebruiken, verbeter je de snelheid en gebruikerservaring van je toepassing aanzienlijk!

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: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Optimalisatie van afbeeldingen en lettertypen” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackontwikkeling met Next.js 15 (App Router + Server Actions), waaronder “Optimalisatie van afbeeldingen en lettertypen”, 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) bevat in totaal 4 lessen.

Wat leer ik in “Optimalisatie van afbeeldingen en lettertypen”?

Gebruik de ingebouwde Image- en Font-componenten van Next.js voor automatische optimalisatie en betere laadprestaties. Je oefent met Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) te beginnen?

Ervaring vooraf is niet nodig. Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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 1 van 4.

Hoe lang duurt de les “Optimalisatie van afbeeldingen en lettertypen”?

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 Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)?

Ja. Elke les over Fullstackontwikkeling met Next.js 15 (App Router + Server Actions) 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

Optimalisatie van afbeeldingen en lettertypen
Analyse van bundelgrootte
Geavanceerde cachingstrategieën
UI streamen met Suspense en laadstatussen

← Terug naar Fullstackontwikkeling met Next.js 15 (App Router + Server Actions)