https://github.com/azukaar/next-mfe-demo
demo of mfe with NextJS
https://github.com/azukaar/next-mfe-demo
Last synced: 4 months ago
JSON representation
demo of mfe with NextJS
- Host: GitHub
- URL: https://github.com/azukaar/next-mfe-demo
- Owner: azukaar
- License: apache-2.0
- Created: 2024-03-06T15:42:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-06T15:50:54.000Z (over 1 year ago)
- Last Synced: 2025-03-13T19:50:34.794Z (7 months ago)
- Language: TypeScript
- Size: 123 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Example of Next JS + Library
This repo demonstrate the usage of Next JS with a collection of libraries downloaded using a microfrontend approach (aka. downloaded at runtime when required). The repository uses a monorepo for simplicity, but it would work the same without it. The NextJS is importing the libraries from the node_modules folder, as it would be in a real world scenario.
The repo is divided in 3 folders:
- `nextjs-ui`: The main NextJS application
- `basic-components`: A library that is used by the NextJS application
- `fancy-components`: A library that is used by the NextJS application
# The nextjs-ui
First, we setup a basic NextJS app. This app needs to maintain a list of libraries it has access to. See [packages/nextjs-ui/app/components.tsx](packages/nextjs-ui/app/components.tsx) for the list of libraries.
```tsx
// this allows addressing libraries with
// components[libraryName][componentName]
const components = {
basic: basicComponents,
fancy: fancyComponents,
};
```
Then, when rendering a component, we can use the `components` object to render the component from the component. For example see [packages/nextjs-ui/app/pages/page.tsx](packages/nextjs-ui/app/pages/page.tsx).
```tsx
const Page = components['basic']['Page'];
...
```
# The libraries
In order to work with React.lazy, the library must export components as default, in directly addressable folders. For example see [packages/basic-components/src/components/page.jsx](packages/basic-components/src/components/page.jsx).
```tsx
const React = require('react');
const Page = ({title}) => {
return (
{title}
Page content
);
};
export default Page;
```
This component is then referenced in the main library file (ex. [packages/basic-components/src/index.js](packages/basic-components/src/index.js)). In order to be able to import the component from the library. This is where React.lazy is used to delay the import to the last moment. (React.Lazy is the same as Next.dynamic, but specific for React).
```tsx
const components = {
Page: lazy(() => import('./components/page.jsx')),
Hidden: lazy(() => import('./components/hidden.jsx')),
};
```
# Running the example
To run the example, you need to install the dependencies via Lerna and then run the NextJS app.
```bash
npm install
cd packages/nextjs-ui
npm run dev
```