Neues bei Next.js

Next.js 10: Neue Image-Komponente integriert
Keine Kommentare

Next.js 10 ist da. Das Update bringt einige Neuerungen mit, darunter beispielsweise eine eigene Komponente zur Optimierung von Bildern. Aber das ist nicht die einzige Neuerung im Release. Auch für das Routing gab es beispielsweise ein Update. Dadurch soll die Internationalisierung leichter werden.

Bilder stellen noch immer einen signifikanten Faktor bei der Optimierung der Ladezeiten im Web dar. Darum bringt Next.js 10 nun eine eigene Komponente mit, die auf die Verkürzung der Ladezeiten in diesem Kontext ausgelegt ist. next/image sorgt dafür, dass Bilder automatisch per Lazy-Loading geladen werden, sodass Bilder außerhalb des gerade aktiven Viewports keinen Traffic verursachen. Entwickler können für die initiale Ansicht ihrer Anwendung eine manuelle Auswahl an Bildern treffen, die bevorzugt behandelt werden. Außerdem verlangt die neue Komponente eine Angabe zu den Bildmaßen im finalen Layout, die bereits im Ladeverhalten berücksichtigt wird und trotzdem responsiv bleibt. Ebenso kann die Erzeugung kleinerer Bild-Versionen für Mobilgeräte direkt durch die Komponente erledigt werden. Die neue Komponente bietet also vor allem eine Arbeitserleichterung für Entwickler, die entsprechende Features nicht mehr selbst integrieren müssen.

IT Security Camp im Februar 2021

Mit Christian Schneider

Christian ist als freiberuflicher Whitehat Hacker, Trainer und Security-Coach tätig. Als Softwareentwickler mit mittlerweile 20 Jahren Erfahrung fand er 2005 seinen Themenschwerpunkt im Bereich IT-Security.

Interview mit Christian Schneider zum Thema „DevSecOps“.

DevSecOps ist, bezogen auf Security-Checks, die logische Fortführung der Automatisierung im DevOps-Sinne

Internationales Routing mit Next.js 10

Für die Internationalisierung von Anwendungen bringt Next.js 10 ebenfalls eine wichtige Neuerung mit. Angepasst wurde der Router, der nun sowohl über Sub-Path-URLs (z. B. „…/en/blog“ als auch auf Ebene der Top-Level-Domain auf verschiedene Lokalisationen einer Website umleiten kann. Um die richtige Adresse für einen Nutzer auszuwählen, können mit Next.js gebaute Anwendungen nun auch die jeweils vom Nutzer bevorzugte Sprache erkennen. Dabei wird die entsprechende Route anhand des Accept-Language-Headers im Browser erkannt. Hier geht es also auch um die Usability beim Anwender der mit Next.js entwickelten Produkte. Während Nutzer auf vielen Websites manuell über ein Menü auswählen müssen, welche Sprache sie bevorzugt, setzt Next.js hier auf einen Automatismus. Das Next.js-Team plant, in Zukunft weitere Features für die Internationalisierung zu integrieren, durch die eine Nutzung mit den entsprechenden React-Libraries ermöglicht werden soll.

Next.js 10 hat außerdem ein großes Update für die integrierten Analytics erhalten, die jetzt nicht mehr nur punktuell eingesetzt werden können, sondern kontinuierlich. Daneben haben es zahlreiche weitere Neuerungen in das Release geschafft, die im Blogpost dazu nachgelesen werden können.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -