• Home
• About
• Docs (Multi Zones)

Microfrontends

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

apps/main

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

packages/acme-design-system

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.

packages/acme-pages

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.

packages/acme-utils

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).

packages/acme-storybook

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

packages/eslint-config-acme

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'],
}