Should I ditch NextJs for MF? Module Federation (MF) with Next.js: Potential for Native Support and Best Practices.

[areeshalam]

Hi Next.js devs,

I’m working on a large-scale social network platform (a potential one) and I’m exploring microfrontend (MF) architecture for my frontend to allow multiple teams to collaborate and scale independently. I’ve considered Next.js for its excellent developer experience, SSR, and static site generation, but I’m facing a dilemma regarding the integration of module federation.

Background:

• My app will eventually have multiple teams working on different parts of the frontend.
• I want to ensure that each team can work independently on their own microfrontends while still being able to share common components, libraries, and business logic.
• While Next.js is great for SSR and static site generation, it currently lacks native support for module federation, which seems like a critical requirement for my architecture.

My Questions:

1. Is there any plan for official module federation (MF) support in Next.js?
I understand that Next.js provides a solid architecture for building single applications but integrating multiple microfrontends might require specific features like MF. Are there any discussions or plans about adding MF support natively to Next.js?

2. What is the recommended approach for integrating MF into a Next.js project?
If I want to implement MF with Next.js (either now or in the future), what tools or best practices do you recommend for achieving this? Should I rely on Webpack or Vite for MF, and how can I integrate that cleanly with Next.js?

3. How should I handle scalability and independent deployment of microfrontends in Next.js?
My project will grow significantly, and I’m looking for a way to scale it as independently as possible. Would Next.js’ current routing and layout system be a bottleneck, or is it possible to maintain clean modularity with Next.js while using MF?

4. Hybrid Approach with Next.js & MF:
Would it be feasible to use a hybrid approach where Next.js handles certain pages/routes, and MF is used for specific, isolated parts of the app? How would this work in practice, and what trade-offs should I consider?

5. Is Next.js suitable for a microfrontend architecture?
From your experience, is Next.js a good candidate for projects heavily relying on microfrontends, or would a different framework (like Vite or a Webpack-based solution) be a better fit for scaling multiple teams and micro-applications?

I appreciate any insights or experiences you can share, especially regarding module federation integration with Next.js.

Thanks in advance!
@ScriptedAlchemy

[hope-423126]

1. Is there any plan for official module federation (MF) support in Next.js?
   Native MF support is not included in Next.js but we can do with Pages Router and App Router + RSC.

[areeshalam]

I checked out the nextjs-mf plugin but I read it only support pages router not the app, but even if it does, there was a post that says nextjs-mf plugin won't be continued after late 2026, which basically gives us roughly 1.5 year, but then if it stops getting updates or it's maintenance stopped, we'll be left behind. AHH! What a pain! I'm building a project, and I needed a resolution as early as I can but choosing next mean, I have to go completely monolithic which is not a good idea for collab in my view for a larger project but it gives more features and the ones we really need, but if I use just react, then can't use next. UFF! What the hell!

[ScriptedAlchemy]

We are working with vercel. https://rspack.dev/blog/rspack-next-partner

Our bundler just landed in next.

We have communication open.

I'm not promising anything till I see merges for federation; but both groups seem optimistic.

I also have removed the blockers for app router after talking with vercel turbo team.

Technically it works. But I have blocked the feature for now.

[hope-423126]

how is your progress so far? nearly completed?

[areeshalam]

My Backend is Ready-Enough. To be considered for general decent deployment. Not extremely great but a good start.

[hope-423126]

Hi, As far as the nextjs-mf won't support after late 2026, how about using vite-plugin-federation for module federation?

[areeshalam]

I'm not so sure, the reason is Webpack is providing way more features then vite. I want to think for long term that even after 2 to 3 years, I won't have much issue sticking to my original tech stack.

[hope-423126]

so, do you have any solution for the unsupport of nextjs-mf after late 2026?
If you don't have one, we should change essential things ASAP.

but it's worth observing the communities' decision.

[areeshalam]

I'm unsure of it, so I was considering Pure React and Not Nextjs, and the problem with that is complexity would quadruple or even more, and is time consuming, though it would give atomic level control which is also needed in big projects but.. tch.. it's just hard to decide. I mean I'm willing to do the hard work but problem is it is time consuming.

[hope-423126]

