Next.js 13.1

Next.js 13.1 enthält Verbesserungen für beide Verzeichnisse pages/ (stabil) und app/ (Beta):

• Verbesserungen am app-Verzeichnis (Beta): Verbesserte Zuverlässigkeit und Leistung.
• Eingebaute Modul-Transpilierung: Integration der next-transpile-modules-Funktionalität in den Kern.
• Edge-Runtime (Stabil): Eine schlanke Node.js-Runtime für den Edge.
• Turbopack-Updates: Unterstützung für Tailwind CSS, next/image, @next/font und mehr.
• Middleware-Verbesserungen: Rückgabe von Antworten und Setzen von Request-Headern.
• SWC-Import-Auflösung: Für kleinere JavaScript-Bundles bei der Verwendung von Barrel-Dateien.
• Speicherverbrauchsverbesserungen, neue Templates und mehr!

Aktualisieren Sie heute durch Ausführen von:

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

Verbesserte Zuverlässigkeit und Unterstützung für das app-Verzeichnis

In Next.js 13 haben wir das neue app-Verzeichnis (Beta) angekündigt. Dieses neue Routing- und Datenabrufsystem kann schrittweise neben Ihrem bestehenden pages-Verzeichnis eingeführt werden.

Das app-Verzeichnis bietet viele Vorteile, darunter verbesserte Layouts, gemeinsame Platzierung von Komponenten, Tests und Styles, komponentenbezogenen Datenabruf und mehr. Dank Ihres Feedbacks und frühen Testens haben wir mehrere Verbesserungen an der Zuverlässigkeit des app-Verzeichnisses vorgenommen:

• Keine Layout-Divs mehr: Zuvor fügte das app-Verzeichnis zusätzliche <div>-Elemente hinzu, um Layouts bei der Navigation in den Blick zu scrollen. Mit 13.1 werden diese zusätzlichen Elemente nicht mehr erstellt. Das Scrollverhalten bleibt erhalten.
• TypeScript-Plugin: Wir haben ein neues TypeScript-Plugin entwickelt, das Vorschläge für Seiten- und Layout-Konfigurationsoptionen bietet, Dokumentation direkt in Ihre IDE einbindet und hilfreiche Hinweise zu Server- und Client-Komponenten liefert (z.B. zur Vermeidung von useState in Server-Komponenten). Mehr erfahren.
• Zuverlässigkeitsverbesserungen: Wir haben zahlreiche Fehler behoben, darunter verbesserte CSS-Module-Unterstützung, korrekte Deduplizierung von cache() und fetch() für Layouts und Seiten, Speicherlecks und mehr.
• Weniger Client-seitiges JavaScript: Das app-Verzeichnis enthält jetzt 9,3 kB weniger Client-seitiges JavaScript als das pages-Verzeichnis. Diese Basisgröße erhöht sich nicht, egal ob Sie 1 oder 1000 Server-Komponenten zu Ihrer Anwendung hinzufügen. Die React-Runtime ist vorübergehend etwas größer, was durch die React Server Components Runtime verursacht wird, die Mechaniken handhabt, die zuvor von Next.js verwaltet wurden. Wir arbeiten daran, dies weiter zu reduzieren.

Wir freuen uns darauf, weiter an der Stabilität des app-Verzeichnisses zu arbeiten. Die Beta-Dokumentation für das app-Verzeichnis hat hunderte von Updates basierend auf Ihrem Feedback erhalten.

Eingebaute Modul-Transpilierung (stabil)

Sie können jetzt Abhängigkeiten aus lokalen Paketen (wie Monorepos) oder externen Abhängigkeiten (node_modules) markieren, die transpiliert und gebündelt werden sollen. Diese eingebaute Unterstützung ersetzt das beliebte next-transpile-modules-Paket.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
};
 
module.exports = nextConfig;

Wir danken Pierre de la Martinière (@martpie) für seine Arbeit an diesem Paket und seine Unterstützung bei der Sicherstellung, dass die eingebaute Unterstützung den Anforderungen der Community entspricht.

