Next.js 5.1: Schnellere Seitenauflösung, Umgebungskonfiguration & mehr

Wir freuen uns, Next.js 5.1 vorzustellen, das Unterstützung für Umgebungskonfiguration, Phasen, Source Maps und neue Next.js-Plugins bietet.

Es wurden bedeutende Leistungsverbesserungen eingeführt: Die Seitenauflösung ist 102x schneller und Fehlerseiten werden effizienter geladen.

Zum Aktualisieren oder Installieren führen Sie folgenden Befehl aus:

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

Neben der Aktualisierung von Next.js aktualisieren wir auch die Peer-Abhängigkeiten react und react-dom

Vergessen Sie nicht, auch next-plugins wie @zeit/next-css, @zeit/next-sass, @zeit/next-less oder @zeit/next-typescript zu aktualisieren.

Schnellere Seitenauflösung

Dank der architektonischen Änderungen in Next.js 5.0 konnten wir die Logik vereinfachen, die Seiten basierend auf dem URL-Pfad auflöst. Diese Änderungen basieren auf Recherchen von @oliviertassinari. Zuvor dauerte die Auflösung einer Seite durchschnittlich 2,347ms. Mit der neuen Logik dauert die Auflösung derselben Seite durchschnittlich 0,023ms. Das ist eine 102x schnellere Ausführung einer der am häufigsten aufgerufenen Methoden in Next.js-Anwendungen.

Seitenauflösung pro Anfrage. Links Next.js 5.0, rechts Next.js 5.1

Umgebungskonfiguration

Typische Node.js-Umgebungen hängen oft davon ab, Umgebungsvariablen an die Anwendung zu übergeben, zum Beispiel: API_URL=https://api.vercel.com node index.js. Dann können Sie API_URL überall in Ihrer Anwendung mit process.env.API_URL verwenden.

Beim universellen Rendering ist process.env auf der Client-Seite nicht verfügbar. Daher führen wir mit Next.js 5.1 eine neue Funktion ein: publicRuntimeConfig und serverRuntimeConfig. Diese können in next.config.js festgelegt werden und sind dann über das Modul next/config verfügbar.

module.exports = {
  serverRuntimeConfig: {
    // Nur auf der Server-Seite verfügbar
    mySecret: 'secret',
  },
  publicRuntimeConfig: {
    // Auf Server und Client verfügbar
    staticFolder: '/static',
  },
};

Sowohl serverRuntimeConfig als auch publicRuntimeConfig werden in next.config.js definiert

import getConfig from 'next/config';
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
 
console.log(serverRuntimeConfig.mySecret); // Nur auf der Server-Seite verfügbar
console.log(publicRuntimeConfig.staticFolder); // Auf Server und Client verfügbar
 
export default function Index() {
  return (
    <div>
      <img src={`${publicRuntimeConfig.staticFolder}/logo.png`} />
    </div>
  );
}

Die Methode getConfig aus dem Modul next/config wird verwendet, um Konfigurationswerte abzurufen

Verbessertes Fehlerhandling

Bisher hatte Next.js einen speziellen Mechanismus zur Fehlerbehandlung, um Serverfehler beim Laden von Seiten-Bundles zu erkennen. Ein Seiten-Bundle ist die JavaScript-Datei, die auf der Client-Seite geladen wird, um die Seite zu laden, zum Beispiel /_next/-/page/index.js.

Wenn ein Fehler auftrat, wie eine Build-ID-Abweichung, wurde das Seiten-Bundle trotzdem mit einem HTTP-Status 200 bereitgestellt, aber der Inhalt war eine JSON-Darstellung eines Fehlers, der vom Next.js-Server generiert wurde. Der Grund dafür war, dass es eine Client-seitige Fehlerbehandlung gab, die von mehr als nur einem 404-Status der Seite abhing. Diese Lösung funktionierte sehr gut, bis Sie versuchten, Assets auf einen statischen Dateihost oder CDN hochzuladen, der keinen Fallback unterstützt.

Mit Next.js 5.1 haben wir die Fehlerbehandlungslogik komplett überarbeitet. Wenn ein Seiten-Bundle einen HTTP-Status 404 zurückgibt, erkennt der Router dies automatisch und lädt die Seite neu, um sicherzustellen, dass die Navigation zwischen Multi-Zonen möglich ist.

Bei der Neugestaltung dieser Logik haben wir den Router.onAppUpdated-Hook entfernt, der hauptsächlich zum Auslösen eines Seiten-Neuladens verwendet wurde. Jetzt wird die Seite automatisch neu geladen.

Zusätzlich haben wir eine neue Reihe von Integrationstests für die Fehlerbehebung im Entwicklungsmodus hinzugefügt, um Regressionen bei der Fehlerbehebung in zukünftigen Versionen zu vermeiden.

