News

Next.js 8: Erstellungsprozess mit 16-fach besserer Speichernutzung

(Grafik: Zeit Inc.)

Next.js sorgt für bessere Performance bei der Entwicklung einer React-App. Mit dem jüngsten Update werden die serverlose Infrastruktur, Speicherauslastung und vieles mehr optimiert.

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.

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@latest

Nichtsdestotrotz ist es natürlich bei Updates immer ratsam, zuvor ein entsprechendes Backup durchzuführen.

Passend dazu:

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung