Multi-Zones

Multi-Zones sind ein Ansatz für Micro-Frontends, bei dem eine große Anwendung auf einer Domain in kleinere Next.js-Anwendungen aufgeteilt wird, die jeweils einen Satz von Pfaden bedienen. Dies ist nützlich, wenn es Sammlungen von Seiten gibt, die nicht mit den anderen Seiten der Anwendung zusammenhängen. Durch die Verlagerung dieser Seiten in eine separate Zone (d.h. eine separate Anwendung) können Sie die Größe jeder Anwendung reduzieren, was die Build-Zeiten verbessert und Code entfernt, der nur für eine der Zonen notwendig ist.

Nehmen wir zum Beispiel an, Sie haben folgende Seiten, die Sie aufteilen möchten:

• /blog/* für alle Blogbeiträge
• /dashboard/* für alle Seiten, wenn der Benutzer im Dashboard angemeldet ist
• /* für den Rest Ihrer Website, der nicht von anderen Zonen abgedeckt wird

Mit Multi-Zones-Unterstützung können Sie drei Anwendungen erstellen, die alle unter derselben Domain bereitgestellt werden und für den Benutzer gleich aussehen, aber Sie können jede der Anwendungen unabhängig entwickeln und bereitstellen.

Die Navigation zwischen Seiten in derselben Zone führt zu Soft Navigations, einer Navigation, die kein Neuladen der Seite erfordert. In diesem Diagramm wäre beispielsweise die Navigation von / zu /products eine Soft Navigation.

Die Navigation von einer Seite in einer Zone zu einer Seite in einer anderen Zone, z.B. von / zu /dashboard, führt zu einer Hard Navigation, bei der die Ressourcen der aktuellen Seite entladen und die Ressourcen der neuen Seite geladen werden. Seiten, die häufig zusammen aufgerufen werden, sollten in derselben Zone liegen, um Hard Navigations zu vermeiden.

Wie eine Zone definiert wird

Es gibt keine speziellen APIs, um eine neue Zone zu definieren. Eine Zone ist eine normale Next.js-Anwendung, in der Sie auch einen basePath konfigurieren, um Konflikte mit Seiten und statischen Dateien in anderen Zonen zu vermeiden.

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: '/blog',
}

Die Standardanwendung, die alle Pfade behandelt, die nicht an eine spezifischere Zone gesendet werden, benötigt keinen basePath.

Next.js-Assets wie JavaScript und CSS werden ebenfalls mit basePath präfixiert, um sicherzustellen, dass sie nicht mit Assets aus anderen Zonen in Konflikt geraten. Diese Assets werden unter /basePath/_next/... für jede der Zonen bereitgestellt.

Wenn die Zone Seiten bedient, die kein gemeinsames Pfadpräfix teilen, wie z.B. /home und /blog, können Sie auch assetPrefix setzen, um sicherzustellen, dass alle Next.js-Assets unter einem eindeutigen Pfadpräfix für die Zone bereitgestellt werden, ohne ein Pfadpräfix für die restlichen Routen in Ihrer Anwendung hinzuzufügen.

Wie Anfragen an die richtige Zone geroutet werden

Mit dem Multi-Zones-Setup müssen Sie die Pfade an die richtige Zone routen, da sie von verschiedenen Anwendungen bereitgestellt werden. Sie können jeden HTTP-Proxy dafür verwenden, aber eine der Next.js-Anwendungen kann auch verwendet werden, um Anfragen für die gesamte Domain zu routen.

Um mit einer Next.js-Anwendung zur richtigen Zone zu routen, können Sie rewrites verwenden. Für jeden Pfad, der von einer anderen Zone bedient wird, würden Sie eine Rewrite-Regel hinzufügen, um diesen Pfad an die Domain der anderen Zone zu senden. Zum Beispiel:

async rewrites() {
    return [
        {
            source: '/blog',
            destination: `${process.env.BLOG_DOMAIN}/blog`,
        },
        {
            source: '/blog/:path+',
            destination: `${process.env.BLOG_DOMAIN}/blog/:path+`,
        }
    ];
}

destination sollte eine URL sein, die von der Zone bedient wird, einschließlich Schema und Domain. Dies sollte auf die Produktionsdomain der Zone zeigen, kann aber auch verwendet werden, um Anfragen in der lokalen Entwicklung an localhost zu routen.

Gut zu wissen: URL-Pfade sollten für eine Zone eindeutig sein. Zum Beispiel würden zwei Zonen, die /blog bedienen wollen, einen Routing-Konflikt verursachen.

Verlinkung zwischen Zonen

Links zu Pfaden in einer anderen Zone sollten ein a-Tag anstelle der Next.js <Link>-Komponente verwenden. Dies liegt daran, dass Next.js versucht, jeden relativen Pfad in der <Link>-Komponente vorab abzurufen und per Soft Navigation aufzurufen, was über Zonen hinweg nicht funktionieren wird.

Code teilen

Die Next.js-Anwendungen, die die verschiedenen Zonen bilden, können in jedem Repository leben. Es ist jedoch oft praktisch, diese Zonen in einem Monorepo zu platzieren, um Code einfacher teilen zu können. Für Zonen, die in verschiedenen Repositories leben, kann Code auch über öffentliche oder private NPM-Pakete geteilt werden.

Da die Seiten in verschiedenen Zonen zu unterschiedlichen Zeiten veröffentlicht werden können, können Feature Flags nützlich sein, um Funktionen über die verschiedenen Zonen hinweg einheitlich zu aktivieren oder zu deaktivieren.

Für Next.js auf Vercel-Anwendungen können Sie ein Monorepo verwenden, um alle betroffenen Zonen mit einem einzigen git push bereitzustellen.