next.jswebpack-module-federation

Next.js Multi Zones and Module Federation/Micro Frontends


TL;DR: What's the best way to create my own 'pluggable' npm package-like libraries?

I have a habit of creating Next.js projects that quickly become monolithic and I want to break them up. I've created several component libraries, most of which I reuse in each of my projects for basic things like basic webpage layout, forms, etc.

What is the proper way to do go about breaking these libraries out into their own 'micro frontends'? I essentially want them to be my own private npm packages. I think the first major road block that I'm running into is Next.js--though I have no intention of switching away. My component libraries are all made with React and Module Federation seemed perfect, but some forums say that Module Federation and Next no longer play well together. I was told by a friend of mine/mentor that Next.js Multi-zones was the most equivalent, but after reading the documentation, I don't feel that it addresses the issue quite the same.

Any help with this is very much appreciated!


Solution

  • Not sure if I am addressing your question directly.

    Here is how I created and published NPM libraries to reuse a lot of my code.

    You can simply follow this GitHub template - https://github.com/react18-tools/turborepo-template/ to craft and publish your libraries to NPM. Most of the tasks are automated and self-explanatory.