#Crear la app 1

npx create-next-app@latest

"What is your project named?":
> mfe1

"Would you like to use App Router?":
> No

#Crear la app 2

npx create-next-app@latest

"What is your project named?":
> mfe2

"Would you like to use App Router?":
> No

#Instalar

cd mfe1
pnpm add @module-federation/nextjs-mf webpack -D
pnpm i

cd mfe2
pnpm add @module-federation/nextjs-mf webpack -D
pnpm i

#Establecer la variable de entorno de Webpack local

"Webpack local" significa que debes tener webpack instalado como dependencia, y Next no usará su copia empaquetada de webpack, que no puede utilizarse porque no exporta todos los elementos internos de Webpack

cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next dev
# or
cross-env NEXT_PRIVATE_LOCAL_WEBPACK=true next build

También se puede usar .env, pero puede no ser fiable a la hora de establecer NEXT_PRIVATE_LOCAL_WEBPACK a tiempo.

NEXT_PRIVATE_LOCAL_WEBPACK=true

#Asegúrate de instalar Webpack manualmente

Webpack debe estar instalado; de lo contrario, el build lanzará errores MODULE_NOT_FOUND

npm i webpack -D

yarn add webpack -D

pnpm add webpack -D

bun add webpack -D

#Añadir un ciclo de vida de servidor

Para garantizar que Next.js cree un runtime de servidor, _document debe implementar getInitialProps o getServerSideProps

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return initialProps;
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

#Añadir revalidación para la recarga en caliente en Node

Para gestionar las actualizaciones de los módulos remotos se usa la función revalidate. Esto se debe a que Webpack usa una caché de chunks y no volverá a obtener un chunk ya cargado, y un servidor en caliente no reconoce las actualizaciones automáticamente.

Hay dos formas principales de implementar la revalidación:

• Bloqueo del renderizado (Render Blocking)
• Stale While Revalidate

import { revalidate } from '@module-federation/nextjs-mf/utils';
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    if (ctx?.pathname && !ctx?.pathname?.endsWith('_error')) {
      await revalidate().then((shouldUpdate) => {
        if (shouldUpdate) {
          console.log('Hot Module Replacement (HMR) activated', shouldUpdate);
        }
      });
    }

    const initialProps = await Document.getInitialProps(ctx);
    return initialProps;
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

 static async getInitialProps(ctx) {
   const initialProps = await Document.getInitialProps(ctx);
   ctx?.res?.on('finish', () => {
     revalidate().then((shouldUpdate) => {
       console.log('Response sent, checking for updates:', shouldUpdate);
     });
   });
   return initialProps;
 }

#Chunk flushing

El chunk flushing intenta "volcar" los chunks usados durante el SSR para que las etiquetas <script> puedan enviarse al navegador.

import Document, { Html, Head, Main, NextScript } from 'next/document';
import {
  revalidate,
  FlushedChunks,
  flushChunks,
} from '@module-federation/nextjs-mf/utils';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    if (ctx.pathname) {
      if (!ctx.pathname.endsWith('_error')) {
        await revalidate().then((shouldUpdate) => {
          if (shouldUpdate) {
            console.log('should HMR', shouldUpdate);
          }
        });
      }
    }

    const initialProps = await Document.getInitialProps(ctx);

    const chunks = await flushChunks();

    return {
      ...initialProps,
      chunks,
    };
  }

  render() {
    return (
      <Html>
        <Head>
          <FlushedChunks chunks={this.props.chunks} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

#Crear el componente Button

En MFE2, crea un nuevo archivo llamado Button.js en el directorio src con el siguiente contenido:

import React from 'react';

const Button = () => (
  <button>MFE2 Button</button>
);

export default Button;

#Configurar Next en MFE2

Actualiza la configuración de build para exponer un módulo

const nextConfig = {
  reactStrictMode: true,
  webpack(config, options) {
    config.plugins.push(
      new NextFederationPlugin({
        name: 'mfe2',
        filename: 'static/chunks/remoteEntry.js',
        exposes: {
          "./Button": './component/Button.js',
        },
        shared: {},
        extraOptions: {
          exposePages: true,
          enableImageLoaderFix: true,
          enableUrlLoaderFix: true,
        },
      })
    )
    return config
  }
};

#Importar el módulo

Importa MFE2 en una de las páginas de MFE1

import React from 'react';
import Button from 'mfe2/Button'; // federated import

const Index = () => {
  return (
    <div>
      <h1>MFE1</h1>
      <Button />
    </div>
  );
}

#Añadir un método de ciclo de vida de servidor a la página

Next también intentará aplicar SSG a las páginas que no tengan algún ciclo de vida de datos.

Asegúrate de añadir uno a los archivos de página.

export const getServerSideProps = async () => {
  return {
    props: {}
  }
}
// or
Index.getInitialProps = async ()=> {
  return {}
}

export default Index;

#Configurar Next en MFE1

Actualiza el campo remotes en consecuencia

import { NextFederationPlugin } from '@module-federation/nextjs-mf';

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack(config,options ){
    config.plugins.push(
      new NextFederationPlugin({
        name: 'mfe1',
        filename: 'static/chunks/remoteEntry.js',
        remotes: {
          mfe2: `http://localhost:3001/static/${options.isServer ? 'ssr' : 'chunks'}/remoteEntry.js`,
        },
        shared: {},
        extraOptions: {
          exposePages: true,
          enableImageLoaderFix: true,
          enableUrlLoaderFix: true,
        },
      })
    )
    return config
  }
};

export default nextConfig;