Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Umgang mit Bildern in Next.js | Einrichtung Eines Next.js-Projekts
Next.js 14 Mastery Für Den Aufbau Moderner Webanwendungen

bookUmgang mit Bildern in Next.js

Bilder spielen eine bedeutende Rolle für das visuelle Erscheinungsbild jeder Website. Im Folgenden wird erläutert, wie sie in Next.js hinzugefügt werden können.

Die <Image>-Komponente ist eine erweiterte Version des herkömmlichen HTML-<img>-Tags und bietet eine Vielzahl automatischer Optimierungen. Sie wurde entwickelt, um den Anforderungen modernen Webdesigns gerecht zu werden, und sorgt für eine visuell stabile Benutzererfahrung, indem Layoutverschiebungen während der Ladephase minimiert werden. Die Komponente passt Bilder zudem intelligent an, was den Bandbreitenverbrauch auf Geräten mit kleineren Viewports reduziert und somit die Inhaltsauslieferung optimiert.

Zurück zum Projekt

Sehen wir uns an, wie Bilder in unser Projekt eingebunden werden können. Im Ordner public befinden sich die Dateien hero-desktop.png und hero-mobile.png. Diese sollen nun in die Datei app/page.tsx mit der Image-Komponente aus next/image eingefügt werden.

Nach dem Navigieren zur Startseite der App sollte das Bild sichtbar sein.

Für die mobile Version ein weiteres Bild mit einer Breite von 560px und einer Höhe von 620px hinzufügen. Bei Problemen kann auf die unten bereitgestellte Lösung zurückgegriffen werden.

In der Praxis

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 10

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.08

bookUmgang mit Bildern in Next.js

Swipe um das Menü anzuzeigen

Bilder spielen eine bedeutende Rolle für das visuelle Erscheinungsbild jeder Website. Im Folgenden wird erläutert, wie sie in Next.js hinzugefügt werden können.

Die <Image>-Komponente ist eine erweiterte Version des herkömmlichen HTML-<img>-Tags und bietet eine Vielzahl automatischer Optimierungen. Sie wurde entwickelt, um den Anforderungen modernen Webdesigns gerecht zu werden, und sorgt für eine visuell stabile Benutzererfahrung, indem Layoutverschiebungen während der Ladephase minimiert werden. Die Komponente passt Bilder zudem intelligent an, was den Bandbreitenverbrauch auf Geräten mit kleineren Viewports reduziert und somit die Inhaltsauslieferung optimiert.

Zurück zum Projekt

Sehen wir uns an, wie Bilder in unser Projekt eingebunden werden können. Im Ordner public befinden sich die Dateien hero-desktop.png und hero-mobile.png. Diese sollen nun in die Datei app/page.tsx mit der Image-Komponente aus next/image eingefügt werden.

Nach dem Navigieren zur Startseite der App sollte das Bild sichtbar sein.

Für die mobile Version ein weiteres Bild mit einer Breite von 560px und einer Höhe von 620px hinzufügen. Bei Problemen kann auf die unten bereitgestellte Lösung zurückgegriffen werden.

In der Praxis

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 10
some-alt