Next.js 13 | Next.js

Wie wir auf der Next.js Conf angekündigt haben, legt Next.js 13 (stabil) die Grundlagen für dynamische Anwendungen ohne Grenzen:

app-Verzeichnis (beta): Einfacher, schneller, weniger Client-JS.
Turbopack (alpha): Bis zu 700x schnellerer Rust-basierter Webpack-Ersatz.
Neue next/image: Schneller mit nativer Browser-Lazy-Loading.
Neue @next/font (beta): Automatisch selbstgehostete Fonts ohne Layout-Shift.
Verbessertes next/link: Vereinfachte API mit automatischem <a>.

Next.js 13 und das pages-Verzeichnis sind stabil und produktionsbereit. Aktualisieren Sie heute durch Ausführen von:

Terminal

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

Neues `app`-Verzeichnis (Beta)

Heute verbessern wir das Routing- und Layout-Erlebnis in Next.js und passen es an die Zukunft von React an mit der Einführung des app-Verzeichnisses. Dies ist eine Weiterführung des Layouts RFC, der zuvor für Community-Feedback veröffentlicht wurde.

Das app-Verzeichnis befindet sich derzeit in der Beta-Phase und wir empfehlen noch nicht, es in der Produktion zu verwenden. Sie können Next.js 13 mit dem stabilen pages-Verzeichnis nutzen, einschließlich verbesserter Funktionen wie der next/image- und next/link-Komponente, und das app-Verzeichnis in Ihrem eigenen Tempo ausprobieren. Das pages-Verzeichnis wird voraussichtlich weiterhin unterstützt werden.

Das app-Verzeichnis beinhaltet Unterstützung für:

Layouts: Einfaches Teilen von UI zwischen Routen bei Beibehaltung des Zustands und Vermeidung teurer Re-Render.
Server Components: Server-first als Standard für die dynamischsten Anwendungen.
Streaming: Sofortige Ladezustände anzeigen und UI-Einheiten streamen, während sie gerendert werden.
Unterstützung für Data Fetching: async Server Components und erweiterte fetch-API ermöglichen komponentenbezogenes Fetching.

Das app-Verzeichnis kann schrittweise aus Ihrem bestehenden pages/-Verzeichnis übernommen werden.

Layouts

Das app/-Verzeichnis macht es einfach, komplexe Interfaces zu gestalten, die den Zustand über Navigationen hinweg beibehalten, teure Re-Render vermeiden und erweiterte Routing-Muster ermöglichen. Weiterhin können Sie Layouts verschachteln und Anwendungscode mit Ihren Routen zusammenlegen, wie Komponenten, Tests und Styles.

Das app/-Verzeichnis kann schrittweise aus Ihrem bestehenden pages/-Verzeichnis übernommen werden.

Das Erstellen von Routen innerhalb von app/ erfordert eine einzige Datei, page.js:

app/page.js

// Diese Datei entspricht der Index-Route (/)
export default function Page() {
  return <h1>Hallo, Next.js!</h1>;
}

Sie können dann Layouts über das Dateisystem definieren. Layouts teilen UI zwischen mehreren Seiten. Bei Navigation behalten Layouts den Zustand bei, bleiben interaktiv und werden nicht neu gerendert.

app/blog/layout.js

export default function BlogLayout({ children }) {
  return <section>{children}</section>;
}

Erfahren Sie mehr über Layouts und Seiten oder setzen Sie ein Beispiel auf, um es auszuprobieren.

Server Components

Das app/-Verzeichnis führt Unterstützung für Reacts neue Server Components-Architektur ein. Server- und Client Components nutzen Server und Client jeweils für das, was sie am besten können - und ermöglichen Ihnen so den Aufbau schneller, hochinteraktiver Apps mit einem einzigen Programmiermodell, das eine großartige Developer Experience bietet.

Mit Server Components legen wir die Grundlagen für den Aufbau komplexer Interfaces, während wir die Menge an JavaScript, die an den Client gesendet wird, reduzieren, was schnellere initiale Seitenladezeiten ermöglicht.

Wenn eine Route geladen wird, werden die Next.js- und React-Runtime geladen, die cachebar und in der Größe vorhersehbar ist. Diese Runtime vergrößert sich nicht mit dem Wachstum Ihrer Anwendung. Darüber hinaus wird die Runtime asynchron geladen, sodass Ihr HTML vom Server auf dem Client progressiv verbessert werden kann.

Erfahren Sie mehr über Server Components oder setzen Sie ein Beispiel auf, um es auszuprobieren.

Streaming

Das app/-Verzeichnis führt die Möglichkeit ein, gerenderte UI-Einheiten progressiv und inkrementell an den Client zu streamen.

Mit Server Components und verschachtelten Layouts in Next.js können Sie Teile der Seite, die keine spezifischen Daten benötigen, sofort rendern und einen Ladezustand für Teile der Seite anzeigen, die Daten abrufen. Mit diesem Ansatz muss der Nutzer nicht warten, bis die gesamte Seite geladen ist, bevor er mit ihr interagieren kann.

Sie können Ihren Anwendungscode, wie Komponenten, Tests und Styles, mit Ihren Routen zusammenlegen.

Wenn auf Vercel bereitgestellt, streamen Next.js 13-Anwendungen, die das app/-Verzeichnis verwenden, standardmäßig Antworten in beiden Laufzeitumgebungen Node.js und Edge für verbesserte Performance.

Erfahren Sie mehr über Streaming oder setzen Sie ein Beispiel auf, um es auszuprobieren.

Data Fetching

React's kürzlich veröffentlichtes Support for Promises RFC führt eine leistungsstarke neue Möglichkeit ein, Daten abzurufen und Promises in Komponenten zu verarbeiten:

app/page.js

async function getData() {
  const res = await fetch('https://api.example.com/...');
  // Der Rückgabewert ist *nicht* serialisiert
  // Sie können Date, Map, Set etc. zurückgeben
  return res.json();
}
 
// Dies ist eine asynchrone Server Component
export default async function Page() {
  const data = await getData();
 
  return <main>{/* ... */}</main>;
}

Die native fetch-Web-API wurde auch in React und Next.js erweitert. Sie dedupliziert Fetch-Anfragen automatisch und bietet eine flexible Möglichkeit, Daten auf Komponentenebene abzurufen, zwischenzuspeichern und zu revalidieren. Das bedeutet, dass alle Vorteile von Static Site Generation (SSG), Server-Side Rendering (SSR) und Incremental Static Regeneration (ISR) jetzt über eine einzige API verfügbar sind:

// Diese Anfrage sollte zwischengespeichert werden, bis sie manuell invalidisiert wird.
// Ähnlich wie `getStaticProps`.
// `force-cache` ist der Standardwert und kann weggelassen werden.
fetch(URL, { cache: 'force-cache' });
 
// Diese Anfrage sollte bei jeder Anfrage neu abgerufen werden.
// Ähnlich wie `getServerSideProps`.
fetch(URL, { cache: 'no-store' });
 
// Diese Anfrage sollte mit einer Lebensdauer von 10 Sekunden zwischengespeichert werden.
// Ähnlich wie `getStaticProps` mit der `revalidate`-Option.
fetch(URL, { next: { revalidate: 10 } });

Im app-Verzeichnis können Sie Daten innerhalb von Layouts, Seiten und Komponenten abrufen - einschließlich Unterstützung für Streaming-Antworten vom Server.

Wir ermöglichen ergonomische Wege, Lade- und Fehlerzustände zu handhaben und UI zu streamen, während sie gerendert wird. In einer zukünftigen Version werden wir Datenmutationen weiter verbessern und vereinfachen.

Mit dem app/-Verzeichnis können Sie eine neue spezielle Datei loading.js verwenden, um automatisch Instant Loading UI mit Suspense-Boundaries zu erstellen.

Wir freuen uns darauf, mit der Open-Source-Community, Paketmaintainern und anderen Unternehmen, die zum React-Ökosystem beitragen, zusammenzuarbeiten, um für diese neue Ära von React und Next.js zu bauen. Die Möglichkeit, Data Fetching innerhalb von Komponenten zusammenzulegen und weniger JavaScript an den Client zu senden, waren zwei wichtige Punkte aus dem Community-Feedback, die wir gerne mit dem app/-Verzeichnis umsetzen.

Erfahren Sie mehr über Data Fetching oder setzen Sie ein Beispiel auf, um es auszuprobieren.

Einführung von Turbopack (Alpha)

Next.js 13 enthält Turbopack, den neuen Rust-basierten Nachfolger von Webpack.

Webpack wurde über 3 Milliarden Mal heruntergeladen. Während es ein integraler Bestandteil des Web-Buildings war, haben wir die Grenzen der maximal möglichen Performance mit JavaScript-basierten Tools erreicht.

In Next.js 12 begannen wir unseren Übergang zu nativen Rust-basierten Tools. Wir starteten mit der Migration von Babel, was zu 17x schnellerer Transpilierung führte. Dann ersetzten wir Terser, was zu 6x schnellerer Minifizierung führte. Jetzt ist es an der Zeit, vollständig auf Native für das Bundling zu setzen.

