Mixing React + Next.js Micro Frontends in One Host (Hybrid MFE Architecture)

---

$ next build
ReferenceError: window is not defined
    at /apps/Main/.next/server/pages/login.js

Your Next.js host has been running fine. You add one new remote — a React MFE built with ModuleFederationPlugin — and the server build dies on hydration.

The fix is NOT to rewrite the React remote in Next.js. It's to know that a single NextFederationPlugin host can load BOTH plugin types simultaneously. The remote URL pattern alone tells Module Federation which plugin built each remote.

The full guide covers:

• Dual-plugin host config — one next.config.js declaring 4 React + 2 Next.js remotes
• URL pattern table — /auth/remoteEntry.js (React, ONE file) vs /products/_next/static/{ssr|chunks}/remoteEntry.js (Next.js, TWO files)
• The isServer ternary — only on Next.js remotes, never on React ones (no /ssr/ folder exists)
• ssr: false mandatory — even for Next.js remotes that have an SSR entry, because Redux + window
• Bridge pattern — onNavigate prop keeps React remotes framework-agnostic
• basePath + assetPrefix — prevent /_next/static/chunks/ collisions
• Same shared singleton config for both plugins — @myapp/store, react, redux
• Nginx reverse proxy — static files for React remotes, proxy_pass for Next.js Node.js processes
• 8 production pitfalls with WRONG/FIX side-by-side

Read the full guide with code examples → https://blog.srinudesetti.in/micro-frontend/nextjs/mixing-react-nextjs-micro-frontends