Practice
Configuration
Plugins
Showcase
Blog
Guide
Practice
Configuration
Plugins
Showcase
Blog

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': {
    eager: false,
    requiredVersion: false,
    singleton: true,
    import: undefined,
  },
  'next/head': {
    eager: false,
    requiredVersion: false,
    singleton: true,
    import: undefined,
  },
  'next/link': {
    eager: true,
    requiredVersion: false,
    singleton: true,
    import: undefined,
  },
  'next/router': {
    requiredVersion: false,
    singleton: true,
    import: false,
    eager: false,
  },
  'next/script': {
    requiredVersion: false,
    singleton: true,
    import: undefined,
    eager: false,
  },
  react: {
    singleton: true,
    requiredVersion: false,
    eager: false,
    import: false,
  },
  'react-dom': {
    singleton: true,
    requiredVersion: false,
    eager: false,
    import: false,
  },
  'react/jsx-dev-runtime': {
    singleton: true,
    requiredVersion: false,
    import: undefined,
    eager: false,
  },
  'react/jsx-runtime': {
    singleton: true,
    requiredVersion: false,
    eager: false,
    import: false,
  },
  'styled-jsx': {
    requiredVersion: false,
    singleton: true,
    import: undefined,
    eager: false,
  },
  'styled-jsx/style': {
    requiredVersion: false,
    singleton: true,
    import: undefined,
    eager: false,
  },
};

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 avaliable 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"