Die Verwendung der Turbopack-Alpha mit Next.js 13 führt zu:

700x schnelleren Updates als Webpack
10x schnelleren Updates als Vite
4x schnelleren Cold Starts als Webpack

Turbopack ist unser Rust-basierter Nachfolger von Webpack, mit 700x schnellerem HMR für große Anwendungen.

Turbopack bundlet nur die minimal erforderlichen Assets in der Entwicklung, sodass die Startzeit extrem schnell ist. Bei einer Anwendung mit 3.000 Modulen benötigt Turbopack 1,8 Sekunden zum Hochfahren. Vite benötigt 11,4 Sekunden und Webpack 16,5 Sekunden.

Turbopack bietet out-of-the-box Unterstützung für Server Components, TypeScript, JSX, CSS und mehr. Während der Alpha-Phase sind viele Funktionen noch nicht unterstützt. Wir würden uns über Ihr Feedback zur Verwendung von Turbopack freuen, um Ihre lokalen Iterationen zu beschleunigen.

Hinweis: Turbopack in Next.js unterstützt derzeit nur next dev. Siehe die unterstützten Funktionen. Wir arbeiten auch daran, Unterstützung für next build durch Turbopack hinzuzufügen.

Probieren Sie die Turbopack-Alpha heute in Next.js 13 mit next dev --turbo aus.

`next/image`

Next.js 13 führt eine leistungsstarke neue Image-Komponente ein, mit der Sie Bilder einfach ohne Layout-Shift anzeigen und Dateien bei Bedarf für höhere Performance optimieren können.

Während der Next.js Community Survey gaben 70% der Befragten an, dass sie die Next.js Image-Komponente in der Produktion verwenden und dadurch verbesserte Core Web Vitals sahen. Mit Next.js 13 verbessern wir next/image noch weiter.

Die neue Image-Komponente:

Sendet weniger Client-seitiges JavaScript
Ist einfacher zu stylen und zu konfigurieren
Ist zugänglicher, da alt-Tags standardmäßig erforderlich sind
Entspricht der Web-Plattform
Ist schneller, da natives Lazy-Loading keine Hydration erfordert

app/page.js

import Image from 'next/image';
import avatar from './lee.png';
 
export default function Home() {
  // "alt" ist jetzt für bessere Barrierefreiheit erforderlich
  // optional: Bilddateien können im app/-Verzeichnis zusammengelegt werden
  return <Image alt="leeerob" src={avatar} placeholder="blur" />;
}

Erfahren Sie mehr über die Image-Komponente oder setzen Sie ein Beispiel auf, um es auszuprobieren.

Upgrade von `next/image` auf Next.js 13

Die alte Image-Komponente wurde in next/legacy/image umbenannt. Wir stellen einen Codemod bereit, der Ihre bestehende Verwendung von next/image automatisch auf next/legacy/image aktualisiert. Dieser Befehl würde beispielsweise den Codemod auf Ihr ./pages-Verzeichnis anwenden, wenn er aus dem Stammverzeichnis ausgeführt wird:

Terminal

npx @next/codemod next-image-to-legacy-image ./pages

Erfahren Sie mehr über den Codemod.

`@next/font`

Next.js 13 führt ein brandneues Font-System ein, das:

Ihre Fonts automatisch optimiert, einschließlich benutzerdefinierter Fonts
Externe Netzwerkanfragen für verbesserten Datenschutz und Performance entfernt
Integriertes automatisches Self-Hosting für jede Font-Datei bietet
Automatisch ohne Layout-Shift mit der CSS-Eigenschaft size-adjust arbeitet

Dieses neue Font-System ermöglicht Ihnen die bequeme Verwendung aller Google Fonts mit Performance und Datenschutz im Hinterkopf. CSS- und Font-Dateien werden beim Build heruntergeladen und mit dem Rest Ihrer statischen Assets selbst gehostet. Es werden keine Anfragen an Google vom Browser gesendet.

app/layout.js / pages/_app.js

import { Inter } from '@next/font/google';
 
const inter = Inter();
 
<html className={inter.className}></html>;

Benutzerdefinierte Fonts werden ebenfalls unterstützt, einschließlich automatischem Self-Hosting, Caching und Preloading von Font-Dateien.

app/layout.js / pages/_app.js

import localFont from '@next/font/local';
 
const myFont = localFont({ src: './my-font.woff2' });
 
