多区域
示例
多区域是一种微前端方法,它将一个大型应用程序在一个域上分隔成更小的 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,包括 scheme 和域。这应该指向该区域的生产域,但也可以用于在本地开发中将请求路由到 localhost
。
须知:URL 路径对于一个区域应该是唯一的。例如,两个区域尝试服务
/blog
将会创建路由冲突。
使用中间件路由请求
建议通过 rewrites
路由请求,以最大程度地减少请求的延迟开销,但是当需要动态决策来路由时,也可以使用中间件。例如,如果您正在使用功能标志来决定路径应路由到何处(例如在迁移期间),则可以使用中间件。
export async function middleware(request) {
const { pathname, search } = req.nextUrl;
if (pathname === '/your-path' && myFeatureFlag.isEnabled()) {
return NextResponse.rewrite(`${rewriteDomain}${pathname}${search});
}
}
在区域之间链接
链接到不同区域中的路径应使用 a
标签而不是 Next.js <Link>
组件。这是因为 Next.js 将尝试预取并软导航到 <Link>
组件中的任何相对路径,这在跨区域的情况下将不起作用。
共享代码
构成不同区域的 Next.js 应用程序可以存在于任何存储库中。但是,通常将这些区域放在 monorepo 中以更轻松地共享代码。对于位于不同存储库中的区域,也可以使用公共或私有 NPM 包共享代码。
由于不同区域中的页面可能会在不同的时间发布,因此功能标志对于跨不同区域统一启用或禁用功能非常有用。
对于 Vercel 上的 Next.js 应用程序,您可以使用 monorepo 通过一次 git push
部署所有受影响的区域。
服务器操作
当将 服务器操作 与多区域一起使用时,您必须显式允许面向用户的来源,因为您面向用户的域名可能服务于多个应用程序。在您的 next.config.js
文件中,添加以下行
const nextConfig = {
experimental: {
serverActions: {
allowedOrigins: ['your-production-domain.com'],
},
},
}
有关更多信息,请参阅 serverActions.allowedOrigins
。
这有帮助吗?