• Home
• About
• Docs (Multi-Zones)

Micro-Frontends

In this Micro-Frontends app we have a monorepo using Turborepo with multiple packages, each using TypeScript and going through a different Micro-Frontend technique:

apps/main

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

You're currently looking at the Home page, defined in apps/main/app/page.tsx.

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-components

Works in the same way as packages/acme-design-system but instead of building a design system it's about having shared components that can be used across applications such as the navigation bar.

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.

In a Multi-Zones set-up, different paths can be served by different applications. However, when a user navigates between those different applications, there is a hard navigation and the assets of the other application have to be downloaded again. Multi-Zones are therefore good for sites where there are logical separations of pages that a user doesn't navigate between often.

In local development, you can run some zones locally or point them to production. When pointing a zone to production, code changes won't be reflected unless you also run that application locally.

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