멀티 존

멀티 존은 도메인의 대규모 애플리케이션을 일련의 경로를 제공하는 더 작은 Next.js 애플리케이션으로 분리하는 마이크로 프론트엔드 접근 방식입니다. 이는 애플리케이션의 다른 페이지와 관련이 없는 페이지 모음이 있을 때 유용합니다. 이러한 페이지를 별도의 존(즉, 별도의 애플리케이션)으로 이동함으로써 각 애플리케이션의 크기를 줄일 수 있어 빌드 시간이 개선되고 존 중 하나에만 필요한 코드를 제거할 수 있습니다.

예를 들어, 다음과 같은 페이지 세트를 분할하고 싶다고 가정해 봅시다:

• 모든 블로그 게시물을 위한 /blog/*
• 사용자가 대시보드에 로그인했을 때의 모든 페이지를 위한 /dashboard/*
• 다른 존에서 다루지 않는 웹사이트의 나머지 부분을 위한 /*

멀티 존 지원을 통해 동일한 도메인에서 제공되고 사용자에게는 동일하게 보이지만 각 애플리케이션을 독립적으로 개발하고 배포할 수 있는 세 개의 애플리케이션을 만들 수 있습니다.

같은 존 내의 페이지 간 이동은 소프트 네비게이션을 수행합니다. 소프트 네비게이션은 페이지를 다시 로드할 필요가 없는 네비게이션입니다. 예를 들어, 이 다이어그램에서 /에서 /products로 이동하는 것은 소프트 네비게이션이 됩니다.

한 존의 페이지에서 다른 존의 페이지로 이동할 때, 예를 들어 /에서 /dashboard로 이동할 때는 하드 네비게이션을 수행합니다. 이는 현재 페이지의 리소스를 언로드하고 새 페이지의 리소스를 로드합니다. 자주 함께 방문하는 페이지는 하드 네비게이션을 피하기 위해 같은 존에 있어야 합니다.

존을 정의하는 방법

존을 정의하기 위한 특별한 API는 없습니다. 존은 다른 존의 페이지 및 정적 파일과의 충돌을 피하기 위해 basePath를 구성하는 일반적인 Next.js 애플리케이션입니다.

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

더 구체적인 존으로 보내지지 않는 모든 경로를 처리할 기본 애플리케이션은 basePath가 필요하지 않습니다.

JavaScript와 CSS와 같은 Next.js 자산도 다른 존의 자산과 충돌하지 않도록 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+`,
        }
    ];
}

destination은 존에서 제공하는 URL이어야 하며, 스키마와 도메인을 포함해야 합니다. 이는 존의 프로덕션 도메인을 가리켜야 하지만, 로컬 개발에서 localhost로 요청을 라우팅하는 데도 사용할 수 있습니다.

알아두면 좋은 점: URL 경로는 존마다 고유해야 합니다. 예를 들어, 두 존이 /blog를 제공하려고 하면 라우팅 충돌이 발생합니다.

존 간 링크

다른 존의 경로로 연결하는 링크는 Next.js <Link> 컴포넌트 대신 a 태그를 사용해야 합니다. 이는 Next.js가 <Link> 컴포넌트의 모든 상대 경로를 프리페치하고 소프트 네비게이션을 시도하기 때문인데, 이는 존 간에는 작동하지 않습니다.

코드 공유

서로 다른 존을 구성하는 Next.js 애플리케이션은 어느 저장소에나 있을 수 있습니다. 그러나 이러한 존을 모노레포에 넣으면 코드를 더 쉽게 공유할 수 있어 편리한 경우가 많습니다. 서로 다른 저장소에 있는 존의 경우, 공개 또는 비공개 NPM 패키지를 사용하여 코드를 공유할 수도 있습니다.

서로 다른 존의 페이지가 서로 다른 시간에 릴리스될 수 있기 때문에, 기능 플래그는 서로 다른 존 전체에서 기능을 동시에 활성화하거나 비활성화하는 데 유용할 수 있습니다.

Vercel의 Next.js 애플리케이션의 경우, 모노레포를 사용하여 단일 git push로 영향을 받는 모든 존을 배포할 수 있습니다.