Import-Auflösung für kleinere Bundles

Viele beliebte npm-Pakete verwenden "Barrel-Dateien", um eine einzelne Datei bereitzustellen, die andere Module erneut exportiert. Zum Beispiel:

export { default as Button } from './dist/Button';
export { default as Slider } from './dist/Slider';
export { default as Dropdown } from './dist/Dropdown';

Dies ermöglicht es Nutzern des Pakets, benannte Exporte in einer einzigen Zeile zu verwenden:

import { Button, Slider, Dropdown } from '@acme/ui';

Während Bundler diese Barrel-Dateien verstehen und ungenutzte Re-Exports (sogenannten "toten Code") entfernen können, beinhaltet dieser Prozess das Parsen/Kompilieren aller re-exportierten Dateien. Im Falle veröffentlichter Bibliotheken liefern einige npm-Pakete Barrel-Dateien, die Tausende von Modulen re-exportieren, was die Kompilierzeiten verlangsamt. Diese Bibliotheken empfahlen babel-plugin-transform-imports, um dieses Problem zu vermeiden, aber für diejenigen, die SWC verwenden, gab es bisher keine Unterstützung. Wir haben eine neue in Next.js integrierte SWC-Transformation namens modularizeImports hinzugefügt.

Diese neue Einstellung ermöglicht die SWC-Transformation, die Ihre Import-Anweisungen basierend auf einem definierten Muster ändert. Zum Beispiel würde der obige Code für die Verwendung von drei Komponenten automatisch in direkte Importe umgewandelt werden, ohne dass der Entwickler diesen Code manuell schreiben müsste:

// Vorher (mit Barrel-Datei)
import { Button, Slider, Dropdown } from '@acme/ui';
 
// Nachher (mit modularisierten Importen durch das Plugin)
import Button from '@acme/ui/dist/Button';
import Slider from '@acme/ui/dist/Slider';
import Dropdown from '@acme/ui/dist/Dropdown';

Diese Transformation ist mit der modularizeImports-Option in next.config.js möglich:

module.exports = {
  modularizeImports: {
    '@acme/ui': {
      transform: '@acme/ui/dist/{{member}}',
    },
  },
};

Die Nutzung dieser Transformation mit @mui/icons-material oder lodash ermöglicht es, die Kompilierung ungenutzter Dateien zu überspringen. Mehr erfahren.

Sehen Sie sich eine Demo an, um dies in Aktion zu sehen.

Eine schlanke Node.js-Runtime für den Edge, jetzt stabil für API-Routen

Die Edge-Runtime in Next.js verwendet eine strikte Teilmenge der Node.js-APIs (wie Request, Response und mehr), die mit Edge-Computing-Plattformen wie Vercel oder beim Selbsthosting kompatibel sind. Diese APIs laufen überall, einschließlich im Browser, sodass Entwickler sie einmal lernen und überall schreiben können.

// Das Präfix "experimental-" wird nicht mehr benötigt
export const config = {
  runtime: 'edge',
};
 
export default function handler(req: Request) {
  return new Response('Hello World');
}

Next.js-Middleware verwendet diese schlanke Edge-Runtime standardmäßig für eine bessere Leistung. Da Middleware vor jeder Anfrage in Ihrer Anwendung ausgeführt werden kann, ist eine schlanke Runtime entscheidend, um niedrige Latenz zu gewährleisten. In Next.js 12.2 haben wir die Möglichkeit hinzugefügt, diese Runtime optional auch für API-Routen zu verwenden.

Mit 13.1 ist die Edge-Runtime in Next.js jetzt stabil für API-Routen. Beim Selbsthosting laufen Middleware und API-Routen, die die Edge-Runtime verwenden, standardmäßig als Single-Region-Workload als Teil von next start. Auf Vercel werden Next.js-Middleware und API-Routen global mit Vercel Edge Functions bereitgestellt, um die niedrigstmögliche Latenz zu erreichen. Vercel Edge Functions sind jetzt auch allgemein verfügbar.

