BackZurück zum Blog

Next.js 13.3

Next.js 13.3 führt dynamische Open-Graph-Bilder, erweiterte statische Exporte, parallele Routen und Interception, OTEL-Unterstützung und mehr ein.

Next.js 13.3 fügt beliebte, von der Community gewünschte Funktionen hinzu, darunter:

Aktualisieren Sie heute durch Ausführen von:

Terminal
npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Wir nähern uns der Markierung des App-Routers als stabil in der nächsten Minor-Version und konzentrieren uns nun auf Leistungsoptimierungen, Verhaltensverbesserungen und Fehlerbehebungen.

Während wir noch an einigen Funktionen wie Mutations arbeiten, erwarten wir nicht, dass diese die API-Oberfläche anderer App-Router-Funktionen beeinflussen. Wir freuen uns darauf, zu sehen, was Sie mit dem App-Router bauen, und sind gespannt auf Ihr Feedback.

Dateibasierte Metadata-API

In Next.js 13.2 haben wir eine neue Metadata-API angekündigt, mit der Sie Metadaten (z.B. title, meta und link-Tags innerhalb Ihres HTML-head-Elements) definieren können, indem Sie ein Metadata-Objekt aus einem Layout oder einer Seite exportieren.

layout.js or page.js
// Entweder statische Metadaten
export const metadata = {
  title: 'Home',
};
// Ausgabe:
// <head>
//	 <title>Home</title>
// </head>
 
// Oder dynamische Metadaten
export async function generateMetadata({ params, searchParams }) {
  const product = await getProduct(params.id);
  return { title: product.title };
}
// Ausgabe:
// <head>
//	 <title>Mein einzigartiges Produkt</title>
// </head>
 
export default function Page() {}

Zusätzlich zu konfigurationsbasierten Metadaten unterstützt die Metadata-API jetzt neue Dateikonventionen, mit denen Sie Ihre Seiten bequem für verbesserte SEO und das Teilen im Web anpassen können:

  • opengraph-image.(jpg|png|svg)
  • twitter-image.(jpg|png|svg)
  • favicon.ico
  • icon.(ico|jpg|png|svg)
  • sitemap.(xml|js|jsx|ts|tsx)
  • robots.(txt|js|jsx|ts|tsx)
  • manifest.(json|js|jsx|ts|tsx)

Beispielsweise können Sie dateibasierte Metadaten verwenden, um ein Favicon für Ihre App und ein Open-Graph-Bild für Ihre /about-Seite hinzuzufügen:

app
├── favicon.ico
├── layout.js
├── page.js
└── about
    ├── opengraph-image.jpg
    └── page.js

Next.js serviert diese Dateien automatisch mit Hashes (für den Dateinamen) in der Produktion für das Caching und aktualisiert die relevanten head-Elemente mit den korrekten Metadateninformationen wie der URL der Datei, dem Dateityp und der Bildgröße.

// Besuch von "/"
<link rel="icon" href="<computedUrl>"/>
 
// Besuch von "/about"
<link rel="icon" href="<computedUrl>"/>
<meta property="og:image" content="<computedUrl>" type="<computedType>" ... />

Das Hinzufügen statischer Dateien zu Ihrer Anwendung ist oft der einfachste Ansatz, aber es gibt Fälle, in denen Sie Dateien dynamisch erstellen müssen. Für jede statische Dateikonvention gibt es eine begleitende dynamische Variante (.js|.jsx|.ts|.tsx), mit der Sie Code zur Generierung der Datei schreiben können.

Beispielsweise können Sie zwar eine statische sitemap.xml-Datei hinzufügen, aber die meisten Websites haben einige Seiten, die dynamisch mit einer externen Datenquelle generiert werden. Um eine dynamische Sitemap zu generieren, können Sie eine sitemap.js-Datei hinzufügen, die ein Array Ihrer dynamischen Routen zurückgibt.

app/sitemap.js
export default async function sitemap() {
  const res = await fetch('https://.../posts');
  const allPosts = await res.json();
 
  const posts = allPosts.map((post) => ({
    url: `https://acme.com/blog/${post.slug}`,
    lastModified: post.publishedAt,
  }));
 
  const routes = ['', '/about', '/blog'].map((route) => ({
    url: `https://acme.com${route}`,
    lastModified: new Date().toISOString(),
  }));
 
  return [...routes, ...posts];
}