I have experience in developing several javascript modules, and I know well how important the support of the community or dev team is.

[areeshalam]

Hm.. okay. What do you say? What's your opinion of should happen? Do you have any best practices?

[hope-423126]

Can you provide me with the details of the micro frontend for your project?
After considering this, I can propose a new solution.

[areeshalam]

Yeah Sure, here’s how it works:

1. Main Frontend Module: This is the core module that orchestrates the integration of various microfrontend modules into the main application.

2. Microfrontend Modules: These are individual, self-contained frontend components that handle specific features or functionality. Each microfrontend module has code that's highly specific to its feature, minimizing overlap with other modules. (Though, we have a slightly flexible approach where a piece of code may be reused across a maximum of three microfrontends).

3. Shared Microfrontend Module: When a piece of functionality or code is needed in more than three microfrontends, it’s moved to a shared module that can be consumed by all other microfrontends. This promotes code reusability and keeps things DRY (Don’t Repeat Yourself).

4. Backend Communication: Most of the microfrontends consume data via APIs exposed by an Express-based backend. These APIs handle the server-side logic and data storage.

5. Integration: Each microfrontend applies its own logic and functionality. The main frontend module is responsible for integrating these microfrontends into the webpage, ensuring that they work together seamlessly.

[areeshalam]

The thing is, Next Provide a lot, but again, If I have project which is not monolithic, next doesn't give that much flexibility, Vite is good, but webpack is next level.

[hope-423126]

So, do you work alone, or are you leading the team?

[areeshalam]

Direct answer: Alone.
But basically, I intentionally did not wanted to involve people unless I had created some see-able path and proper structured road to put them on, more like a personal opinion, you can disagree if you may.

[areeshalam]

And so, I was worried, now that my project is about to be live, I'd need a team, so had to structure it that way. (I did have work with a team but a very short term basis on this project)

[hope-423126]

I'm very interested in your project and would like to contribute.
I hope for further and deeper discussions about your project.
Is it possible?

[areeshalam]

I appreciate the interest. I’m still locking down the architecture and want to avoid confusion or wasted effort without a clear structure in place for management. I have a structure ready for me to manage the team but due to main focus being on the project, it's basically static and not in effect. I’d love to reach out when it’s time for collaboration, in the meantime, you can ask me any questions, and maybe I can learn something from you? what do you say?

[areeshalam]

If you don't know, I'm basically building a Social Media Platform, (to cut the chase, video sharing one, an alternative of YouTube in a way, not entirely though)

[hope-423126]

I'm available on 4/8/2025 from 9 AM to 8 PM.
please feel free to contact me.

[areeshalam]

Got it. I’ll reach out when the timing makes sense. Thanks though.

[hope-423126]

Hi, how's it going?

[areeshalam]

How are you intending to contribute exactly? Do YOU have anything in mind? Because I've not yet made a automated system that would work best for employment or hiring processes. So not hiring currently.

[areeshalam]

If you have something in mind, do let me know.

[ScriptedAlchemy]

Hi all.

We have a new collaboration with vercel.

https://rspack.dev/blog/rspack-next-partner

Our bundler landed in 15.3 - so it looks likely that we will make progress on federation now that working relationship is established.

Also helps that there's a bundler I've got fully control over that works with next now.

No promises. But it does look optimistic

[areeshalam]

So can we say that the module federation will be as efficient in rspack as webpack?
and just to get an idea, is it better to use rspack over webpack or should we prefer just react and not next?

[hyalen]

@areeshalam have you considered using a script tag to dynamically inject your micro-frontend in the host app? Something similar to what this article proposes (which is the original proposal for the micro-frontend architecture)

I'm currently creating a POC for the company that I work, and I'm facing some problems using Next's MF plugin as the host and a Vite application as the remote. I can't simply choose to remove Next from there because it would be a life time migration right now, and many teams depend on it too.

The biggest advantage of using the script tag approach is speed and simplicity. It's just JS + HTML. It has some downsides like any architectural decisions (performance for example), for my case at least, I just needed to render some simple UI detached from the main app, and that's it. It shouldn't require a lot of magic to make it work..

[ScriptedAlchemy]

You miss the point of federation