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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

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