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:
- Rebranding: Deployment-Plattform Zeit erfindet sich neu
- Was ist eigentlich React?
- Webpack-Core-Member Johannes Ewald: „Ein Open-Source-Projekt ist kein Startup“
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