🔗 Next.js Multi-Zones: 대규모 프로젝트를 위한 마이크로 프론트엔드 전략

 

🔗 Next.js Multi-Zones: 대규모 프로젝트를 위한 마이크로 프론트엔드 전략

Next.js는 기본적으로 하나의 앱을 기준으로 동작하지만, 규모가 커질수록 기능을 여러 개의 앱으로 나눠야 할 필요가 생깁니다. 이때 유용한 기능이 바로 Multi-Zones입니다.

---

✅ Multi-Zones란?

Multi-Zones는 하나의 도메인(예: example.com)에서 여러 개의 Next.js 앱을 각각 다른 경로에 배치하여 하나의 통합된 애플리케이션처럼 제공하는 구조입니다.

예시:

• / → main-app
• /blog → blog-app
• /admin → admin-app

각 앱은 서로 완전히 독립적으로 개발·배포할 수 있으면서도, 사용자에게는 하나의 사이트처럼 보입니다.

---

✅ 언제 사용하나?

• 팀별로 앱을 분리하고 싶은 경우
• 기능 단위로 배포 주기를 나누고 싶은 경우
• 다양한 기술 스택을 조합해 운영하고 싶은 경우 (예: 한 앱은 Next.js, 다른 앱은 Astro)

---

✅ 설정 방법

1. 앱 분리

예를 들어:

npx create-next-app main-app
npx create-next-app blog-app

2. 각 앱에 basePath 설정

// blog-app/next.config.js
module.exports = {
  basePath: '/blog',
  assetPrefix: '/blog',
};

3. 메인 앱에서 프록시 설정

// main-app/next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/blog/:path*',
        destination: 'http://localhost:3001/blog/:path*',
      },
    ];
  },
};

이렇게 하면 example.com/blog/*로 들어오는 요청을 blog-app으로 프록시하게 됩니다.

---

✅ 네비게이션 처리

반응형

• 같은 앱(Zone) 내에서는 <Link> 사용
• 다른 앱으로 이동할 때는 <a href="/blog"> 같은 전체 페이지 리로드 방식 사용

---

✅ 코드 공유는 어떻게?

여러 앱 간에 컴포넌트나 유틸을 공유하려면 모노레포 구조를 사용하는 것이 좋습니다. apps/, packages/ 구조로 나누고, pnpm, yarn workspaces, turborepo 등을 활용하세요.

---

✅ 요약

항목 설명

아키텍처	앱을 기능별로 분리 (Zone)
네비게이션	같은 Zone: Link, 다른 Zone: a
배포 전략	앱별 독립 배포 가능
코드 공유 방식	모노레포 기반 패키지 공유
활용 예시	대규모 SaaS, Admin 분리, 다양한 렌더링 방식 혼합 운영

---

🏁 마무리

Multi-Zones는 단순한 구조의 Next.js 앱에는 필요하지 않지만, 프로젝트가 커지고 조직이 분화될수록 매우 유용해집니다. 특히 모노레포와 함께 사용하면 대규모 프로젝트에서 유지보수성과 확장성을 동시에 잡을 수 있습니다.

---

 

Next.js, App Router, Multi-Zones, 모노레포, 마이크로 프론트엔드, 기능 분리, 독립 배포, Nginx Proxy, basePath, assetPrefix, SaaS 구조, 대규모 프론트엔드 아키텍처

---