<html className={myFont.className}></html>;

Sie können jeden Aspekt des Font-Ladevorgangs anpassen und dabei trotzdem eine großartige Performance und keinen Layout-Shift sicherstellen, einschließlich font-display, Preloading, Fallbacks und mehr.

Erfahren Sie mehr über die neue Font-Komponente oder setzen Sie ein Beispiel auf, um es auszuprobieren.

`next/link`

next/link erfordert nicht mehr manuelles Hinzufügen von <a> als Child.

Dies wurde als experimentelle Option in 12.2 hinzugefügt und ist jetzt der Standard. In Next.js 13 rendert <Link> immer ein <a> und erlaubt Ihnen, Props an das zugrunde liegende Tag weiterzuleiten. Zum Beispiel:

import Link from 'next/link'
 
// Next.js 12: `<a>` musste verschachtelt werden, sonst wurde es ausgeschlossen
<Link href="/about">
  <a>Über</a>
</Link>
 
// Next.js 13: `<Link>` rendert immer `<a>`
<Link href="/about">
  Über
</Link>

Erfahren Sie mehr über die verbesserte Link-Komponente oder setzen Sie ein Beispiel auf, um es auszuprobieren.

Aktualisierung von `next/link` auf Next.js 13

Um Ihre Links auf Next.js 13 zu aktualisieren, haben wir einen Codemod bereitgestellt, der Ihre Codebasis automatisch anpasst. Dieser Befehl führt den Codemod beispielsweise im Verzeichnis ./pages aus, wenn er vom Stammverzeichnis aus ausgeführt wird:

Terminal

npx @next/codemod new-link ./pages

Erfahren Sie mehr über den Codemod oder sehen Sie sich die Dokumentation an.

OG Image Generation

Social Cards, auch bekannt als Open-Graph-Bilder, können die Klickrate auf Ihre Inhalte erheblich steigern, wobei einige Experimente bis zu 40 % bessere Konversionen zeigen.

Statische Social Cards sind zeitaufwändig, fehleranfällig und schwer zu pflegen. Daher fehlen sie oft oder werden sogar ganz weggelassen. Bis heute waren dynamische Social Cards, die personalisiert und in Echtzeit berechnet werden müssen, schwierig und teuer zu implementieren.

Wir haben eine neue Bibliothek @vercel/og entwickelt, die nahtlos mit Next.js zusammenarbeitet, um dynamische Social Cards zu generieren.

pages/api/og.jsx

import { ImageResponse } from '@vercel/og';
 
export const config = {
  runtime: 'experimental-edge',
};
 
export default function () {
  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
        }}
      >
        Hello, World!
      </div>
    ),
  );
}

Dieser Ansatz ist 5x schneller als bestehende Lösungen, indem er Vercel Edge Functions, WebAssembly und eine brandneue Kernbibliothek zur Umwandlung von HTML und CSS in Bilder nutzt und dabei die React-Komponentenabstraktion verwendet.

Erfahren Sie mehr über OG Image Generation oder stellen Sie ein Beispiel bereit, um es auszuprobieren.

Middleware-API-Updates

In Next.js 12 haben wir Middleware eingeführt, um maximale Flexibilität mit dem Next.js-Router zu ermöglichen. Basierend auf Ihrem Feedback zum anfänglichen API-Design haben wir einige Ergänzungen vorgenommen, um die Entwicklererfahrung zu verbessern und neue Funktionalitäten hinzuzufügen.

Sie können jetzt Header einfacher in der Anfrage setzen:

middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
export function middleware(request: NextRequest) {
  // Klonen der Anfrage-Header und Setzen eines neuen Headers `x-version`
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13');
 
  // Sie können Header auch in NextResponse.rewrite setzen
  const response = NextResponse.next({
    request: {
      // Neue Anfrage-Header
      headers: requestHeaders,
    },
  });
 
  // Setzen eines neuen Antwort-Headers `x-version`
  response.headers.set('x-version', '13');
  return response;
}

Sie können jetzt auch direkt eine Antwort aus der Middleware senden, ohne rewrite oder redirect verwenden zu müssen.

middleware.ts

import { NextRequest, NextResponse } from 'next/server';
import { isAuthenticated } from '@lib/auth';
 
// Beschränken der Middleware auf Pfade, die mit `/api/` beginnen
export const config = {
  matcher: '/api/:function*',
};
 
