typescriptadvanced

Multi-Zone Application Setup

Compose multiple Next.js apps under one domain using rewrites for micro-frontend architecture.

typescriptPress ⌘/Ctrl + Shift + C to copy

// Main app: next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
  async rewrites() {
    return {
      beforeFiles: [
        // Route /blog/* to the blog app
        {
          source: '/blog/:path*',
          destination: 'https://blog.internal.example.com/blog/:path*',
        },
        // Route /docs/* to the docs app
        {
          source: '/docs/:path*',
          destination: 'https://docs.internal.example.com/docs/:path*',
        },
      ],
    };
  },
};

export default config;

// Blog app: next.config.ts
const blogConfig: NextConfig = {
  basePath: '/blog',
};

export default blogConfig;