Next.js 8: Erstellungsprozess mit 16-fach besserer Speichernutzung
(Grafik: Zeit Inc.)
Das Framework Next.js, das das Entwickeln einer App mit React und JavaScript ermöglicht, erreicht die Major-Version 8. Next.js sorgt mit Features wie serverseitigem Rendering und automatischem Code-Splitting für eine bessere Performance der Anwendungen.
Das hat sich getan
Im Bereich der serverlosen Infrastruktur hat es in der neuen Version einige Optimierungen gegeben. Die Zuverlässigkeit und Skalierbarkeit des serverlosen Deployment wurde verbessert, indem jede Seite im Pages-Verzeichnis zu einem alleinstehenden Lambda wird. Zudem stellt Next.js eine Low-Level-API für das serverlose Deployment. Serverless Computing bietet einige Vorteile; darunter Kostenabrechnung nach Nutzung, automatische Skalierung und das blitzschnelle bereitstellen neuer Ressourcen. Next.js hat einen Serverless-Modus, der in der next.config.js aktiviert werden kann.
module.exports = {
target: "serverless",
}Zudem wurde die Speicherauslastung während des Erstellungsprozesses stark reduziert. Dafür wurde die Leistung und Ressourcenverwendung des Webpack-Ökosystems verbessert. Das ermöglicht eine bis zu 16-fach bessere Speichernutzung. Ohne Leistungseinbußen wird so Speicher schneller freigegeben und Prozesse laufen auch mit vielen Seiten stabiler.
We are making contributions to Webpack to improve Next.js's (and the rest of the ecosystem's!) build performance and resource utilization.
— Guillermo ▲ (@rauchg) January 16, 2019
*16 times better memory usage with no degradation in performance*
Brought to you by the one and only @connordav_is pic.twitter.com/9EOGY4eJzP
Außerdem wurde eine Möglichkeit hinzugefügt, Umgebungsvariablen einzusetzen. In der next.config.js existiert jetzt der Schlüssel env, unter dem beliebig viele Werte hinzugefügt werden können, auf die dann mittels process.env.customKey in der Anwendung zugegriffen werden kann. Konkret sieht das dann wie folgt aus:
In der next.config.js:
module.exports = {
env: {
customKey: 'CustomValue'
}
}Beispielsweise in der index.js:
return <h1>Der Wert von customKey ist {process.env.customKey}</h1>Außerdem wurde in Next.js 8 an vielen Stellschrauben gedreht, um Performance, Stabilität und Speichernutzung zu verbessern. So können Seiten mit dem Prefetch-Attribut nun vorgeladen werden, die initiale HTML-Dateigröße wurde erneut um 23 Prozent reduziert und der statische Export wurde verschnellert. Den kompletten Artikel zur neuen Version 8 findet ihr im Next.js-Blog.
Mit einem Befehl auf Version 8
Die Next.js 8 Version ist mit allen neuen Features und Änderungen komplett abwärtskompatibel. Deswegen können bestehende Next.js-Apps mit nur einem Befehl aktualisiert werden.
npm i next@latest react@latest react-dom@latestNichtsdestotrotz ist es natürlich bei Updates immer ratsam, zuvor ein entsprechendes Backup durchzuführen.
Passend dazu: