App Router: Optimierung von Schriftarten und Bildern

Im vorherigen Kapitel haben Sie gelernt, wie Sie Ihre Next.js-Anwendung gestalten können. Lassen Sie uns nun an Ihrer Startseite weiterarbeiten, indem wir eine benutzerdefinierte Schriftart und ein Hero-Bild hinzufügen.

Warum Schriftarten optimieren?

Schriftarten spielen eine wichtige Rolle beim Design einer Website, aber die Verwendung benutzerdefinierter Schriftarten kann die Leistung beeinträchtigen, wenn die Schriftdateien abgerufen und geladen werden müssen.

Cumulative Layout Shift ist eine Metrik, die von Google verwendet wird, um die Leistung und Benutzererfahrung einer Website zu bewerten. Bei Schriftarten tritt Layout Shift auf, wenn der Browser Text zunächst in einer Fallback- oder Systemschriftart rendert und ihn dann gegen eine benutzerdefinierte Schriftart austauscht, sobald diese geladen ist. Dieser Austausch kann dazu führen, dass sich die Textgröße, der Abstand oder das Layout ändert, wodurch umliegende Elemente verschoben werden.

Mock-UI, die das erste Laden einer Seite zeigt, gefolgt von einem Layout-Shift beim Laden der benutzerdefinierten Schriftart.

Next.js optimiert Schriftarten in der Anwendung automatisch, wenn Sie das Modul next/font verwenden. Es lädt Schriftdateien während des Builds und hostet sie zusammen mit Ihren anderen statischen Assets. Das bedeutet, dass beim Besuch Ihrer Anwendung keine zusätzlichen Netzwerkanfragen für Schriftarten erforderlich sind, die die Leistung beeinträchtigen würden.

Hinzufügen einer primären Schriftart

Fügen wir eine benutzerdefinierte Google-Schriftart zu Ihrer Anwendung hinzu, um zu sehen, wie das funktioniert.

Erstellen Sie in Ihrem Ordner /app/ui eine neue Datei namens fonts.ts. In dieser Datei werden die Schriftarten gespeichert, die in Ihrer Anwendung verwendet werden.

Importieren Sie die Schriftart Inter aus dem Modul next/font/google – dies wird Ihre primäre Schriftart sein. Geben Sie dann an, welches Subset Sie laden möchten. In diesem Fall 'latin':

/app/ui/fonts.ts

import { Inter } from 'next/font/google';
 
export const inter = Inter({ subsets: ['latin'] });

Fügen Sie die Schriftart schließlich dem <body>-Element in /app/layout.tsx hinzu:

/app/layout.tsx

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

Durch das Hinzufügen von Inter zum <body>-Element wird die Schriftart in Ihrer gesamten Anwendung angewendet. Hier fügen Sie auch die Tailwind-Klasse antialiased hinzu, die die Schriftart glättet. Diese Klasse ist nicht zwingend erforderlich, aber sie verbessert das Erscheinungsbild.

Öffnen Sie Ihren Browser, rufen Sie die Entwicklertools auf und wählen Sie das body-Element aus. Sie sollten sehen, dass Inter und Inter_Fallback nun unter den Stilen angewendet werden.

Übung: Hinzufügen einer sekundären Schriftart

Sie können Schriftarten auch spezifischen Elementen Ihrer Anwendung hinzufügen.

Jetzt sind Sie dran! Importieren Sie in Ihrer fonts.ts-Datei eine sekundäre Schriftart namens Lusitana und weisen Sie sie dem <p>-Element in Ihrer /app/page.tsx-Datei zu. Neben der Angabe eines Subsets wie zuvor sollten Sie auch verschiedene Schriftgewichte angeben, z.B. 400 (normal) und 700 (fett).

Wenn Sie fertig sind, erweitern Sie den folgenden Codeausschnitt, um die Lösung zu sehen.

Hinweise:

Wenn Sie unsicher sind, welche Gewichtsoptionen Sie einer Schriftart zuweisen sollen, überprüfen Sie die TypeScript-Fehler in Ihrem Code-Editor.

Besuchen Sie die Google Fonts-Website und suchen Sie nach Lusitana, um zu sehen, welche Optionen verfügbar sind.

Lesen Sie die Dokumentation zum Hinzufügen mehrerer Schriftarten und die vollständige Liste der Optionen.

Schließlich verwendet auch die <AcmeLogo />-Komponente Lusitana. Sie wurde auskommentiert, um Fehler zu vermeiden. Sie können sie jetzt wieder einkommentieren:

/app/page.tsx

// ...
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
        <AcmeLogo />
        {/* ... */}
      </div>
    </main>
  );
}

Großartig, Sie haben zwei benutzerdefinierte Schriftarten zu Ihrer Anwendung hinzugefügt! Als Nächstes fügen wir ein Hero-Bild zur Startseite hinzu.

