多区域

多区域是一种微前端方法，它将域上大型应用程序拆分为较小的 Next.js 应用程序，每个应用程序都服务于一组路径。当应用程序中存在与其他页面无关的页面集合时，这很有用。通过将这些页面移动到单独的区域（即单独的应用程序），您可以减少每个应用程序的大小，从而缩短构建时间并删除仅对其中一个区域必需的代码。由于应用程序是解耦的，因此多区域还允许域上的其他应用程序使用它们自己的框架选择。

例如，假设您有一组希望拆分的页面：

• /blog/* 用于所有博客文章
• /dashboard/* 用于用户登录仪表板时的所有页面
• /* 用于未被其他区域涵盖的网站其余部分

借助多区域支持，您可以创建三个应用程序，这些应用程序都在同一域上提供服务，并且对用户而言看起来相同，但您可以独立开发和部署每个应用程序。

在同一区域内页面之间导航将执行软导航，即无需重新加载页面的导航。例如，在此图中，从/ 导航到 /products 将是软导航。

从一个区域中的页面导航到另一个区域中的页面，例如从 / 导航到 /dashboard，将执行硬导航，卸载当前页面的资源并加载新页面的资源。经常一起访问的页面应位于同一区域中，以避免硬导航。

如何定义区域

区域是一个普通的 Next.js 应用程序，您也可以在其中配置assetPrefix 以避免与其他区域中的页面和静态文件发生冲突。

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

Next.js 资产（例如 JavaScript 和 CSS）将在其前缀中添加 assetPrefix，以确保它们不会与来自其他区域的资产发生冲突。这些资产将在每个区域的 /assetPrefix/_next/... 下提供服务。

处理所有未路由到另一个更具体区域的路径的默认应用程序不需要 assetPrefix。

在低于 Next.js 15 的版本中，您可能还需要其他重写来处理静态资产。在 Next.js 15 中，这不再需要。

/** @type {import('next').NextConfig} */
const nextConfig = {
  assetPrefix: '/blog-static',
  async rewrites() {
    return {
      beforeFiles: [
        {
          source: '/blog-static/_next/:path+',
          destination: '/_next/:path+',
        },
      ],
    }
  },
}

如何将请求路由到正确的区域

通过多区域设置，您需要将路径路由到正确的区域，因为它们由不同的应用程序提供服务。您可以使用任何 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+`,
        }
    ];
}

destination 应为区域提供的 URL，包括方案和域。这应该指向区域的生产域，但也可以用于将请求路由到本地开发中的 localhost。

注意：URL 路径应对区域唯一。例如，两个试图提供 /blog 的区域将导致路由冲突。

使用中间件路由请求

建议通过rewrites 路由请求以最大程度地减少请求的延迟开销，但在路由需要动态决策时也可以使用中间件。例如，如果您正在使用功能标志来决定路径应路由到何处（例如在迁移期间），则可以使用中间件。

export async function middleware(request) {
  const { pathname, search } = req.nextUrl;
  if (pathname === '/your-path' && myFeaturFlag.isEnabled()) {
    return NextResponse.rewrite(`${rewriteDomain}${pathname}${search});
  }
}

区域间链接

链接到不同区域中的路径时，应使用a标签而不是Next.js的<Link>组件。这是因为Next.js会尝试预取并软导航到<Link>组件中的任何相对路径，这在跨区域时将无法工作。

代码共享

构成不同区域的Next.js应用程序可以位于任何存储库中。但是，将这些区域放在单体仓库中通常更方便，以便更容易地共享代码。对于位于不同存储库中的区域，也可以使用公共或私有NPM包来共享代码。

由于不同区域中的页面可能在不同的时间发布，因此功能标记对于在不同区域之间统一启用或禁用功能非常有用。

对于Vercel上的Next.js应用程序，您可以使用单体仓库通过单个git push部署所有受影响的区域。