NextJs MFE
This package This PSInnersource accelerator allows a developer to quickly setup a Nextjs based module federated application setup, using turbo as monorepo workspace.
Features
- Turbo based monorepo workspace setup
- NextJs app generation
- OOTB Host and Remote Module Federation configuration
- Micro App Communication & State Management with Zustand
Tools Provided OOTB
| Package Name | Version |
|---|---|
| NextJs | 13.3.1 |
| React | 18.2.0 |
| Turbo | 1.10.15 |
| Webpack | 5.80.0 |
| Zustand | 4.4.3 |
| Module-federation | 7.0.8 |
Usage
To install the NextJs Micro frontend loader you can follow the steps outined below:
npx @genesisx/nextjs-mfe
Pre-requisites
Make sure you are on correct version of Nodejs 18.0 and Nx Version 16.6
node --version
nx --version
Note
Micro application names should only contain alphabetical units (no special characters are permitted).
Testing the app
Once inside the workspace directory (cd workspace) first build the project and then serve the application.
npm run build
followed by
npm run dev
following this you can view the served application on the below port:
http://localhost:3000