Mit konfigurationsbasierten und neuen dateibasierten Optionen haben Sie jetzt eine umfassende Metadata-API, die sowohl statische als auch dynamische Metadaten abdeckt.

Die Metadata-API ist in 13.3 für den App-Router (app) verfügbar. Sie ist nicht im pages-Verzeichnis verfügbar. Erfahren Sie mehr über dateibasierte Metadaten und sehen Sie die API-Referenz.

Dynamische Open-Graph-Bildgenerierung

Vor sechs Monaten haben wir @vercel/og und Satori veröffentlicht, Bibliotheken, mit denen Sie Bilder dynamisch mit JSX, HTML und CSS generieren können.

@vercel/og wurde bei der Next.js Conf auf die Probe gestellt, wo über 100.000 dynamische Ticketbilder für jeden Teilnehmer generiert wurden. Mit breiter Akzeptanz bei Vercel-Kunden und über 900.000 Downloads seit der Veröffentlichung freuen wir uns, dynamisch generierte Bilder in alle Next.js-Anwendungen zu bringen, ohne dass ein externes Paket erforderlich ist.

Sie können jetzt ImageResponse aus next/server importieren, um Bilder zu generieren:

/app/about/opengraph-image.tsx
import { ImageResponse } from 'next/server';
 
export const size = { width: 1200, height: 600 };
export const alt = 'Über Acme';
export const contentType = 'image/png';
export const runtime = 'edge';
 
export default function og() {
  return new ImageResponse();
  // ...
}

ImageResponse integriert sich natürlich gut mit anderen Next.js-APIs, einschließlich Route Handlern und dateibasierten Metadaten. Beispielsweise können Sie ImageResponse in einer opengraph-image.tsx-Datei verwenden, um Open-Graph- und Twitter-Bilder zur Build-Zeit oder dynamisch zur Anfragezeit zu generieren.

Erfahren Sie mehr über die Image Response API.

Statischer Export für den App-Router

Der Next.js App-Router unterstützt jetzt vollständig statische Exporte.

Sie können als statische Website oder Single-Page Application (SPA) beginnen und später optional auf Next.js-Funktionen upgraden, die einen Server erfordern.

Wenn Sie next build ausführen, generiert Next.js eine HTML-Datei pro Route. Durch die Aufteilung einer strengen SPA in einzelne HTML-Dateien kann Next.js unnötigen JavaScript-Code auf der Client-Seite vermeiden, die Bundle-Größe reduzieren und schnellere Seitenladezeiten ermöglichen.

next.config.js
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
};
 
module.exports = nextConfig;

Statischer Export funktioniert mit den neuen Funktionen des app-Routers, einschließlich statischer Route Handler, Open-Graph-Bilder und React Server Components.

Beispielsweise werden Server Components während des Builds ausgeführt, ähnlich wie bei der traditionellen statischen Seitengenerierung, und rendern die Komponenten in statisches HTML für den ersten Seitenaufruf und eine statische Nutzlast für die Client-Navigation zwischen Routen.

Bisher mussten Sie für statische Exporte im pages-Verzeichnis next export ausführen. Mit der next.config.js-Option gibt next build jedoch ein out-Verzeichnis aus, wenn output: 'export' gesetzt ist. Sie können dieselbe Konfiguration für den app-Router und das pages-Verzeichnis verwenden. Dies bedeutet, dass next export nicht mehr erforderlich ist.

Mit der erweiterten Unterstützung für statische Exporte erhalten Sie Fehler früher im Entwicklungsprozess (next dev), z.B. wenn Sie versuchen, eine dynamische Funktion zu verwenden, die einen Server erfordert, wie cookies() oder headers().

Erfahren Sie mehr über Statischen Export.

Parallele Routen und Interception

Next.js 13.3 führt neue dynamische Konventionen ein, mit denen Sie erweiterte Routing-Fälle implementieren können: Parallele Routen und Intercepting Routes. Diese Funktionen ermöglichen es Ihnen, mehr als eine Seite in derselben Ansicht anzuzeigen, wie bei komplexen Dashboards oder Modals.

