logologo
Guide
Practice
Configuration
Plugins
Showcase
Blog
Ecosystem
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
Guide
Practice
Configuration
Plugins
Showcase
Blog
Module Federation Examples
Practical Module Federation
Zephyr Cloud
Nx
简体中文
English
logologo
Overview

Bridge

Bridge Overview

React Bridge

Getting Started
Export Application
Load Remote Application
Load Remote Component
Vue Bridge

Frameworks

Framework Overview

React

Basic CRA with Rsbuild
Using Nx CLI for React
Internationalization (i18n)

Modern.js

Quick Start
Dynamic load provider

Next.js

Basic Example
Importing Components
Routing & Importing Pages
Working with Express.js
Presets

Angular

Angular CLI Setup
Using Nx CLI for Angular
Micro-frontends with Angular
Server-Side Rendering
Using Service Workers
Authentication with Auth0
Authentication with Okta
Splitting a Monolith
Extending a Monolith
Edit this page on GitHub
Previous PageWorking with Express.js
Next PageAngular CLI Setup

#Presets

#Shared

By default, certain Next.js internals are automatically shared to optimize your application. It's important to note that manually sharing these internals can lead to errors, as they are already handled for you.

  • next/dynamic
  • next/head
  • next/link
  • next/router
  • next/script
  • react
  • react/
  • react-dom
  • react-dom/
  • styled-jsx
  • styled-jsx/style
Click to Expand DEFAULT_SHARE_SCOPE:
export const DEFAULT_SHARE_SCOPE: SharedObject = {
  'next/dynamic': {
    requiredVersion: undefined,
    singleton: true,
    import: undefined,
  },
  'next/head': {
    requiredVersion: undefined,
    singleton: true,
    import: undefined,
  },
  'next/link': {
    requiredVersion: undefined,
    singleton: true,
    import: undefined,
  },
  'next/router': {
    requiredVersion: false,
    singleton: true,
    import: undefined,
  },
  'next/image': {
    requiredVersion: undefined,
    singleton: true,
    import: undefined,
  },
  'next/script': {
    requiredVersion: undefined,
    singleton: true,
    import: undefined,
  },
  react: {
    singleton: true,
    requiredVersion: false,
    import: false,
  },
  'react/': {
    singleton: true,
    requiredVersion: false,
    import: false,
  },
  'react-dom/': {
    singleton: true,
    requiredVersion: false,
    import: false,
  },
  'react-dom': {
    singleton: true,
    requiredVersion: false,
    import: false,
  },
  'react/jsx-dev-runtime': {
    singleton: true,
    requiredVersion: false,
  },
  'react/jsx-runtime': {
    singleton: true,
    requiredVersion: false,
  },
  'styled-jsx': {
    singleton: true,
    import: undefined,
    version: require('styled-jsx/package.json').version,
    requiredVersion: '^' + require('styled-jsx/package.json').version,
  },
  'styled-jsx/style': {
    singleton: true,
    import: false,
    version: require('styled-jsx/package.json').version,
    requiredVersion: '^' + require('styled-jsx/package.json').version,
  },
  'styled-jsx/css': {
    singleton: true,
    import: undefined,
    version: require('styled-jsx/package.json').version,
    requiredVersion: '^' + require('styled-jsx/package.json').version,
  },
};

#Expose Pages

You can automatically expose all pages via the plugin

new NextFederationPlugin({
  name: 'remoteApp',
  filename: '',
  remotes: {},
  exposes: {},
  shared: {},
  extraOptions: {
    exposePages: true
  },
});

This will make pages available to import like:

  • import Page from 'remoteApp/pages/index'
  • import Page from 'remoteApp/pages/shop/product'

#Build Options

#Public Path

Public Path is set to "auto"

config.output.publicPath: "auto"

#Target

Webpack output target is set to async-node from node

config.target = "async-node"