Hinter Next.js steckt Guillermo Rauchs Startup Vercel. (Bild: Vivan Cromwell/Zeit)
Das populäre React-Framework Next.js zur Erstellung serverseitig gerenderter React-Apps gibt es seit 2016. Mittlerweile kommt es in vielen Entwicklerteams weltweit zum Einsatz. Zum Beispiel bei Netflix, Tiktok oder Hulu – und übrigens auch bei t3n.
E-Commerce-Kit
Wohl eines der spannendsten neue Features ist das Next.js Commerce-Kit, ein All-in-One-Starter-Kit für die Erstellung performanter E-Commerce-Pages. Vercel hat das Kit in Zusammenarbeit mit Bigcommerce entwickelt. Mit wenigen Handgriffen können Entwickler damit einen Onlineshop zusammenklicken – einfach das Repo klonen, deployen und beliebig customizen.
Next.js Analytics
Site-Performance ist einer der wichtigsten Erfolgsfaktoren, nicht nur, aber gerade auch für E-Commerce-Anbieter. Dauert der Ladeprozess länger als drei Sekunden, verlassen mittlerweile offenbar mehr als 50 Prozent aller User eine soeben besuchte Website. Die Gründe für eine miese Performance sind jedoch nicht immer offensichtlich. Mögliche Verursacher sind zum Beispiel Schriften, Skripte von Drittanbietern oder zu große Video- oder Bilddateien.
Das neue Analytics-Feature in Next.js 10 soll helfen, dieses Problem zu lösen: Es erlaubt die kontinuierliche Messung der Performance einer Anwendung. Das Analysetool misst nicht nur die App-Performance auf euren eigenen Geräten, sondern auch die auf den Endgeräten der Nutzer. So sollen Entwickler künftig einen validen Gesamteindruck der Performance ihrer Anwendung erhalten.
Internationalized Routing
Die Lokalisierung von Webinhalten ist ein wichtiger Erfolgsfaktor. Die meisten Menschen ziehen es vor, wenn zum Beispiel Produktbeschreibungen in ihrer Muttersprache verfasst sind. Die beiden wichtigsten Faktoren bei der Internationaliserung eines Projekts sind dessen Lokalisierung – der Begriff bezeichnet das Aufbereiten von Content für die jeweiligen Zielkulturen und -sprachen – und Routing. Viele React-Bibliotheken bieten Features, die das Erstellen einer mehrsprachigen Anwendung unterstützen, bei den meisten müssen Entwickler das Routing allerdings manuell vornehmen. Next.js 10 bietet laut Blogpost zum Release internationalisiertes Routing und ein Spracherkennungs-Feature. Das Routing-Feature für die Internationalisierung eurer Anwendungen unterstützt den hybriden Ansatz von Next.js. Das heißt, auch für internationalisierte Web-Projekte habt ihr pro Page die Wahl zwischen statischer Page-Generation und Server Rendering. Fürs Routing könnt ihr wählen zwischen Subpath-Routing und Domain-Routing. Für beide Strategien müssen Entwickler zunächst sogenannte UTS Locale Identifiers – oder Locales – konfigurieren. Ein solcher Identifier besteht aus Sprache-Region-Script, wobei die Angaben Region und Script freiwillig sind. en-US wäre zum Beispiel der Locale Identifier für US-Englisch.
// next.config.js
module.exports = {
i18n: {
locales: ['en', 'nl'],
defaultLocale: 'en'
}
}
Erst dann könnt ihr euch für eine der beiden Routing-Methoden entscheiden. Details dazu sowie zu allen anderen Neuerungen, darunter
- Unterstützung für React 17
- Fast Refresh für MDX
- automatisches Resolving des
href-Attributs - und eine neue Image-Komponente für die automatisierte Optimierung von Bilddateien
sind nachzulesen auf dem Vercel-Blog.
