Nextjs Nx Module Federation

Overview

This project showcases the integration of Nx, Next.js, and Module Federation. It serves as a demonstration of how these technologies can be used together. It should be noted that this example relies on the “@module-federation/nextjs-mf” plugin, which is not free. The project was initially created as a proof of concept for an article that is available in both English and Portuguese.

Features

• Core: The project comes with a set of powerful tools, including Nx and Next.js.
• WebpackPlugins: The integration includes plugins for Webpack.
• Nx + Next.js plugin: This plugin extends Nx functionality for Next.js projects.
• Linting & Tests: The project includes Jest, Cypress, ESLint, and Prettier for linting and testing.
• 3rd party components: The project utilizes thereactstrap library.
• Remotes: The project showcases the integration of remote components, specifically the “Checkout” and “Store” components.

Installation

To run the project in the development environment, the Nx CLI must be used. To start the project in development mode, the following command can be used:

nx dev store

To run all apps, the following command can be used:

yarn start-all

To create new applications within the workspace using Nx Generators from the Nx + Next.js plugin, the following command can be used:

nx generate @nrwl/next:app my-app

To generate new pages, the following command can be used:

nx generate @nrwl/next:page my-page

To generate new components, the following command can be used:

nx generate @nrwl/next:component my-component

To generate libraries using the “@nrwl/next” plugin, the following command can be used:

nx generate @nrwl/next:lib my-lib

Summary

This project demonstrates the integration of Nx, Next.js, and Module Federation. It showcases various features including core tools, Webpack plugins, linting and testing, and the utilization of third-party components. The installation process is explained, allowing users to run the project in the development environment and create new applications, pages, components, and libraries. For more information, it is recommended to refer to the article and explore the “module-federation-examples” repository, specifically the Next.js example.