Mfe_next_microgridlayout_host

This is a small project bootstrapped with create-next-app. I'm using MFE framework to clone a camptraveller.com web, here is initial src!

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3001 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

Context

We have seven next.js applications (click in port to navigate to that repo)

• This repo Host - port 3001
• Hero component - port 3002
• Camp component - port 3003
• Guide component - port 3004
• Feature component - port 3005
• GetApp component - port 3006
• Hero 2 component - port 3007

The applications utilize omnidirectional routing and pages or components are able to be federated between applications

I am using hooks here to ensure multiple copies of react are not loaded into scope on server or client.

This host app will remote to other components to get the element inside this app, then use it like a react-component.

Next.js has all its internal modules pre-shared via @module-federation/nextjs-mf you do need to share react via the plugin.

Result

We have to run all the component repo, finally your host will appear like this:

We can customize in settings.js the position of the component and the dimensions of the component.

Read more

1. Micro Frontend architecture | Nextjs

2. npm Module Federation For Next.js

3. Medium Building a Micro Frontend Application with Next.js 14.2 and Tailwind CSS <-- Most useful for beginners, this blog has 4 parts. Full tutorials !