Turbopack-Verbesserungen

Nach der Veröffentlichung des Turbopack-Alphas mit Next.js 13 haben wir uns auf die Verbesserung der Zuverlässigkeit, die Unterstützung der am häufigsten nachgefragten Funktionen und die Planung von Plugins und der Verwendung in anderen Frameworks konzentriert.

Seit Next.js 13.0.0 unterstützt Turbopack:

• PostCSS, einschließlich Tailwind CSS
• next/image
• @next/font (Google Fonts)
• Laden von CSS aus dynamischen import()-Anweisungen
• CSS-Source-Maps (Danke an @ahabhgk für seinen Beitrag)
• Verbessertes Fehlerhandling im next dev-Fehler-Overlay
• Verbesserter Speicherverbrauch
• Verbesserte CSS-Module-Unterstützung
• Verbesserter Chunking-Algorithmus für HMR-Updates
• Verbesserte Zuverlässigkeit für HMR-Source-Maps

Wir danken Evan You und der Vite-Community für ihr Feedback und ihre Beiträge, um sicherzustellen, dass die Turbopack-Benchmarks so genau wie möglich sind. Wir haben mit dem Vite-Team zusammengearbeitet, um die neuesten Turbopack-Benchmarks zu validieren und zahlreiche Verbesserungen an unserer Testmethodik vorzunehmen.

Als Ergebnis dieser Zusammenarbeit verwenden wir jetzt eine genauere Metrik, die die Zeit berücksichtigt, die in Reacts Update-Mechanismus verbracht wird. Wir konnten die React Fast Refresh-Zeit in Turbopack sowie in Next.js 13.1 mit webpack um 30 ms verbessern. Wir haben auch einen neuen Benchmark für die Verwendung von Vite mit SWC hinzugefügt, der eine verbesserte Leistung im Vergleich zur Standardverwendung von Vite mit Babel zeigt. Sehen Sie sich die aktualisierten Benchmarks an oder lesen Sie über die Testmethodik.

Probieren Sie die Turbopack-Alpha-Version heute in Next.js 13 mit next dev --turbo aus. Wenn Sie Feedback haben, lassen Sie es uns auf der GitHub-Diskussion wissen.

Fortgeschrittene Next.js-Middleware

Dank Ihres Feedbacks machen wir die Next.js-Middleware leistungsfähiger denn je. Mit 13.1 können Sie jetzt Antworten aus der Middleware zurückgeben sowie Header für die Anfrage setzen.

Diese API-Verbesserungen geben Ihnen neue Flexibilität, um jeden Teil des Next.js-Routing-Lebenszyklus anzupassen. Die Konfigurationsoption experimental.allowMiddlewareResponseBody in next.config.js wird nicht mehr benötigt.

Sie können jetzt einfacher Header für die Anfrage setzen sowie direkt antworten, ohne rewrite oder redirect verwenden zu müssen:

import { NextResponse } from 'next/server';
 
export function middleware(request: Request) {
  // Überprüfen, ob ein Benutzer Zugriff hat...
  if (!isAuthorized(request)) {
    return NextResponse.json({ message: 'Unauthorized' });
  }
 
  // Einen neuen Header hinzufügen, dies ändert die eingehenden Request-Header
  // die Sie in getServerSideProps und API-Routen lesen können
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13.1');
 
  return NextResponse.next({
    request: {
      // Neue Request-Header anwenden
      headers: requestHeaders,
    },
  });
}

Erfahren Sie mehr über fortgeschrittene Next.js-Middleware.

Weitere Verbesserungen

