Module Federation with Next.js and Chakra UI is a proof-of-concept repository that demonstrates how to share components across three independent Next.js 13 apps using Webpack Module Federation. The repository acts as the layout app on port 3000, while the content app on port 3001 and the shop app on port 3002 are maintained in separate repositories. All three apps are bootstrapped with create-next-app, and their UI components come from Chakra Templates.
What is Module Federation with Next.js and Chakra UI?
Module Federation with Next.js and Chakra UI is a POC for combining Module Federation with Next.js and Chakra UI. It contains three Next.js 13 apps: layout on port 3000, content on port 3001, and shop on port 3002. The layout app is this repository, while the other two are separate repositories linked in the README. Each app was created with create-next-app, and the Module Federation configuration follows examples from the module-federation-examples repository. All components used in the apps are taken from Chakra Templates, a collection of Chakra UI components.
Key Features
- Three Next.js 13 applications — the layout host (port 3000), content remote (port 3001), and shop remote (port 3002) each run independently and can be developed separately.
- Module Federation configuration — set up based on the official module-federation-examples repository, allowing the layout app to consume components from the remote content and shop apps at runtime.
- Chakra UI components — every component is sourced from Chakra Templates, giving the POC a consistent look without writing custom CSS.
- create-next-app bootstrap — each app is initialized with the standard Next.js scaffolding tool, so the project structure is familiar to anyone who has used create-next-app.
- Separate remote repositories — the content and shop apps live outside this repo, demonstrating how Module Federation can work across different codebases and teams.
- Simple local development — after cloning the repositories, run npm run dev in each app and open http://localhost:3000 to see the federated app in action.
Who is it for?
- Next.js developers investigating micro-frontends — they can study how a host app lazily loads and renders components from remote Next.js apps.
- Teams comparing Module Federation setups — this minimal working example shows the wiring needed to share Chakra UI components between Next.js services, helping evaluate the pattern before committing to it.
- Chakra UI users — anyone building with Chakra UI can see how template components from Chakra Templates are consumed remotely and can adapt the pattern for their own shared component library.
What can you do with it?
- Experiment with module federation — clone the three repos, run them locally, and modify a component in the content or shop app to observe the change appearing in the layout app.
- Learn the configuration pattern — trace how remote module names and exposed components are declared in each Next.js app's next.config.js file.
- Build a multi-app UI foundation — use the Chakra Templates components as a starting point for a shared component set used across separately deployed Next.js applications.
