Durch die Zusammenarbeit mit dem Chrome-Team im Projekt Aurora zielt dies Webframework gen optimierte Vorgaben für jedes dies UX von Webanwendungen.
(Bild: Trismegist san/Shutterstock.com)
Developer Von
- Rainald Menge-Sonnentag
Das Team hinter Next. js setzt für Version 11 des React-Frameworks auf optimierte Vorgaben für die User Experience (UX) von Webanwendungen. Grundlage ist die Zusammenarbeit mit dem Chrome-Entwicklungsteam, die in einem sogenannten Conformance-Regelsatz als Teil von Projekt Aurora definiert ist. Außerdem ist Next.js Live für die Browser-basierte Entwicklung im Team als Preview erschienen.
Next.js 11 setzt das Conformance-System um, das Google parallel zum aktuellen Release des Frameworks vorgestellt hat. Es gehört zum Projekt Aurora, das in Kooperation eines Teils des Chrome-Teams mit den Maintainern von Frameworks wie Next.js, Nuxt und Angular entstanden ist. Es soll sicherstellen, dass Werkzeuge für die Webentwicklung passende Vorgaben für die Core Web Vitals (CWV) liefern, einem System zum Bewerten der UX, das Google 2020 ins Leben gerufen hat.
Neben grundsätzlichen Optimierungen der Vorgaben für das Conformance-System bietet Next.js eine direkte Anbindung an ESLint. Der Linter lässt sich von der Kommandozeile mit npx next lint aufrufen. Er setzt zwar die Installation von Next.js 11 voraus, kann aber ebenso Anwendungen untersuchen, die für ältere Versionen des Frameworks geschrieben sind.
Images im Blick
Für den Umgang mit Bildern hat Next.js einige Neuerungen an Bord. So ist nun keine Definition der Werte für width and height von Images mehr erforderlich, sondern das Framework ermittelt beim Import automatisch die Breite und Höhe, wie in folgendem Codebeispiel aus dem Next.js-Blog:
import Image from 'next/image' import author from '../public/me.png' export default function Home() { return ( // When importing the image as the source, you // don't need to define `width` and `height`. <Image src={author} alt="Picture of the author" /> ) }
Außerdem lassen sich mit dem Zusatz placeholder = "blur" unscharfe Platzhalter von Bildern verwenden, um während des Downloads größerer Images über langsame Internetverbindungen bereits eine Vorschau zu bieten. Das Framework kann die verschwommenen Vorschaubilder auf Wunsch dynamisch erzeugen.
Vorschau des Live-Codings im Browser
Next.js Live ist nun als Preview-Release verfügbar. Es bildet den Entwicklungszyklus direkt im Browser ab und ermöglicht die direkte Zusammenarbeit am Code im Team. Unter der Haube nutzt das Framework dazu ServiceWorker, WebAssembly und ES Modules.
Next.js Live integriert die Webentwicklung direkt in den Browser.
(Bild: Vercel)
Das Projekt zum Schreiben von Code im Browser wird als Open-Source-Projekt entwickelt. Für die erweiterte Zusammenarbeit im Team mit Codesynchronisierung, Authentifizierung, Kommentaren und dem Zeichnen in der Anwendung ist eine Anbindung an die kommerzielle Collaboration-Engine von Vercel erforderlich, dem Unternehmen, das mit Google und Facebook zusammen Next.js entwickelt.
Weitere Details zu Next.js 11 und Next.js Live wie die standardmäßige Verwendung von Webpack 5 lassen sich dem Blogbeitrag entnehmen.
(rme)
Quelle: www.heise.de