export function middleware(request: NextRequest) {
  // Aufruf unserer Authentifizierungsfunktion zur Überprüfung der Anfrage
  if (!isAuthenticated(request)) {
    // Antwort mit JSON, das eine Fehlermeldung anzeigt
    return NextResponse.json(
      {
        success: false,
        message: 'Auth failed',
      },
      {
        status: 401,
      },
    );
  }
}

Das Senden von Antworten aus der Middleware erfordert derzeit die Konfigurationsoption experimental.allowMiddlewareResponseBody in next.config.js.

Breaking Changes

Die minimale React-Version wurde von 17.0.2 auf 18.2.0 erhöht.
Die minimale Node.js-Version wurde von 12.22.0 auf 14.6.0 erhöht, da 12.x das Ende der Lebensdauer erreicht hat (PR).
Die Konfigurationseigenschaft swcMinify wurde von false auf true geändert. Weitere Informationen finden Sie unter Next.js Compiler.
Der Import next/image wurde in next/legacy/image umbenannt. Der Import next/future/image wurde in next/image umbenannt. Ein Codemod ist verfügbar, um Ihre Imports sicher und automatisch umzubenennen.
Das Kind von next/link kann nicht mehr <a> sein. Fügen Sie die Prop legacyBehavior hinzu, um das alte Verhalten zu verwenden, oder entfernen Sie <a>, um zu aktualisieren. Ein Codemod ist verfügbar, um Ihren Code automatisch zu aktualisieren.
Routen werden nicht mehr vorab geladen, wenn der User-Agent ein Bot ist.
Die veraltete target-Option in next.config.js wurde entfernt.
Die unterstützten Browser wurden geändert, um Internet Explorer auszuschließen und moderne Browser zu unterstützen. Sie können weiterhin Browserslist verwenden, um gezielte Browser anzupassen.
- Chrome 64+
- Edge 79+
- Firefox 67+
- Opera 51+
- Safari 12+

Weitere Informationen finden Sie im Upgrade-Leitfaden.

Community

Vor sechs Jahren haben wir Next.js der Öffentlichkeit vorgestellt. Unser Ziel war es, ein React-Framework mit Null-Konfiguration zu entwickeln, das Ihre Entwicklererfahrung vereinfacht. Rückblickend ist es erstaunlich zu sehen, wie die Community gewachsen ist und was wir gemeinsam erreicht haben. Lasst uns weitermachen.

Next.js ist das Ergebnis der gemeinsamen Arbeit von über 2.400 einzelnen Entwicklern, Industriepartnern wie Google und Meta und unserem Kernteam. Mit über 3 Millionen npm-Downloads pro Woche und 94.000 GitHub-Sternen ist Next.js eine der beliebtesten Möglichkeiten, das Web zu bauen.

Besonderer Dank geht an das Aurora-Team von Google Chrome, das bei der grundlegenden Forschung und den Experimenten geholfen hat, die zu dieser Veröffentlichung führten.

Diese Version wurde ermöglicht durch die Beiträge von: @ijjk, @huozhi, @HaNdTriX, @iKethavel, @timneutkens, @shuding, @rishabhpoddar, @hanneslund, @balazsorban44, @devknoll, @anthonyshew, @TomerAberbach, @philippbosch, @styfle, @mauriciomutte, @hayitsdavid, @abdennor, @Kikobeats, @cjdunteman, @Mr-Afonso, @kdy1, @jaril, @abdallah-nour, @North15, @feedthejim, @brunocrosier, @Schniz, @sedlukha, @hashlash, @Ethan-Arrowood, @fireairforce, @migueloller, @leerob, @janicklas-ralph, @Trystanr, @atilafassina, @nramkissoon, @kasperadk, @valcosmos, @henriqueholtz, @nip10, @jesstelford, @lorensr, @AviAvinav, @SukkaW, @jaycedotbin, @saurabhburade, @notrab, @kwonoj, @sanruiz, @angeloashmore, @falsepopsky, @fmontes, @Gebov, @UltiRequiem, @p13lgst, @Simek, @mrkldshv, @thomasballinger, @kyliau, @AdarshKonchady, @endymion1818, @pedro757, @perkinsjr, @gnoff, @jridgewell, @silvioprog, @mabels, @nialexsan, @feugy, @jackromo888, @crazyurus, @EarlGeorge, @MariaSolOs, @lforst, @maximbaz, @maxam2017, @teobler, @Nutlope, @sunwoo0706, @WestonThayer, @Brooooooklyn, @Nsttt, @charlypoly, @aprendendofelipe, @sviridoff, @jackton1, @nuta, @Rpaudel379, @marcialca, @MarDi66, @ismaelrumzan, @javivelasco, @eltociear und @hiro0218.