News

React-Framework Next.js erreicht Version 9.5: Das ist drin

(Grafik: Vercel)

Das populäre React-Framework aus dem Hause Vercel hat Version 9.5 erreicht. Die neue Version bringt neben weiteren Performanz- auch SEO-Verbesserungen und Support für Webpack 5.

Next.js gibt es seit 2016. Das Framework ermöglicht das Erstellen serverseitig gerenderter React-Apps und kommt etwa in den Entwicklerteams von Netflix, Hulu, Tiktok und übrigens auch bei t3n zum Einsatz.

Incremental-Static-Regeneration

Mit der neuen Version verlässt ein Feature namens Incremental-Static-Regeneration die Betaphase. Der zugrundeliegende Mechanismus beruht auf dem Updaten bereits geladener Seiten, die bei Traffic-Aufkommen im Hintergrund erneut gerendert werden. Methoden zur statischen Site-Generation wurden bereits in Version 9.3 eingeführt – mit dem Ziel, die Vorzüge statischer Site-Generation mit dem erstklassigen Support für dynamische Daten zu vereinen für den das Framework bekannt ist.

Über die fallback: true Option in getStaticPaths können neue statische Pages jetzt während der Laufzeit registriert werden. Damit kann Next.js eine unbegrenzte Anzahl an Pages on Demand pre-rendern, die Größe des Datensatzes soll dabei keine Rolle spielen. Inspiriert von state-while-revalidate sorgt das Re-Rendering dafür, dass eingehender Datenverkehr ohne Unterbrechung bedient wird und die neu gerenderte Page erst gepusht wird, wenn sie vollständig generiert ist. Daneben ist mit Version 9.5 außerdem ein Preview-Mode verfügbar – beide Features werden ab sofort sowohl von next start als auch von der Vercel-Edge-Plattform unterstützt.

Neue basePath-Konfigurationsoption

Next.js-Projekte werden nicht immer zwangsläufig von der Root einer Domain gehostet. Wer ein Projekt von einem Unterpfad wie zum Beispiel /docs hosten wollte, musste bisher relativ viel extra Konfigurationsarbeit leisten. Diesen Pain-Point adressiert Version 9.5 über eine neue Konfigurationsoption namens basePath, die genau das vereinfachen soll.
Um von ihr Gebrauch zu machen, müsst ihr sie einfach nur zu eurer next.config.js hinzufügen:


// next.config.js

module.exports = {
basePath: '/docs'
}

Und euer Projekt wird in der Folge von dem hier angegebenen Pfad geroutet – im obenstehenden Beispiel wäre das /docs.

Wenn ihr via next/link und next/router auf andere Seiten des Projekts verlinkt, wird der Pfad automatisch angepasst. Entsprechend würde /about dann zu /docs/about werden.

export default function HomePage() {
return (

<a>About Page</a>

)
}

Obenstehender Code-Snippet führte dann zu folgendem HTML-Output: <a href="/docs/about">About Page</a>

Unterstützung für Rewrites, Redirects und Header

Eine weitere neue Konfigurationsoption für Next.js 9.5 heißt rewrites – sie erlaubt es, den Pfad eines incoming Requests auf einen anderen Zielpfad umzuleiten, eingeschlossen externer URL. Als nützlich erweisen könnte sich das neue Feature gerade auch für Teams, die Next.js Stück für Stück in ihre Projekte integrieren wollen.

Außerdem bringt Version 9.5 einen neuen redirects-Key für das Ändern der Routing-Struktur – also zum Beispiel für den Fall, dass ihr /blog zu /news bewegen wollt. Um zu überprüfen, ob für eine Route Redirects gesetzt sind, musstet ihr bislang einen Server oder eine Errorpage aufsetzen, was wohl signifikante Ergonomienachteile mit sich brachte. Ab Version 9.5 könnt ihr jetzt den redirects-Key nutzen, um eine Liste aller Redirects in eurer next.config.js aufzuführen.

Einer der Vorzüge von Next.js ist es, dass das Framework es euch erlaubt, statische Pages mit serverseitigem Rendering zu kombinieren. Serverseitiges Rendern erlaubt das Setzen von http-Headern für eingehende Request-Pfade, für statische Pages war das bislang nicht möglich. Über den headers-Key könnt ihr ab Version 9.5 eigene Header-Properties in eurer next.config.js definieren, die auf alle next.js-Routes angewandt werden.


// next.config.js
module.exports = {
async headers() {
return [
{
source: '/:path*',
headers: [
{
key: 'Feature-Policy',
// Disable microphone and geolocation
value: "microphone 'none'; geolocation 'none'"
}
]
}
]
}
}

Kontrolle über Trailing-Slashes

Beim erstmaligen Launch von Next.js war der Default, dass ein sogenannter Trailing-Slash /about/ grundsätzlich eine 404-Page zurückgibt. Dieses Verhalten wurde jetzt zugunsten von Entwicklerteams, die bestehende Projekte zu Next.js migrieren, angepasst. Über eine neue Konfigurationsoption namens trailingSlash, die ihr in eurer next.config.js nach Wunsch auf true oder false setzen könnt, könnt ihr dieses Verhalten künftig kontrollieren.

Weitere Performanzverbesserungen und Webpack-5-Support

Mit dem neuen Release werden JavaScript-Bundles künftig über Content-Hashes anstelle der Build-ID gecached. Zwischen Deployments müssen Pages, die nicht verändert wurden, damit nicht erneut geladen werden. Verbessert wurde in Version 9.5 auch Fast Refresh, ein seit Version 9.4 bestehendes Hot-Reloading-Feature, das jetzt unter anderem über eine neue überarbeitete Doku verfügt. Zudem bringt das Release eine neue --profile-flag, über die ihr React künftig auch in Production in euren Next.js-Projekten überwachen könnt. Weitere Neuerungen sind überarbeitete Catch-all-Routes-Optionen und Unterstützung für Webpack 5, das sich im Moment noch in der Betaphase befindet. Alle Neuerungen im Detail könnt ihr auf dem Vercel-Blog im Blogpost zum Release  nachlesen.

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.

Bitte schalte deinen Adblocker für t3n.de 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 70 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,
Luca Caracciolo (Chefredakteur t3n) & das gesamte t3n-Team

Anleitung zur Deaktivierung