Micro-Frontends

Module Federation, independent deployment, shared state, and route-based splitting.

Overview

Micro-frontends enable independent development and deployment.

Key Concepts

• Module Federation — Share modules at runtime
• Independent Deployment — Deploy each micro-frontend separately
• Shared State — Communicate between apps
• Route-Based Splitting — Different apps per route
• Build Isolation — Separate build processes

Code Examples

// webpack.config.js (Module Federation)
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        shop: 'shop@http://localhost:3001/_next/static/chunks/remoteEntry.js',
        cart: 'cart@http://localhost:3002/_next/static/chunks/remoteEntry.js'
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true }
      }
    })
  ]
};

// Host app - app/layout.js
const Shop = React.lazy(() => import('shop/ShopApp'));
const Cart = React.lazy(() => import('cart/CartApp'));

export default function Layout({ children }) {
  return (
    <div>
      <nav>
        <Link href="/shop">Shop</Link>
        <Link href="/cart">Cart</Link>
      </nav>
      <main>{children}</main>
    </div>
  );
}

// app/shop/page.js
export default function ShopPage() {
  return (
    <Suspense fallback={<div>Loading Shop...</div>}>
      <Shop />
    </Suspense>
  );
}

Practice

Set up a micro-frontend architecture with Module Federation and shared auth.