BackZurück zum Blog

Next.js 6 und Nextjs.org

Next.js 6 bietet statische Exporte ohne Konfiguration, eine App-Komponente, Babel 7 und mehr

Bei der ZEIT Day Keynote dieses Jahres begannen wir mit der Vorstellung unserer Open-Source-Projekte, einschließlich der Metriken von Next.js. Mit über 25000 Sternen auf GitHub und mehr als 10000 Websites, die bereits darauf basieren, sind wir von seinem Wachstum begeistert und freuen uns über die zunehmende Anzahl von Projekten, die darauf aufbauen.

Heute sind wir stolz darauf, die produktionsreife Version von Next.js 6 vorzustellen, die folgende Features bietet:

  • Statische Exporte ohne Konfiguration. Standardmäßig ist keine next.config.js erforderlich
  • _app.js, einen Erweiterungspunkt, der Seitenübergänge, Error Boundaries und mehr ermöglicht
  • Babel 7 und Unterstützung für die Fragment-Syntax <>
  • Erweiterte Integrationstests mit starkem Fokus auf Sicherheit
  • Flow-Annotationen im Core-Codebase

Zusätzlich zur Version 6.0 präsentieren wir Next.js auf seiner eigenen Homepage nextjs.org mit folgenden Features:

  • Die gesamte Next.js-Dokumentation an einem Ort. Kein Nachschlagen mehr in der README-Datei auf GitHub
  • Die Zusammenführung von https://learnnextjs.com in https://nextjs.org/learn
  • Eine Vorstellung der beeindruckendsten mit Next.js erstellten Websites

Statische React-Anwendungen

Next.js konzentriert sich auf die Idee des Pre-Rendering als Mittel zur Erreichung hoher Leistung. Pre-Rendering gibt es in zwei Formen:

  • Server-Rendering: Bei dem jede Anfrage ein Rendering auslöst. Dadurch muss der Endbenutzer nicht auf den Download von JS warten, um Daten zu nutzen
  • Statisches Rendering: Bei dem statische Dateien ausgegeben werden, die direkt ohne Code-Ausführung auf dem Server bereitgestellt werden können

Bisher war der statische Export in Next.js sehr leistungsfähig, aber nicht ausreichend benutzerfreundlich. Es war erforderlich, eine manuelle Routenkarte einzurichten, selbst wenn keine benutzerdefinierten Routen verwendet wurden.

Mit Next.js 6 generieren wir die Routenkarte automatisch für Sie basierend auf dem Inhalt Ihres pages/-Verzeichnisses. Wenn Sie keine erweiterten benutzerdefinierten Routen verwenden, müssen Sie keine Änderungen an next.config.js vornehmen. Führen Sie einfach aus:

next build
next export

Ein Beispiel finden Sie auf dieser Website, die statisch auf Vercel bereitgestellt wurde. Der Quellcode der Website ist ebenfalls verfügbar.

App-Komponente

Next.js bietet einen Erweiterungspunkt namens _document.js. Wenn definiert, können Sie das oberste Dokument Ihrer Anwendung überschreiben, das das <html>-Element rendert.

_document.js ermöglicht eine leistungsstarke Erweiterbarkeit, hat jedoch einige ernsthafte Einschränkungen. Beispielsweise kann React <html> oder <body> nicht direkt auf der Client-Seite rendern, daher ist _document.js größtenteils auf die anfängliche Pre-Rendering-Phase beschränkt.

Um einige andere leistungsstarke Anwendungsfälle zu ermöglichen, führen wir _app.js ein, die oberste Komponente, die jede Seite umschließt.

Einige Unterschiede zwischen _document.js und _app.js

Schauen wir uns einige Anwendungsfälle an, die durch die Definition von _app.js ermöglicht werden.

Seitenübergänge

Beispiel für Seitenübergänge: page-transitions-app-next.vercel.app von Xavier Cazalot (Quellcode)

In diesem Beispiel kann jede Seite unabhängig aufgerufen, vorgerendert und lazy-geladen werden. Bei clientseitigen Übergängen sind jedoch flüssige Animationen möglich.

