Next.js schrittweise einführen

Next.js wurde für die schrittweise Einführung konzipiert. Mit Next.js können Sie Ihren bestehenden Code weiterverwenden und so viel (oder wenig) React hinzufügen, wie Sie benötigen. Indem Sie klein beginnen und nach und nach mehr Seiten hinzufügen, vermeiden Sie eine komplette Neuentwicklung, die Ihre Feature-Arbeit behindern könnte.

Viele Unternehmen müssen ihren Tech-Stack modernisieren, um Kosten zu senken, die Produktivität der Entwickler zu steigern und ihren Kunden das beste Erlebnis zu bieten. Die komponentenbasierte Entwicklung hat die Bereitstellungsgeschwindigkeit und Wiederverwendbarkeit moderner Codebasen erheblich verbessert.

Und mit über 8 Millionen Downloads/Monat ist React die führende komponentenbasierte Wahl für Entwickler. Next.js, das React-Framework für die Produktion, ermöglicht es Ihnen, React schrittweise einzuführen.

Motivation

In einer zunehmend mobilen Welt ist die Verbesserung und Überwachung Ihrer Core Web Vitals entscheidend für den Erfolg. Ihre Kunden sind wahrscheinlich weltweit verteilt und haben unterschiedliche Internetgeschwindigkeiten. Jede zusätzliche Sekunde (oder Millisekunde), die auf das Laden einer Seite oder die Ausführung einer Aktion gewartet werden muss, kann den Unterschied zwischen einem Verkauf, einem Eindruck oder einer Konversion ausmachen.

Wenn Sie Ihren Tech-Stack modernisieren, könnten Sie vor Herausforderungen stehen wie:

• Ihre Anwendung hat Jahre alten Legacy-Code, der schwer zu verstehen ist und Jahre (und Millionen von Dollar) kosten würde, um ihn komplett neu zu schreiben.
• Ihre Ladezeiten nehmen weiter zu, während die Größe und Komplexität der Anwendung wächst. Einfache Marketing-Seiten sind genauso langsam wie die komplexesten Seiten.
• Sie versuchen, Ihr Entwicklungsteam zu vergrößern, stoßen aber auf Probleme, wenn Sie weitere Entwickler in die bestehende Codebasis einbinden wollen.
• Sie haben veraltete CI/CD- und DevOps-Prozesse, die die Produktivität der Entwickler verringern und es schwierig machen, neue Änderungen sicher und zuverlässig auszurollen.
• Ihre Anwendung ist nicht responsiv für mobile Geräte, und es ist unmöglich, das globale Seitenstyling zu aktualisieren, ohne andere Teile der Anwendung zu beschädigen.

Sie wissen, dass Sie etwas tun müssen, aber es kann überwältigend sein, zu verstehen, wo Sie anfangen sollen. Durch die schrittweise Einführung von Next.js können Sie beginnen, die oben genannten Probleme zu lösen und Ihre Anwendung zu transformieren. Lassen Sie uns einige verschiedene Strategien zur Einführung von Next.js in Ihren bestehenden Tech-Stack diskutieren.

Strategien

Subpfad

Die erste Strategie besteht darin, Ihren Server oder Proxy so zu konfigurieren, dass alles unter einem bestimmten Subpfad auf eine Next.js-App verweist. Beispielsweise könnte Ihre bestehende Website unter example.com liegen, und Sie könnten Ihren Proxy so konfigurieren, dass example.com/store einen Next.js-E-Commerce-Store ausliefert.

Mit basePath können Sie die Assets und Links Ihrer Next.js-Anwendung so konfigurieren, dass sie automatisch mit Ihrem neuen Subpfad /store funktionieren. Da jede Seite in Next.js ihre eigene eigenständige Route ist, werden Seiten wie pages/products.js in Ihrer Anwendung zu example.com/store/products geroutet.

module.exports = {
  basePath: '/store',
};

Um mehr über basePath zu erfahren, lesen Sie unsere Dokumentation.

(Hinweis: Diese Funktion wurde in Next.js 9.5 und höher eingeführt. Wenn Sie ältere Versionen von Next.js verwenden, aktualisieren Sie bitte, bevor Sie sie ausprobieren.)

Rewrites

Die zweite Strategie besteht darin, eine neue Next.js-App zu erstellen, die auf die Stamm-URL Ihrer Domain verweist. Dann können Sie rewrites in next.config.js verwenden, um einige Subpfade an Ihre bestehende App zu proxien.

Angenommen, Sie haben eine Next.js-App erstellt, die von example.com ausgeliefert werden soll, mit der folgenden next.config.js. Nun werden Anfragen für die Seiten, die Sie dieser Next.js-App hinzugefügt haben (z.B. /about, wenn Sie pages/about.js hinzugefügt haben), von Next.js verarbeitet, und Anfragen für jede andere Route (z.B. /dashboard) werden an proxy.example.com geproxied.

module.exports = {
  async rewrites() {
    return [
      // wir müssen ein No-Op-Rewrite definieren, um die Überprüfung
      // aller Seiten/statischen Dateien auszulösen, bevor wir versuchen zu proxien
      {
        source: '/:path*',
        destination: '/:path*',
      },
      {
        source: '/:path*',
        destination: `https://proxy.example.com/:path*`,
      },
    ];
  },
};

Um mehr über Rewrites zu erfahren, lesen Sie unsere Dokumentation.

Micro-Frontends mit Monorepos und Subdomains

Next.js und Vercel machen es einfach, Micro-Frontends einzuführen und als Monorepo zu deployen. Dies ermöglicht es Ihnen, Subdomains zu verwenden, um neue Anwendungen schrittweise einzuführen. Einige Vorteile von Micro-Frontends:

• Kleinere, kohärentere und wartbarere Codebasen.
• Skalierbarere Organisationen mit entkoppelten, autonomen Teams.
• Die Möglichkeit, Teile des Frontends auf inkrementelle Weise zu aktualisieren oder sogar neu zu schreiben.

Die Architektur eines Monorepos, das auf Vercel deployed wird.

Sobald Ihr Monorepo eingerichtet ist, pushen Sie Änderungen wie gewohnt in Ihr Git-Repository, und Sie werden sehen, wie die Commits in den mit Vercel verbundenen Projekten deployed werden. Verabschieden Sie sich von veralteten CI/CD-Prozessen.

Ein Beispiel für Deployment-URLs, die von einer Git-Integration bereitgestellt werden.

Fazit

Next.js wurde für die schrittweise Einführung in Ihren bestehenden Tech-Stack entwickelt. Die Vercel-Plattform macht es zu einer kollaborativen Erfahrung mit Deploy-Previews für jede Codeänderung, indem sie nahtlos mit GitHub, GitLab und Bitbucket integriert.

• Änderungen sofort lokal mit Fast Refresh vorab anzeigen, um die Produktivität der Entwickler zu steigern.
• Pushen Sie Änderungen, um eine Branch Preview zu erstellen, die für die Zusammenarbeit mit Stakeholdern optimiert ist.
• Deployen Sie in die Produktion mit Vercel durch Mergen des PRs. Keine komplizierten DevOps.

Um mehr zu erfahren, lesen Sie über Subpfade und Rewrites oder deployen Sie ein Beispiel mit Micro-Frontends.