Warum Bilder optimieren?

Next.js kann statische Assets wie Bilder im übergeordneten Ordner /public bereitstellen. Dateien in /public können in Ihrer Anwendung referenziert werden.

Mit regulärem HTML würden Sie ein Bild wie folgt hinzufügen:

<img
  src="/hero.png"
  alt="Screenshots der Dashboard-Projekts, Desktop-Version"
/>

Das bedeutet jedoch, dass Sie manuell:

Sicherstellen müssen, dass Ihr Bild auf verschiedenen Bildschirmgrößen responsiv ist.
Bildgrößen für verschiedene Geräte angeben müssen.
Layout-Shift beim Laden der Bilder verhindern müssen.
Bilder, die sich außerhalb des Viewports befinden, lazy laden müssen.

Die Bildoptimierung ist ein umfangreiches Thema in der Webentwicklung, das als eigenes Spezialgebiet betrachtet werden kann. Anstatt diese Optimierungen manuell zu implementieren, können Sie die next/image-Komponente verwenden, um Ihre Bilder automatisch zu optimieren.

Die `<Image>`-Komponente

Die <Image>-Komponente ist eine Erweiterung des HTML-<img>-Tags und bietet automatische Bildoptimierung, wie z.B.:

Automatische Verhinderung von Layout-Shift beim Laden von Bildern.
Größenanpassung von Bildern, um zu vermeiden, dass große Bilder an Geräte mit kleinerem Viewport gesendet werden.
Standardmäßiges Lazy Loading von Bildern (Bilder laden, wenn sie in den Viewport gelangen).
Bereitstellung von Bildern in modernen Formaten wie WebP und AVIF, wenn der Browser diese unterstützt.

Hinzufügen des Desktop-Hero-Bilds

Verwenden wir die <Image>-Komponente. Wenn Sie sich den Ordner /public ansehen, werden Sie feststellen, dass dort zwei Bilder vorhanden sind: hero-desktop.png und hero-mobile.png. Diese beiden Bilder sind völlig unterschiedlich und werden je nach Gerät des Benutzers angezeigt – Desktop oder Mobil.

Importieren Sie in Ihrer /app/page.tsx-Datei die Komponente aus next/image. Fügen Sie dann das Bild unter dem Kommentar hinzu:

/app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { lusitana } from '@/app/ui/fonts';
import Image from 'next/image';
 
export default function Page() {
  return (
    // ...
    <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
      {/* Hero-Bilder hier hinzufügen */}
      <Image
        src="/hero-desktop.png"
        width={1000}
        height={760}
        className="hidden md:block"
        alt="Screenshots des Dashboard-Projekts, Desktop-Version"
      />
    </div>
    //...
  );
}

Hier setzen Sie die width auf 1000 und die height auf 760 Pixel. Es ist eine gute Praxis, die width und height Ihrer Bilder festzulegen, um Layout-Shift zu vermeiden. Diese Werte sollten das gleiche Seitenverhältnis wie das Quellbild haben. Diese Werte bestimmen nicht die gerenderte Größe des Bildes, sondern die Größe der tatsächlichen Bilddatei, um das Seitenverhältnis zu verstehen.

Sie werden auch die Klasse hidden bemerken, die das Bild auf Mobilgeräten aus dem DOM entfernt, und md:block, die das Bild auf Desktop-Geräten anzeigt.

So sollte Ihre Startseite jetzt aussehen:

Gestylte Startseite mit einer benutzerdefinierten Schriftart und einem Hero-Bild

Übung: Hinzufügen des mobilen Hero-Bilds

Jetzt sind Sie wieder dran! Fügen Sie unter dem gerade hinzugefügten Bild eine weitere <Image>-Komponente für hero-mobile.png hinzu.

Das Bild sollte eine width von 560 und eine height von 620 Pixeln haben.
Es sollte auf Mobilgeräten angezeigt und auf Desktop-Geräten ausgeblendet werden – Sie können die Entwicklertools verwenden, um zu überprüfen, ob die Desktop- und Mobilbilder korrekt ausgetauscht werden.

Wenn Sie fertig sind, erweitern Sie den folgenden Codeausschnitt, um die Lösung zu sehen.

Großartig! Ihre Startseite verfügt jetzt über eine benutzerdefinierte Schriftart und Hero-Bilder.

Empfohlene Lektüre

Es gibt noch viel mehr zu diesen Themen zu lernen, einschließlich der Optimierung entfernter Bilder und der Verwendung lokaler Schriftdateien. Wenn Sie tiefer in Schriftarten und Bilder einsteigen möchten, lesen Sie:

Optimierung von Schriftarten und Bildern

On this page