# Using Module Federation in NextJS (before Webpack 5 support) You can both expose code and consume code with Module Federation using any version of NextJS. Even before there is support for Webpack 5 in NextJS. The overall architecture looks like this: ![Overall architecture](./diagrams/overall.png) # Exposing Components We use a 'sidecar' application located in a sub-directory within the NextJS application that has Webpack 5 installed. The sidecar then references any shared components relative to the parent directory. ![Overall architecture](./diagrams/exposing.png) It then creates a `dist` directory containing the Module Federation `remoteEntry.js` and all the associated code. This `dist` directory can then be deployed anywhere as long as it matches the `publicPath` in the `webpack.config.js`. # Importing Components NextJS applications can also consume federated modules with ease using some simple shim code. ![Overall architecture](./diagrams/consuming.png) This is the same with any Webpack 4 based application. # Migration When NextJS Supports Webpack 5 Once NextJS supports Webpack 5 the sidecar application can be removed, and the shim code used to support importing components can also be removed. # Running the example Build and run the code in three separate terminals: ```shell script > cd dog-admin > yarn && yarn start ``` ```shell script > cd host > yarn && yarn dev ``` ```shell script > cd host/sidecar > yarn && yarn build && yarn start ```