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 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!

[YanPes]

Hi @areeshalam. Thank's for the answer.

ScriptedAlchemy is working a lot on better Next.js support for MF. One major breakthrough is the upcoming compatibility between Next.js and rspack. (Check here: https://rspack.rs/blog/rspack-next-partner)
This will mark a fundamental milestone in getting first-class-citizen MF support for Next.js.

If this partnership with Vercel is working out, I would strongly recommend using the ecosystem of rspack for connected systems as well.
An alternative approach to using Next.js would be to use Modern.js (https://modernjs.dev/). I use Modern.js for my SSR use-cases and rsbuild (https://rsbuild.rs/) or Modern.js for classic CSR use-cases. It works really well within a MF ecosystem.

Think about the actual needs of your applications. Is it a pure remote applet just providing data to another system? Is it a host-application consuming modules? These are important questions when thinking about the actual implementation type.
Check out this article if you want to learn more about an architectural decision related to MF.

Next.js is still considered the industry standard for multi-page-applications and it can make sense to keep an eye on the partnership with Vercel. I just want to signal that there are other options leading to the same goal on a platform architecture level.

I hope this answers your questions.

[zackarychapple]

Hi @areeshalam! There is also all the work with Module Federation and Tanstack. Tanstack router has fantastic support for module federation and works really well for lazy loaded federated routes for example.

1. Is there any plan for official module federation (MF) support in Next.js?
   Yes, this is in the works (partially working again now) thanks to the Vercel team and Zack J. We expect full support for Pages to land this month and App Router in near future.

2. What is the recommended approach for integrating MF into a Next.js project?
   Rspack or Vite + Rolldown are the best two options because they have the best support for runtime and the latest compatibilities. These are the strongest paths forward and offer clean interop.

3. How should I handle scalability and independent deployment of microfrontends in Next.js?
   This is where Zephyr Cloud comes in, without it you'll be managing the versions, deployments, rollbacks manually. This is typically easy for orgs to handle until they get to 5-10 remotes then it becomes too much coordination.

4. Hybrid Approach with Next.js & MF:
   This is possible, but it makes it a little messier to manage. We typically see folks either federating routes or components that may or may not be within routes.

5. Is Next.js suitable for a microfrontend architecture?
   Next is used for microfrontends but there is a lot of usage around vanilla React and Tanstack, and as @YanPes mentioned ModernJS. You can get to global enterprise scale with just React + Tanstack and MF