Menu

1 / 2

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

DEV Community·Srinu Web developer·6 months ago
#HvtrDsSJ
#nextjs#react#microfrontend#srinudesetti#next
Reading 0:00
15s threshold

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

Enter fullscreen mode

Exit fullscreen mode

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…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.