VOOZH about

URL: https://dev.to/srinu_desetti/setting-up-a-nextjs-micro-frontend-host-app-complete-guide-4mg

⇱ Setting Up a Next.js Micro Frontend Host App: Complete Guide - DEV Community


👁
Your Next.js Module Federation setup builds fine. Remotes appear to load. Components render blank.

No errors. No stack trace. Nothing.

# Missing from your package.json:
"dev": "cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next dev -p 5000"

Without that flag, Next.js uses its internal bundled webpack instead of the locally installed webpack 5. The Module Federation plugin needs access to webpack's container API — the bundled version doesn't expose it.

Your remotes will attempt to load but the container negotiation fails silently.

The full guide covers:

  • Complete production next.config.js with NextFederationPlugin
  • React remotes vs Next.js remotes path differences (isServer ternary)
  • Why eager: true breaks SSR hydration in Next.js
  • Shared Redux singleton setup across host + all remotes
  • next/dynamic with ssr: false for remote loading
  • PWA + Bundle Analyzer wrappers
  • CSP headers for Module Federation
  • 18 code examples with local vs production configurations

Read the full guide with code examples → https://blog.srinudesetti.in/micro-frontend/nextjs/nextjs-micro-frontend-host-app-setup