Mit parallelen Routen können Sie eine oder mehrere Seiten gleichzeitig in derselben Ansicht rendern, die unabhängig voneinander navigiert werden können. Es kann auch verwendet werden, um Seiten bedingt zu rendern.

Parallele Routen werden mit benannten "Slots" erstellt. Slots werden mit der @folder-Konvention definiert:

dashboard
├── @user
│   └── page.js
├── @team
│   └── page.js
├── layout.js
└── page.js

Das Layout im selben Routensegment akzeptiert die Slots als Props:

app/dashboard/layout.js
export default async function Layout({ children, user, team }) {
  const userType = getCurrentUserType();
 
  return (
    <>
      {userType === 'user' ? user : team}
      {children}
    </>
  );
}

Im obigen Beispiel werden die parallelen Routen-Slots @user und @team (explizit) basierend auf Ihrer Logik bedingt gerendert. children ist ein impliziter Routen-Slot, der nicht einem @folder zugeordnet werden muss. Beispielsweise ist dashboard/page.js äquivalent zu dashboard/@children/page.js.

Intercepting Routes ermöglichen es Ihnen, eine neue Route innerhalb des aktuellen Layouts zu laden, während die Browser-URL "maskiert" wird. Dies ist nützlich, wenn der Kontext der aktuellen Seite wichtig ist, z.B. wenn Sie ein Foto in einem Feed über ein Modal erweitern, während der Feed im Hintergrund des Modals erhalten bleibt.

Intercepting Routes können mit der (..)-Konvention definiert werden, ähnlich wie relative Pfade ../. Sie können auch die (...)-Konvention verwenden, um einen Pfad relativ zum app-Verzeichnis zu erstellen.

feed
├── @modal
│   └── (..)photo
│       └── [id]
│           └── page.tsx
├── page.tsx
└── layout.tsx
photo
└── [id]
    └── page.tsx

Im obigen Beispiel öffnet das Klicken auf das Foto vom Benutzerprofil das Foto in einem Modal während der Client-seitigen Navigation. Das Aktualisieren oder Teilen der Seite lädt das Foto jedoch mit seinem Standard-Layout.

Parallele Routen und Interception ermöglichen Instagram-ähnliches Modal-Routing.

Parallele Routen und Interception ermöglichen Instagram-ähnliches Modal-Routing.

Dies löst die Herausforderungen, die Sie möglicherweise beim Erstellen von Modals haben, wie z.B. das Teilen des Modal-Inhalts über eine URL, das Verhindern des Verlusts des Kontexts beim Aktualisieren der Seite und das Schließen und erneute Öffnen des Modals mit Rückwärts- und Vorwärtsnavigation.

Weitere Beispiele und Verhaltensweisen finden Sie in der Dokumentation zu Parallelen und Intercepting Routes.

