Next.js 5: Zones & TypeScript-Support

Next.js 5 bringt TypeScript-Support mit
Kommentare

Next.js 5 ist da und bringt eine globale Verfügbarkeit von Webpack mit. Damit können Entwickler nun in Next.js auch mit TypeScript arbeiten. Neu sind außerdem die Next.js Zones, mit denen Anwendungen über verschiedene Server hinweg verbunden werden können, sowie viele weitere neue Features.

Next.js ist ein Tool für das serverseitige Rendern von statischen Files für React-Anwendungen und bekommt seinen Namen vom zentralen Interface, das über den Befehl next zum Entwicklen von Apps, next build für die Vorbereitung auf die Production und weitere ähnliche Eingaben gesteuert wird. Zu Version 5 wurde unter der Haube einiges verändert: Webpack war in Next.js bisher als Decorator Function implementiert, die nur für Client-Bundles genutzt werden konnte. Die Toolchain für das serverseitige Rendering war bisher hingegen nicht in Next.js verfügbar. Mit Next.js Version 5 kann Webpack nun aber universell eingesetzt werden. Dazu wird das neue isServer-Property an die Decorator-Function übergeben. Dadurch kann nun das gesamte Ökosystem der Webpack-Loaders für Next.js verwendet werden, wie dem Blogpost zum Release von Next.js 5 zu entnehmen ist.

Webpack serverseitig nutzbar

Zu den neuen Features, die über die universelle Verfügbarkeit von Webpack realisiert wurden, gehört unter anderem, dass nun CSS-Dateien importiert werden und Webpack CSS Loaders genutzt werden können. Eine Anleitung dazu kann im Next.js-Blog gefunden werden. Bislang stehen die Packages next-css, next-less und next-sass zur Verfügung. Künftig soll jedoch über die Community ein Ökosystem an Packages aufgebaut werden.

TypeScript in Next.js

Die wohl größte Neuerungen, die durch die universelle Verfügbarkeit von Webpack entsteht, ist aber der Support für TypeScript. Zwar wird TypeScript erst ab Babel 7 durch den Compiler unterstützt. Mit einer Erweiterung der Webpack-Config in Next.js können Entwickler aber bereits jetzt auf TypeScript zugreifen. Dazu muss ts-loader in der Config-Datei aktiviert werden. Zur Integration von TypeScript in Projekte steht außerdem das Plugin next-typescript zur Verfügung.

Neu sind auch die sogenannten Next.js Zones, die eine Verbindung von verschiedenen Next.js-Anwendungen miteinander erlauben, auch wenn diese nicht im selben Repository oder auf dem gleichen Server liegen. Dazu können nun Links verwendet werden, was die Arbeit an Web-Anwendungen vereinfachen soll.

Weitere Neuerungen in Next.js 5

Weitere neue Features von Next.js umfassen einen verbesserten Support für React Altlibs und Module Overloading sowie die optionale Nutzung von externen Sourcemaps in der Production. Auch an den Build-Zeiten in der Production wurde gearbeitet. Diese und alle weiteren Änderungen haben Tim Neutkens und Arunoda Susiripala im Blogpost zum Release zusammengefasst. Weitere Informationen zum Release gibt es in den Release Notes auf GitHub.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -