Multi-Zones
例子
多区域是一种微前端方法，它将域上的大型应用程序分成较小的 Next.js 应用程序，每个应用程序服务于一组路径。当应用程序中有与其他页面无关的页面集合时，这非常有用。通过将这些页面移动到一个单独的区域（即一个单独的应用程序），您可以减少每个应用程序的大小，从而提高构建时间，并删除仅对其中一个区域必要的代码。
例如，假设您有以下一组页面，您希望将它们拆分：
/blog/*针对所有博客文章/dashboard/*对于用户登录到 Dashboard 时的所有页面/*对于您的网站中未被其他区域覆盖的部分
通过多区域支持，您可以创建三个在同一域上提供服务且对用户看起来相同的应用程序，但您可以独立开发和部署每个应用程序。
在同一区域内的页面之间导航将执行软导航，即不需要重新加载页面的导航。例如，在此图中，从 /导航到/products将是软导航。
从一个区域的页面导航到另一个区域的页面，例如从/ 到 /dashboard，将执行硬导航，卸载当前页面的资源并加载新页面的资源。经常一起访问的页面应位于同一区域，以避免硬导航。
如何定义一个区域
没有特殊的 API 来定义新区域。区域是一个普通的 Next.js 应用程序，您还可以在其中配置basePath以避免与其他区域中的页面和静态文件发生冲突。
/** @type {import('next').NextConfig} */
const nextConfig = {
basePath: "/blog",
};
处理未发送到更特定区域的所有路径的默认应用程序不需要basePath。
Next.js 资源（如 JavaScript 和 CSS）也将以basePath为前缀，以确保它们不会与其他区域的资源冲突。这些资源将在每个区域的/basePath/_next/...下提供。
如果区域提供的页面没有共享公共路径前缀，例如/home 和 /blog,那么您还可以设置 assetPrefix 以确保所有 Next.js 资产都在该区域的唯一路径前缀下提供，，而无需在应用程序中的其余路由中添加路径前缀。
如何将请求发送到正确的区域
在设置多区域时，您需要将路径发送到正确的区域，因为它们由不同的应用程序提供服务。您可以使用任何 HTTP 代理来实现这一点，但也可以使用其中一个 Next.js 应用程序来发送整个域的请求。
要使用 Next.js 应用程序发送到正确的区域，您可以使用rewrites。对于每个由不同区域提供服务的路径，您需要添加一个重写规则，将该路径发送到其他区域的域。例如：
async rewrites() {
return [
{
source: '/blog',
destination: `${process.env.BLOG_DOMAIN}/blog`,
},
{
source: '/blog/:path+',
destination: `${process.env.BLOG_DOMAIN}/blog/:path+`,
}
];
}
应该是由区域提供服务的 URL，包括协议和域名。这应该指向区域的生产域，但在本地开发中也可以用于将请求发送到localhost。
您需要知道: URL 路径应在一个区域内唯一。例如，两个区域尝试提供
/blog将会创建路由冲突。
区域之间的链接
链接到不同区域的路径应使用a标签，而不是 Next.js 的 <Link>组件。这是因为 Next.js 会尝试预取和软导航到<Link>组件中的任何相对路径，这在跨区域时将不起作用。
共享代码
组成不同区域的 Next.js 应用程序可以存在于任何存储库中。然而，将这些区域放在一个monorepo中通常更方便，以便更轻松地共享代码。对于存在于不同存储库中的区域，也可以使用公共或私有 NPM 包来共享代码。
由于不同区域的页面可能在不同时间发布，功能标志对于在不同区域中统一启用或禁用功能非常有用。
对于Vercel 上的 Next.js 应用程序，您可以使用monorepo通过单独的git push命令部署所有有关的的区域。