How to implement Module Federation in Next.js &

758 views Asked by At

everybody I'm working with nextjs and now I'm starting to use microfrontends

I'm trying to implement a repository container for this I use @module-federation/nextjs-mf

I want to put localization and fonts in the repository container to begin with

This is my next.config.js in container repo

const NextFederationPlugin = require('@module-federation/nextjs-mf')
const { i18n } = require('./next-i18next.config')

module. Exports = {
  reactStrictMode: true,
  i18n,
  webpack(config, options) {
    const { isServer } = options
    const location = isServer ? 'ssr' : 'chunks'

    config.plugins.push(
      new NextFederationPlugin({
        name: 'home',
        filename: 'static/chunks/remoteEntry.js',
        remotes: {
          container: `container@http://localhost:3000/_next/static/${location}/remoteEntry.js`,
          app2: `app2://localhost:3001/_next/static/${location}/remoteEntry.js`,
        },
        exposes: {
          './font': './src/font/segoeui-light.woff2'
        },
        shared: {},
      })
    )

    return config
  },
}

And this is index.tsx in container repo pages/index.tsx

export default function Home() {
  const { t: translate } = useTranslation('test-app')
  return (
    <>
      <h1>Container index Page</h1>
      <h2>{translate('test')}</h2>
      <Link href="/app2">app2</Link>
    </>
  )
}

Application 2 runs locally on port 3001, and the container on port 3000

But I have errors with the container launch, maybe I'm doing something wrong, where is my mistake?

0

There are 0 answers