如何使用多區域和 Next.js 構建微前端

多區域是一種微前端方法，它將一個域上的大型應用程式拆分為更小的 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+`,
        },
        {
            source: '/blog-static/:path+',
            destination: `${process.env.BLOG_DOMAIN}/blog-static/:path+`,
        }
    ];
}

destination 應該是一個由區域提供服務的 URL，包括方案和域。這應該指向區域的生產域，但它也可以用於在本地開發中將請求路由到 localhost。

值得注意：URL 路徑對於一個區域應該是唯一的。例如，兩個區域嘗試服務 /blog 將導致路由衝突。

使用代理路由請求

建議透過 rewrites 路由請求，以最大限度地減少請求的延遲開銷，但當需要在路由時進行動態決策時，也可以使用代理。例如，如果您使用功能標誌來決定路徑應該路由到哪裡，例如在遷移期間，您可以使用代理。

export async function proxy(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 包共享程式碼。

由於不同區域的頁面可能在不同時間釋出，功能標誌對於在不同區域之間統一啟用或停用功能非常有用。

伺服器操作

將 Server Actions 與多區域一起使用時，您必須明確允許使用者面向的源，因為您的使用者面向的域可能服務多個應用程式。在您的 next.config.js 檔案中，新增以下行：

const nextConfig = {
  experimental: {
    serverActions: {
      allowedOrigins: ['your-production-domain.com'],
    },
  },
}

有關更多資訊，請參閱 serverActions.allowedOrigins。