Integrating a Next.js App into a React App with Module Federation
In recent years, the development landscape has evolved significantly, and one of the most exciting advancements is Module Federation. This feature, introduced in Webpack 5, allows multiple applications to share code dynamically at runtime, making it easier to build and scale micro-frontend architectures. This post will delve into the technical details of integrating a Next.js application inside a React app using Module Federation.
Prerequisites
Before you start, ensure you have the following:
- Basic understanding of React and Next.js
- Webpack 5 setup
- Two separate projects - one using Next.js and the other using React.
Step-by-Step Integration
1. Setup Your React Application
First, create your React app if you haven't already done so. You can use Create React App (CRA) or a custom setup. For this example, we will assume it's a CRA setup.
npx create-react-app react-app cd react-app
2. Configure Module Federation in React
Install the necessary dependencies:
npm install --save-dev webpack@5 webpack-cli npm install @module-federation/nextjs-mf
Next, you need to configure Webpack to support Module Federation. Create a webpack.config.js
file in your React app's root:
const { ModuleFederationPlugin } = require("webpack").container; const packageJson = require("./package.json"); module.exports = { // Other configurations... plugins: [ new ModuleFederationPlugin({ name: "react_app", filename: "remoteEntry.js", exposes: { "./YourComponent": "./src/YourComponent", // Exposing a component }, shared: { react: { singleton: true, requiredVersion: packageJson.dependencies.react, }, "react-dom": { singleton: true, requiredVersion: packageJson.dependencies["react-dom"], }, }, }), ], };
3. Setup Your Next.js Application
Now, create a Next.js application:
npx create-next-app next-app cd next-app
4. Configure Module Federation in Next.js
Install the necessary dependencies:
npm install --save-dev webpack@5 @module-federation/nextjs-mf
In your Next.js application, create a next.config.js
file and configure Module Federation:
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const packageJson = require("./package.json");
module.exports = {
webpack: (config) => {
config.plugins.push(
new ModuleFederationPlugin({
name: "next_app",
filename: "remoteEntry.js",
remotes: {
react_app: "react_app@http://localhost:3001/remoteEntry.js", // pointing to React app
},
shared: {
react: {
singleton: true,
requiredVersion: packageJson.dependencies.react,
},
"react-dom": {
singleton: true,
requiredVersion: packageJson.dependencies["react-dom"],
},
},
})
);
return config;
},
};
5. Consume Components in Next.js from React
Now you can consume components from the React app in your Next.js application. For example, within any page or component of your Next.js app:
import dynamic from "next/dynamic";
const RemoteComponent = dynamic(() => import("react_app/YourComponent"), {
ssr: false,
});
const YourNextComponent = () => {
return (
<div>
<h1>Hello from Next.js!</h1>
<RemoteComponent />
</div>
);
};
export default YourNextComponent;
6. Start Both Applications
Now, start both applications in separate terminals:
For React:
npm start
For Next.js:
npm run dev
Conclusion
By following these steps, you'll successfully integrate a Next.js application into a React app using Webpack's Module Federation. This setup allows you to take advantage of micro-frontend architecture, enabling you to develop, deploy, and maintain applications much more efficiently. Happy coding!