Phasen / Konfigurationsfunktion

Einige next-plugins wie @zeit/next-css werden nur benötigt, wenn Next.js sich im Entwicklungsmodus befindet oder wenn next build ausgeführt wird.

Sie können jetzt eine Funktion exportieren, die das Konfigurationsobjekt zurückgibt, anstatt das Objekt sofort zu exportieren.

module.exports = (phase, { defaultConfig }) => config;

next.config.js exportiert eine Funktion, die die Benutzerkonfiguration zurückgibt

Durch das Exportieren einer Funktion erhalten Sie Zugriff auf die phase, in der Next.js ausgeführt wird, zum Beispiel Entwicklung, Produktion, Build, Export. Dies ermöglicht es Plugins, nur bei Bedarf geladen zu werden, und gibt auch Zugriff auf die Standardkonfiguration.

Wir haben ein neues Modul namens next/constants eingeführt, das häufig verwendete Konstanten enthält, einschließlich Phasen.

const {PHASE_DEVELOPMENT_SERVER} = require('next/constants')
module.exports = (phase, {defaultConfig}){
  if(phase === PHASE_DEVELOPMENT_SERVER) {
    return { /* Nur Entwicklungs-Konfigurationsoptionen hier */ }
  }
 
  return { /* Konfigurationsoptionen für alle Phasen außer Entwicklung hier */ }
}

Eine next.config.js, die die Entwicklungsphase überprüft

Verbesserte Produktions-Source-Map-Generierung

Mit der Einführung von universellem Webpack in Next.js 5 wurde das Hinzufügen von Source Maps zu Ihrer Produktionsumgebung so einfach wie das Hinzufügen einiger Zeilen zu next.config.js:

module.exports = {
  webpack(config, { dev }) {
    if (!dev) {
      config.devtool = 'source-map';
      for (const plugin of config.plugins) {
        if (plugin['constructor']['name'] === 'UglifyJsPlugin') {
          plugin.options.sourceMap = true;
          break;
        }
      }
    }
    return config;
  },
};

Manuelles Aktivieren von Source Maps in next.config.js

@zeit/next-source-maps kann einem Projekt hinzugefügt werden, um automatisch Produktions-Source Maps für Sie zu aktivieren. Fügen Sie Folgendes zu next.config.js hinzu:

const withSourceMaps = require('@zeit/next-source-maps');
module.exports = withSourceMaps();

Verwendung von @zeit/next-source-maps zum Aktivieren von Source Maps in next.config.js

Dies ermöglichte die Ausgabe von Source Maps für alle Dateien außer einer, app.js. Der Grund dafür war, dass app.js aus mehreren Dateien (manifest.js und commons.js) bestand, die mit einem Webpack-Plugin kombiniert wurden. Ein Nebeneffekt war, dass Webpack keine Source Maps für die kombinierte Datei generieren konnte.

Dank eines Pull Requests von @ptomasroos wurde die app.js-Datei durch main.js ersetzt. Diese Datei enthält den Code, der zuvor in manifest.js und commons.js kompiliert wurde, und Webpack wird eine Source Map für main.js generieren. Source Maps werden automatisch bereitgestellt, sodass externe Fehlerverfolgungstools die tatsächliche Datei und Zeilennummer anzeigen können, wenn Fehler erkannt werden.

Der Quellcode wird im Sources-Panel angezeigt

Neue Plugins / Verbesserungen an bestehenden

Wir haben zwei neue offizielle Plugins eingeführt. @zeit/next-bundle-analyzer ermöglicht das einfache Einrichten von webpack-bundle-analyzer, um die Server-seitigen und Client-seitigen Bundles separat zu analysieren.

Zusätzlich gab es viele Verbesserungen an den offiziellen css, less und sass Plugins in Bezug auf Hot Reloading und Bundling. Zum Beispiel gibt es im Entwicklungsmodus keinen Flash ungestylter Inhalte mehr. Und Stile in Unterkomponenten werden ebenfalls erkannt.

Community

Sie können die Next.js-Community jetzt auf GitHub finden. Kürzlich wurde dort eine Liste bemerkenswerter Unternehmen, die Next.js verwenden, veröffentlicht. Sie können gerne Projekte in dem Thread posten.

Dank

Wir möchten allen danken, die zu Next.js für diese Version beigetragen haben. Ob durch Beiträge zum Kern oder durch Erweiterung und Verbesserung unseres ständig wachsenden Beispielverzeichnisses.

Wenn Sie daran interessiert sind, zu Next.js beizutragen, finden Sie Probleme mit den Labels good first issue oder help wanted.

Ein besonderer Dank geht an Trulia für ihr wertvolles Feedback in Bezug auf die Umgebungskonfiguration und die neue Fehlerseitenbehandlung.