Next.js 15 Fullstack Web Apps · Lektion

Bild- und Font-Optimierung

Optimieren Sie Bilder mit `next/image` und verwalten Sie Fonts effizient, um Ladezeiten zu verkürzen.

Bild- und Font-Optimierung ist eine kostenlose Next.js 15 Fullstack Web Apps-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Next.js 15 Fullstack Web Apps-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Why Optimize Images & Fonts?

Optimizing images and fonts is crucial for a fast-loading website. Large files slow down your page, impacting user experience and SEO.

Faster Loading: Users don't wait for slow pages.
Improved SEO: Search engines favor faster sites.
Better UX: Smooth, responsive feel.
Lower Bandwidth: Saves data for users.

Next.js Image Component

Next.js provides a powerful next/image component. It automatically optimizes images for you, handling responsiveness, lazy loading, and format conversion to modern formats like WebP.

Using next/image ensures your images are served in the most efficient way possible, often without you needing to do manual optimization.

Using the Image Component

To use next/image, import it and then define your image's src, alt text, width, and height. The width and height are crucial for preventing layout shifts (CLS).

import Image from 'next/image';

export default function MyImage() {
  return (
    <Image
      src="/my-photo.jpg"
      alt="A descriptive alt text"
      width={500}
      height={300}
    />
  );
}

Layout Modes & Responsiveness

next/image offers different layout modes to control how images scale:

intrinsic (default): Scales down for smaller viewports, but doesn't scale up beyond its original size.
fixed: Image is fixed width and height.
fill: Image fills its parent element, useful for background images or when the image dimensions are unknown. Requires the parent to have position: relative.

Loading Priority with `priority`

For images above the fold (visible when the page first loads), you should add the priority prop. This tells Next.js to preload the image, improving your site's Largest Contentful Paint (LCP) metric.

Only use priority for critical images, like hero banners. Overusing it can negate its benefits.

import Image from 'next/image';

export default function HeroSection() {
  return (
    <Image
      src="/hero-banner.jpg"
      alt="Hero banner for the website"
      width={1200}
      height={600}
      priority
    />
  );
}

The Need for Font Optimization

Custom fonts can significantly impact performance. Large font files mean longer download times, leading to 'flash of unstyled text' (FOUT) or 'flash of invisible text' (FOIT).

Optimizing fonts reduces file size and ensures they load smoothly, improving the visual experience and preventing layout shifts.

Google Fonts with `next/font`

Next.js 15 simplifies using Google Fonts with next/font/google. It automatically self-hosts fonts, reduces layout shifts (CLS), and improves privacy by avoiding direct requests to Google.

Import your desired font, then apply it to your HTML elements.

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

// Configure the Inter font
const inter = Inter({ subsets: ['latin'] });

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  );
}

Self-Hosting Local Fonts

For self-hosted fonts (fonts you provide yourself), use next/font/local. This allows you to bundle your font files directly with your application, giving you full control over their delivery.

Define your font source and apply it just like Google Fonts.

import localFont from 'next/font/local';

// Configure a local custom font
const myCustomFont = localFont({ src: './my-custom-font.woff2' });

export default function MyPage() {
  return (
    <h1 className={myCustomFont.className}>
      My Custom Title
    </h1>
  );
}

Font Loading Strategies

To further optimize font loading:

display: swap: This CSS property shows fallback text immediately while the custom font loads, preventing 'flash of invisible text' (FOIT). next/font handles this by default.
Subset Fonts: Only include the characters you need from a font to reduce file size.
Preload Critical Fonts: For your most important fonts, consider preloading them using <link rel="preload"> in your document's head.

Image Optimization Check

Which of the following are benefits of using the next/image component in a Next.js application?

Recap: Optimized for Performance

Great job! You've learned how to significantly boost your Next.js app's performance by optimizing images and fonts.

Use next/image for automatic image optimization, lazy loading, and layout shift prevention.
Leverage the priority prop for critical above-the-fold images.
Utilize next/font/google and next/font/local for efficient, self-hosted font loading, which also prevents layout shifts.

These practices lead to faster, more user-friendly applications.

Häufig gestellte Fragen

Ist die Lektion „Bild- und Font-Optimierung“ kostenlos?

Ja — der vollständige Text von „Bild- und Font-Optimierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Next.js 15 Fullstack Web Apps-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Next.js 15 Fullstack Web Apps-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Bild- und Font-Optimierung“?

Optimieren Sie Bilder mit `next/image` und verwalten Sie Fonts effizient, um Ladezeiten zu verkürzen. Du übst Next.js 15 Fullstack Web Apps mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Next.js 15 Fullstack Web Apps zu starten?

Keine Vorkenntnisse erforderlich. Next.js 15 Fullstack Web Apps auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Bild- und Font-Optimierung“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Next.js 15 Fullstack Web Apps-Lektion Code schreiben und ausführen?

Ja. Jede Next.js 15 Fullstack Web Apps-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Next.js 15 Fullstack Web Apps