Next.js Bilder und Schriftarten

Next.js bietet integrierte Optimierungsfunktionen für Bilder und Schriftarten, die darauf ausgelegt sind, Anwendungsleistung und Benutzererfahrung zu verbessern.

Die Bild- und Schriftartenoptimierungsfunktionen von Next.js bieten Entwicklern leistungsstarke Tools, die helfen, Hochleistungs-Webanwendungen mit exzellenter Benutzererfahrung zu erstellen.

MerkmalBeschreibung
BildoptimierungVerwendet die<Image>Komponente, unterstützt lokale und externe Bilder, optimiert automatisch Größe und Ladeleistung.
SchriftartenoptimierungVerwendet dienext/fontModul, unterstützt Google Fonts und lokale Schriftarten, hostet und optimiert das Laden automatisch.
Verwaltung statischer AssetsPlatzieren Sie statische Assets impublicVerzeichnis und greifen Sie über/filenamedirekt darauf zu.

Verwaltung statischer Assets

Next.js ermöglicht es, statische Assets (wie Bilder, Schriftarten usw.) im public-Verzeichnis zu speichern.

Auf diese Assets kann direkt über /filename zugegriffen werden.

Beispielhafte Verzeichnisstruktur:

my-next-app/
├── app/
├── public/
│   ├── images/
│   │   └── logo.png
│   └── fonts/
│       └── my-font.woff2
├── package.json
└── next.config.js

public/images/logo.pngErreichbar über/images/logo.png.

Bildoptimierung

Next.js bietet die<Image>Komponente zur Optimierung des Bildladens. Sie erweitert das HTML<img>Element und bietet die folgenden Funktionen:

  • Größenoptimierung: Stellt automatisch korrekt dimensionierte Bilder für verschiedene Geräte bereit, unterstützt moderne Bildformate (wie WebP).

  • Visuelle Stabilität: Verhindert Layoutverschiebungen während des Bildladens.

  • Schnelleres Laden: Verwendet natives Lazy Loading des Browsers und lädt nur, wenn das Bild in den Viewport gelangt.

  • Ressourcenflexibilität: Unterstützt die Größenanpassung von Bildern bei Bedarf, auch für Remote-Bilder.

Verwendung<Image>Komponenten

fromnext/imageImportiere die<Image>Komponente und verwende sie in deiner Komponente.

Beispiel

import Image from 'next/image';

export default function Page() {
  return <Image src="/images/logo.png" alt="Logo" width={500} height={300} />;
}

Lokale Bilder

Lokale Bilder können direkt aus dem public-Verzeichnis referenziert werden.

Beispiel

import Image from 'next/image';
import profilePic from './me.png';

export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Bild des Autors"
      Breite und Höhe werden automatisch aus der
      blurDataURL und placeholder sind optional
    />
  );
}

Remote-Bilder

Remote-Bilder erfordern die manuelle Angabe von Breite und Höhe, um Layout zu vermeiden.

Beispiel

import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Bild des Autors"
      width={500}
      height={500}
    />
  );
}

Remote-Bilder konfigurieren

Konfigurieren Sie die erlaubten Remote-Bild-Domains in next.config.js.

Beispiel

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
};

export default nextConfig;

Schriftartenoptimierung

Next.js bietet dienext/fontModul zur Optimierung des Ladens von Schriftarten. Es unterstützt das automatische Hosting von Schriftdateien, wodurch Datenschutz und Leistung verbessert werden.

Verwendung von Google Fonts

Schriftarten aus next/font/google importieren und sie auf HTML-Elemente anwenden.

Beispiel

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

const geist = Geist({
  subsets: ['latin'],
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  );
}

Wenn Sie nicht-variable Schriftarten verwenden, müssen Sie weight angeben:

Beispiel

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

const roboto = Roboto({
  Gewicht: '400',
  subsets: ['latin'],
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  );
}

Lokale Schriftarten verwenden

Lokale Schriftdateien aus next/font/local importieren.

Beispiel

import localFont from 'next/font/local';

const myFont = localFont({
  src: './my-font.woff2',
});

export default function Layout({ children }) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  );
}

Bei Verwendung mehrerer Schriftdateien:

Beispiel

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      Gewicht: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      Gewicht: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      Gewicht: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      Gewicht: '700',
      style: 'italic',
    },
  ],
});
Andere Erweiterungen