DEV Community

Srinu Web developer
Srinu Web developer

Posted on • Originally published at blog.srinudesetti.in

Setting Up a Next.js Micro Frontend Host App: Complete Guide

 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"
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)