• @next/font unterstützt jetzt das Hinzufügen mehrerer Schriftgewichte und -stile in derselben Schriftdeklaration. Mehr erfahren.
• next/dynamic verwendet jetzt React-Primitive lazy() und <Suspense>. Die vorherige suspense-Option wird nicht mehr benötigt. Mit diesen Änderungen ist next/dynamic jetzt mit dem app-Verzeichnis kompatibel.
• create-next-app wurde mit einem neuen Design aktualisiert und enthält jetzt standardmäßig @next/font für automatisches Self-Hosting von Schriftarten ohne Layoutverschiebung. Probieren Sie es mit npx create-next-app@latest aus oder stellen Sie das Template bereit.
• Wir haben zahlreiche Verbesserungen am App Directory Playground vorgenommen, das einige der neuesten Funktionen und Konventionen des app-Verzeichnisses (Beta) in Next.js 13 zeigt. Stellen Sie Ihr eigenes bereit.
• Wir haben ein leistungsstarkes Bildergalerie-Template erstellt, das Platzhalter für Bilder, Lazy Loading, automatische Optimierung, Tastaturunterstützung und mehr enthält. Stellen Sie Ihr eigenes bereit.
• Wir haben eine Ressource erstellt, um zu verstehen, wie man eine große, Open-Source React- und Express.js-Anwendung zu Next.js migriert, einschließlich einer detaillierten Schritt-für-Schritt-Anleitung und Links zu spezifischen Commits.

Community

Next.js ist das Ergebnis der gemeinsamen Arbeit von über 2.400 einzelnen Entwicklern, Industriepartnern wie Google und Meta und unserem Kernteam bei Vercel. Mit über 3,6 Millionen npm-Downloads pro Woche und 97.900+ 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 Ihnen präsentiert von:

• Dem Next.js-Team: Balazs, Hannes, Jan, Jiachi, Jimmy, JJ, Josh, Sebastian, Shu, Steven, Tim und Wyatt.
• Dem Turbopack-Team: Alex, Donny, Justin, Leah, LongYinan, Maia, OJ, Tobias und Will.

Und den Beiträgen von: @aarnadlr, @aaronbrown-vercel, @aaronjy, @abayomi185, @ademilter, @adictonator, @adilansari, @adtc, @alantoa, @aleksa-codes, @alfred-mountfield, @alpha-xek, @andarist, @andykenward, @anujssstw, @artdevgame, @artechventure, @arturbien, @aziyatali, @bennettdams, @bertho-zero, @blue-devil1134, @bot08, @brkalow, @brvnonascimento, @chanceaclark, @chibicode, @chrisipanaque, @chunsch, @colinking, @craigwheeler, @ctjlewis, @cvolant, @danmindru, @davidnx, @delbaoliveira, @devvspaces, @dtinth, @ducanhgh, @duncanogle, @ethomson, @fantaasm, @feugy, @fomichroman, @gruz0, @haschikeks, @hughlilly, @idoob, @iiegor, @imranbarbhuiya, @ingovals, @inokawa, @ishaqibrahimbot, @ismaelrumzan, @jakemstar, @janicklas-ralph, @jaredpalmer, @jaykch, @jimcresswell, @joliss, @josephcsoti, @joshuaslate, @joulev, @jueungrace, @juliusmarminge, @karlhorky, @kikobeats, @kleintorres, @koenpunt, @koltong, @kosai106, @labyrinthitis, @lachlanjc, @laityned, @leerob, @leoortizz, @lorenzobloedow, @lucasassisrosa, @m7yue, @manovotny, @marcus-rise, @matthew-heath, @mattpr, @maxleiter, @maxproske, @meenie, @mmaaaaz, @mnajdova, @moetazaneta, @mrkldshv, @nathanhammond, @nekochantaiwan, @nfinished, @niedziolkamichal, @nocell, @notrab, @nuta, @nutlope, @obusk, @orionmiz, @peraltafederico, @reshmi-sriram, @reyrodrigez, @rightones, @rishabhpoddar, @saseungmin, @serkanbektas, @sferadev, @silvioprog, @sivtu, @soonoo, @sqve, @steven-tey, @sukkaw, @superbahbi, @teobler, @theevilhead, @thomasballinger, @timeyoutakeit, @valentinh, @ws-jm, @wxh06, @yasath, @yutsuten und @zekicaneksi.