In this Microfrontends app we have a Monorepo with multiple packages, each using TypeScript and going through a different Microfrontend tehnique:


This is the current Next.js site you're looking at!


Example of how you could build a Design System, it's a set of React Components that ship with CSS Modules.

This is the Quote component in the design system.


Works in the same way as packages/acme-design-system but instead of building a design system it's about having shared components that represent pages.

You're currently looking at the Home page, defined in packages/acme-pages/src/home and imported by apps/main/pages/index.tsx.


This package exports utility functions.

The button below uses an utility function from this package to change its color when clicked:

apps/docs (Multi Zones)

Next.js application that takes care of handling the pages for /docs/**.

This example shows how Multi Zones can be managed in Next.js to merge multiple Next.js applications in the same domain.

Compared with the approaches above, there's an actual UX impact when doing multi zones because Next.js assets of different builds can't be shared so they have to be downloaded again and transitions are a full page refresh.

Local development can also be affected by HMR because changes to one app outside its domain don't live reload (apps/main lives in port 3000, and apps/docs in 3001).


This packages takes the stories in packages/acme-design-system and opens them in Storybook.


Exports the Eslint configuration that will be used by all apps and packages:

module.exports = {
  extends: ['next', 'turbo', 'prettier'],
  rules: {
    '@next/next/no-html-link-for-pages': 'off',

Every package then has a .eslintrc with:

module.exports = {
  root: true,
  extends: ['acme'],