Nextjs, Nx and Module Federation

This is an example project to demonstrate how to use Nx, Next.js and Module Federation together.

⚠ This example depends on @module-federation/nextjs-mf. It will not work unless you have access to this plugin, which is not free.

Articles

Also this project was created as a proof of concept to write one article, you can read it here:

• 🇬🇧 English
• 🇧🇷 Portuguese (pt-br)

Techs & Tools

This project came with some powerful tools

Core

• Nx
• Next.js
• Webpack

Plugins

• Nx + Next.js plugin
• @module-federation/nextjs-mf

Linting & Tests

• Jest
• Cypress
• ESLint
• Prettier

3rd party components

• reactstrap

Remotes

• Checkout (preview)
• Store (preview)

Running in the development environment

To run the project you have to use Nx CLI

To start the project in development mode you can just run:

npx nx serve store

This will start the store application, also you can run all apps by using:

npx nx run-many --target=serve --all

Creating new apps

You can creating new applications on this workspace using some Nx Generators from this Nx + Next.js plugin like the command bellow:

npx nx g @nrwl/next:app app-name

Creating new pages

To generate new pages you can just use:

npx nx g @nrwl/next:page new-page --project=app-name

Creating new components

To generate new components you can just use:

npx nx g @nrwl/next:component new-component --project=app-name

Creating libraries

You can also use @nrwl/next plugin to generate libs, shared ui elements, design-system, etc... just running:

npx nx g @nrwl/next:lib new-lib-name

Sharing

Other information can be found in the article, I also strongly recommend you to take a look at the module-federation-examples, especially this example with nextjs