Weitere Verbesserungen

  • Design-Updates: Die Next.js Homepage und Showcase wurden mit einem neuen Design aktualisiert.
  • Turbopack: Unterstützung für Middleware, alle next/font-Optionen und Streaming mit Server Components wurde hinzugefügt, während es sich dem Beta-Status nähert (siehe Demo). Wir haben auch zusätzliche Fehler behoben, die beim Einsatz in ausgereiften Next.js-Apps wie vercel.com und nextjs.org entdeckt wurden. Mehr erfahren.
  • Fast Refresh für next.config.js: Änderungen an next.config.js starten jetzt automatisch Ihren lokalen Entwicklungsserver neu. Dies erweitert das automatische Neuladen von .env, .env.*, jsconfig.json, tsconfig.json Konfigurationsdateien.
  • Barrierefreiheit: Der App-Router enthält jetzt die Routenankündigung aus pages. Diese Funktion kündigt Client-seitige Routenübergänge für Screenreader und andere assistive Technologien an. Mehr erfahren.
  • Statisch typisierte Links: redirects und rewrites, die in next.config.js festgelegt sind, werden jetzt während der Typüberprüfung berücksichtigt. Mehr erfahren.
  • Tailwind CSS für create-next-app: Wenn Sie ein neues Projekt mit npx create-next-app@latest starten, können Sie jetzt optional Tailwind CSS auswählen oder das Flag --tailwind verwenden, um Ihre Anwendung mit dieser Styling-Lösung vorzukonfigurieren.
  • Route Handlers: Die Verwendung von export default anstelle eines unterstützten HTTP-Verbs wirft jetzt einen hilfreichen Fehler mit route.ts. Mehr über Route Handlers erfahren.
  • Bilder: next/image unterstützt jetzt das fetchPriority="high"-Attribut.
  • Metadaten: Die vorherige API für Metadaten (head.js), die in 13.2 als veraltet markiert wurde, wurde entfernt. Verwenden Sie stattdessen die integrierte SEO-Unterstützung über die Metadata-API.
  • Ordner vom Routing ausschließen: Präfixieren Sie einen Ordner mit _, um ihn und alle untergeordneten Segmente vom Routing auszuschließen. Beispielsweise wäre app/_dashboard/page.tsx nicht routbar.
  • App-Router: Wir haben einen neuen useParams-Hook für Client Components hinzugefügt, um die dynamischen Parameter für das gegebene Routensegment zu lesen. Mehr erfahren.
  • Verbessertes Stylesheet-Laden: Next.js implementiert jetzt Reacts Suspensey CSS, das viele Probleme beim Laden von CSS und ungestyltem Inhalt behebt, insbesondere während der Navigation.
  • Verbesserte Not Found-Behandlung: Zusätzlich zum Abfangen erwarteter notFound()-Fehler behandelt die app/not-found.js-Datei im Stammverzeichnis auch alle nicht übereinstimmenden URLs für Ihre gesamte Anwendung. Dies bedeutet, dass Benutzer, die eine URL besuchen, die von Ihrer App nicht behandelt wird, die UI sehen, die von der app/not-found.js-Datei exportiert wird. Mehr erfahren.
  • Verbesserter Client-seitiger Router-Cache: router.refresh() invalidiert jetzt den gesamten Cache, und Suchparameter sind Teil des Cache-Schlüssels, sodass die Navigation zwischen zwei Suchparametern (z.B. /?search=leerob und /?search=tim) Inhalte, die vom Parameter abhängen, korrekt wiederherstellt.

Community

Next.js ist das Ergebnis der gemeinsamen Arbeit von über 2.600 einzelnen Entwicklern, Industriepartnern wie Google und Meta und unserem Kernteam bei Vercel. Mit über 4,2 Millionen npm-Downloads pro Woche und 104.000+ GitHub-Sternen ist Next.js eine der beliebtesten Möglichkeiten, das Web zu bauen.

Treten Sie der Community auf GitHub Discussions, Reddit und Discord bei.

Diese Version wurde ermöglicht durch:

Und die Beiträge von: @shuding, @huozhi, @sokra, @hanneslund, @JesseKoldewijn, @kaguya3222, @yangshun, @ijjk, @konomae, @Brooooooklyn, @jridgewell, @zlrlyy, @JohnDaly, @abhiyandhakal, @benjie, @johnnyomair, @nk980113, @dirheimerb, @DerTimonius, @DuCanhGH, @padmaia, @stafyniaksacha, @Gladowar, @zek, @jankaifer, @styfle, @balazsorban44, @wbinnssmith, @chibicode, @ForsakenHarmony, @franktronics, @FSaldanha, @Schniz, @raisedadead, @AdamKatzDev, @wyattjoh, @leerob, @meesvandongen, @vladikoff, @feedthejim, @tka5, @pyjun01, @gdborton, @M3kH, @aretrace, @shivanshubisht, @alexkirsz, @agrattan0820, @vinaykulk621, @heyitsuzair, @mrkldshv, @timneutkens, @furkanmavili, @swaminator, @EndangeredMassa, @DevEsteves, @rishabhpoddar, @schehata, @molebox, @dlehmhus, @akshaynox, @sp00ls, @janicklas-ralph, @tomryanx, @kwonoj, @karlhorky, @kdy1, @dante-robinson, @lachlanjc, @ianmacartney, @hotters, @isaackatayev, @insik-han, @jayair, @ivanhofer, @javivelasco, @SukkaW, @visshaljagtap, @imranbarbhuiya, @nivak-monarch, @HarshaVardhanReddyDuvvuru, @ianldgs, @ricardofiorani, @swarnava und @gustavostz.