JavaScript-Framework Next.js 13.4: App Router erreicht stabile Version
Das Release stabilisiert den App Router und erhebt den JavaScript-Bundler und webpack-Nachfolger Turbopack in den Beta-Status.
(Bild: nattaphol phromdecha/Shutterstock.com)
Vercel hat ein neues Minor Release seines React-Frameworks Next.js veröffentlicht. Version 13.4 bringt Stabilität für den App Router, führt experimentelle Server Actions ein und schickt den JavaScript-Bundler Turbopack vom Alpha- in den Beta-Status. An dem Release haben neben über 2600 einzelnen Entwicklerinnen und Entwicklern sowie dem Core-Team bei Vercel auch Partnerunternehmen wie Google und Meta mitgewirkt.
Stabilisierung des neuen App Router
Wie das Entwicklungsteam ausführt, geht Next.js mit der Stabilisierung des App Router in die "nächste Generation" des Frameworks. Der Router sei der Kern von Next.js, aber es gehe nicht nur um den Router selbst, sondern auch wie er sich mit weiteren Bestandteilen integriert, etwa dem Data Fetching.
Version 13.0 führte das neue app/-Verzeichnis als Ergebnis des Layouts RFC in einer Beta-Version ein. Der nun als stabil geltende App Router besitzt eine vollständig überarbeitete Architektur, die auf React Server Components aufsetzt. Dadurch konnte das Entwicklungsteam Next.js-spezifische APIs entfernen, die ursprünglich die React Primitives erweitern sollten. So ist es nun nicht mehr notwendig, eine benutzerdefinierte _app-Datei zum Anpassen des globalen Shared Layout zu verwenden.
Vercel zeigt die bisherige Variante
// Pages Router
// pages/_app.js
// This "global layout" wraps all routes. There's no way to
// compose other layout components, and you cannot fetch global
// data from this file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}und das Vorgehen mit dem neuen App Router
// New: App Router ✨
// app/layout.js
//
// The root layout is shared for the entire application
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
// app/dashboard/layout.js
//
// Layouts can be nested and composed
export default function DashboardLayout({ children }) {
return (
<section>
<h1>Dashboard</h1>
{children}
</section>
);
}Turbopack startet in die Beta-Phase
Ebenfalls erstmals in Next.js 13.0 als Alpha vorgestellt, hat Turbopack die erste Beta-Version erreicht. Der auf Rust aufsetzende JavaScript-Bundler soll seinen beliebten Vorgänger webpack ablösen und sich durch eine deutlich erhöhte Performance auszeichnen. Laut dem Entwicklungsteam hat Turbopack inzwischen weitere Features erhalten, wenngleich noch keine Parität mit webpack und Next.js herrscht. Die meisten Use Cases sollen damit dennoch bereits umsetzbar sein. In der Beta-Phase soll der Fokus darauf liegen, bestehende Bugs zu beheben und weiter an der Stabilität zu arbeiten.
Die Beta-Version lässt sich in Next.js 13.4 mittels next dev --turbo verwenden.
Alle weiteren Details zum neuen Release hat das Entwicklungsteam in einem Blogeintrag zusammengestellt.
(mai)