Bessere Apollo- und Redux-Integration

Wir hatten bereits zahlreiche Beispiele für die Integration von Daten- und Zustandsverwaltungsframeworks wie Apollo und Redux.

Mit _app.js ist es jedoch noch einfacher, diese einzubinden. Hier sind einige Beispiele:

Bessere Fehlerbehandlung

React bietet eine Komponentenmethode namens componentDidCatch, mit der Sie Ausnahmen erfassen und behandeln können, die von verschachtelten Komponenten auf der Client-Seite ausgelöst werden.

In vielen Fällen möchten Sie aufgrund der unerwarteten Natur dieser Ausnahmen alle gleich auf der obersten Ebene behandeln.

_app.js ist daher ein guter Ort, um diese componentDidCatch-Logik zu definieren. Hier ist ein Beispiel für Error Boundaries in Aktion (Quellcode)

Babel 7

Wir haben Babel auf die neueste Version 7 aktualisiert. Damit kommen einige großartige neue Features und Verbesserungen.

JSX-Fragmente

React 16.2 führte die Fragment-API ein, mit der Sie eine Liste von Elementen ausdrücken können, ohne sie in ein beliebiges HTML-Element wie <div> einwickeln zu müssen:

render() {
  return <React.Fragment>
    <A />,
    <B />
  </React.Fragment>
}

Das Schreiben kann mühsam sein. Mit Next.js 6 können Sie die neue JSX-Fragment-Syntax verwenden, um Fragmente einfacher zu erstellen:

render() {
  return <>
    <A />,
    <B />
  </>
}

Geschachtelte .babelrc

Wenn Sie in Ihren Next.js-Anwendungen ein Verzeichnis haben, das eine andere Babel-Konfiguration erfordert, können Sie jetzt eine spezifische .babelrc-Datei in diesem Verzeichnis einbinden:

src/
  .babelrc      # Allgemeine .babelrc
  components/
    i18n/
      .babelrc  # Diese .babelrc gilt nur für dieses Verzeichnis

Erstklassige TypeScript-Unterstützung

Als wir Universal webpack ankündigten, wiesen wir darauf hin, dass TypeScript über ts-loader verwendet werden kann, da wir webpack jetzt sowohl auf dem Server als auch auf dem Client ausführen.

Babel 7 bietet integrierte Unterstützung für TypeScript (zuvor wurde nur Flow von Babel unterstützt).

Um es zu verwenden, installieren Sie einfach die neueste Version von @zeit/next-typescript oder sehen Sie sich dieses Beispiel an.

Nextjs.org

Wir freuen uns sehr, die neue nextjs.org vorzustellen, die vom Next.js-Core-Mitwirkenden Jimmy Moon erstellt wurde.

Zu Beginn zeigen wir ein beschleunigtes Video, das Ihnen in 5 Minuten zeigt, wie Sie eine PWA mit Server-Rendering von Grund auf erstellen:

Das Eröffnungsvideo von nextjs.org

Ein Ort für unsere Dokumentation

Wenn Sie schnell etwas nachschlagen müssen, gehen Sie einfach zu nextjs.org/docs:

Die Dokumentation spiegelt immer die neueste stabile Version wider

Schritt für Schritt lernen

Bisher haben wir Anfängern empfohlen, zu https://learnnextjs.com zu gehen, um eine Schritt-für-Schritt-Anleitung (mit Quizzen!) zum Einstieg in Next.js zu erhalten.

Jetzt haben wir sie direkt in nextjs.org/learn integriert, um den Einstieg noch einfacher zu machen:

Der einfachste Weg, Next.js zu lernen

Inspiration holen

Wir präsentieren jetzt eine Auswahl einiger schön gestalteter Websites und Anwendungen, die auf Next.js basieren. Gehen Sie zu nextjs.org/showcase, um sich inspirieren zu lassen, oder reichen Sie Ihre eigene ein!

Auswahl von Projekten, die mit Next.js erstellt wurden