Next.js with Module Federation: the Future of Micro Frontends?

Micro Frontends are a popular topic in the frontend community these days, and I have been fascinated with micro frontends for several years now. Micro Frontends architecture provides many benefits for organisations such as increased delivery speed and more independent release cycles, and more.

One of the popular options to implement Micro Frontends architecture is to use the Webpack Module Federation Plugin.

If you are unfamiliar with Module Federation Plugin, you can read my article at Beamery Hacking Talent Blog Module Federation for distributed front ends the best of both worlds. In this article I talk about Module Federation and its benefits in greater detail.

Webpack Module Federation with Next.js?

This approach works great with client-side rendering. But what about server-side rendering (SSR)? Its not as straightforward. Moreover, when we are talking about SSR, we need to consider the support of the most popular React.js SSR framework, Next.js.

Introducing nextjs-mf

Currently, there are the nextjs-mf and nextjs-ssr plugins created by Module Federation Team. However, they are not open source and are available with a paid subscription on PrivJs.

The good news is that the Module Federation Team has decided to move all work to open source.

https://twitter.com/ScriptedAlchemy/status/1567253027312246784?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1567253027312246784%7Ctwgr%5Ebd7f500401e055807c2e92327e58f5b6a657f9f4%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2FScriptedAlchemy2Fstatus2F1567253027312246784widget%3DTweet

Repo: https://github.com/module-federation/nextjs-mf

However, SSR support is still a work in progress and available only via a paid subscription.

Example

Following this example: https://github.com/module-federation/module-federation-examples/blob/master/nextjs-ssr:

Using the @module-federation/nextjs-mf package you can split your monolith application into multiple Next.js micro-apps and enable micro frontends during the software development life cycle. However, at runtime, it will work as a monolith app with a the single ReactDOM tree and remote/shared modules loading logic handled by Module Federation on server and client.

Basically you just need to add @module-federation/nextjs-mf plugin to nextjs.config:

const NextFederationPlugin = require('@module-federation/nextjs-mf');
// this enables you to use import() and the webpack parser
// loading remotes on demand, not ideal for SSR
const remotes = isServer => {
  const location = isServer ? 'ssr' : 'chunks';
  return {
    home: `home@http://localhost:3001/_next/static/${location}/remoteEntry.js`,
    shop: `shop@http://localhost:3002/_next/static/${location}/remoteEntry.js`,
    checkout: `checkout@http://localhost:3000/_next/static/${location}/remoteEntry.js`,
  };
};
module.exports = {
  webpack5: true,
  webpack(config, options) {
    config.plugins.push(
      new NextFederationPlugin({
        name: 'home',
        filename: 'static/chunks/remoteEntry.js',
        exposes: {
          './nav': './components/nav.js',
          './home': './async-pages/index.js',
          './pages-map': './pages-map.js',
        },
        remotes: remotes(options.isServer),
        shared: {},
      }),
    );

    return config;
  },
};

Using Module Federation on the server utilizes proprietary software, commonly known as "Software Streaming". So basically, it loads remote chunks at runtime, and it does the same on the client side.

Security

This plugin creates a remote container for the server side. By default, it is written to _next/static/ssr.

The goal of this software is to make federation "just work" with one single plugin and as little setup as possible.

It is highly recommended that network access to _next/static/SSR/* is restricted to servers/machines inside the VPN or internal infrastructure.

If access to that route is not restricted, you could risk exposing server code to the public internet!

Conclusion

It is an exciting effort from the Module Federation Team to provide Next.js support, and I look forward to seeing the final version of the nextjs-mf and how the community will use it and build on top of it.

There is more to look forward to in this space! For example, there were a lot of exciting announcements made recently at Next.js Conf, one of them introducing Turbopack (now in alpha). Providing support for Turbopack will be another challenge for the Module Federation Team.

Im hopeful about that though. I received a very positive answer from Zack (Author of Module Federation). And they already have a plan to integrate with Turbopack in the future.

https://github.com/module-federation/nextjs-mf/issues/332

To learn more

You can check out my talk about this topic as well as four more talks by amazing speakers:

Getting started with Next.js by Ilesh Mistry
Pre-build scripts and why we need them in Next.js by Ondrej Polesny
An Introduction to On-Demand Incremental Static Regeneration by Tom Marshall
Micro frontends with Next.js and Module Federation by Oleksandr Khivrych
Serverless And Edge Functions in Next.js by Shivay Lamba

https://twitter.com/IM_TechMeetup/status/1580679855024541696?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1580679855024541696%7Ctwgr%5E5ef371fa60167933ab41890696a836b13215de49%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2FIM_TechMeetup2Fstatus2F1580679855024541696widget%3DTweet

What are your thoughts on micro frontends? Have you used them?

Blog