Skip to content

waiphyo285/nextjs-microfrontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Next.js 13 with MF

Module Federation in Next.js depends on @module-federation/nextjs-mf

Note: There seems to be a problem with css-in-js sharing between federated modules. This is likely due to some internal module not being shared as a singleton. PR is welcome

Getting Started

  1. run npm install in each of fe application
  2. run npm start and browse to http://localhost:3000

Context

We have three next.js applications

  • fe-home - port 3000
  • fe-about - port 3001
  • fe-blog - port 3002

They use omnidirectional routing, allowing pages and components to be shared and federated between apps seamlessly, creating a SPA-like experience. To avoid loading multiple React copies on server or client, hooks are used to ensure React is shared correctly. For Next.js, @module-federation/nextjs-mf must be used for proper federation support.

Reference

Explore the official example repository for more details:
https://github.com/module-federation/module-federation-examples/tree/master/nextjs-v13

About

Microfrontend setup using Next.js and Webpack 5 Module Federation architecture.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •