Microfrontends – Mi blog

Ahora comenzamos la parte práctica del proyecto:

✅ Creamos el monorepo con Nx.
✅ Generamos la app shell, que servirá de host para los microfrontends.
✅ Configuramos next-i18next para traducción en español e inglés.
✅ Verificamos que el servidor funcione localmente y muestra el texto traducido correctamente.

Paso 1: Crear el monorepo con Nx

Usaremos Nx por su robustez y soporte para múltiples frameworks (Next.js, NestJS, React, etc.).

npx create-nx-workspace@latest tcg-pocket --preset=apps --package-manager=npm --workspaceType=integrated

Explicación:

tcg-pocket: nombre del workspace.
--preset=apps: crearemos un monorepo sin proyectos iniciales.
--package-manager=npm: usaremos npm (puedes usar pnpm o yarn si prefieres).

Paso 2: Instalar plugins para Next.js y NestJS

npm install --save-dev @nx/next @nx/nest

@nx/next: para apps Next.js.
@nx/nest: para el backend BFF con NestJS.

Paso 3: Generar la aplicación `shell` (Next.js)

npx nx g @nx/next:app apps/shell --style=tailwind

Esto crea:

/apps/shell

Con todos los archivos de un proyecto Next.js básico.

Paso 4: Añadir soporte para `next-i18next`

Instalamos la librería:

npm install next-i18next

Creamos la configuración base de i18n en la raíz del shell:

// next-i18next.config.js
module.exports = {
  i18n: {
    defaultLocale: 'es',
    locales: ['es', 'en'],
  },
};

Paso 5: Configurar Next.js para usar i18n

Edita /apps/shell/next.config.js:

//@ts-check

 
const { composePlugins, withNx } = require('@nx/next');
const { i18n } = require('./next-i18next.config');

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  reactStrictMode: true,
  i18n,
  nx: {},
};

const plugins = [
  withNx,
];

module.exports = composePlugins(...plugins)(nextConfig);

Paso 6: Crear archivos de traducción

Creamos carpetas de traducción dentro de la app shell:

/apps/shell/public/locales
  /es
    common.json
  /en
    common.json

Ejemplo de /apps/shell/public/locales/es/common.json:

{
  "title": "Bienvenido a TCG Pocket Explorer",
  "description": "Explora cartas de Pokémon TCG Pocket con arquitectura moderna"
}

Y para /en/common.json:

{
  "title": "Welcome to TCG Pocket Explorer",
  "description": "Explore Pokémon TCG Pocket cards with modern architecture"
}

Paso 7: Usar traducción en la app

Edita /apps/shell/pages/index.tsx:

import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export default function Home() {
  const { t } = useTranslation('common');

  return (
    <main className="flex flex-col items-center justify-center min-h-screen">
      <h1 className="text-3xl font-bold">{t('title')}</h1>
      <p className="mt-2 text-gray-600">{t('description')}</p>
    </main>
  );
}

// Para que Next.js cargue las traducciones en SSR:
export async function getStaticProps({ locale }: { locale: string }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
    },
  };
}

Editar el archivo pages/_app.tsx:

import { AppProps } from 'next/app';
import Head from 'next/head';
import './styles.css';
import { appWithTranslation } from 'next-i18next';

function CustomApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>Welcome to shell!</title>
      </Head>
      <main className="app">
        <Component {...pageProps} />
      </main>
    </>
  );
}

export default appWithTranslation(CustomApp);

Esto nos permitirá usar la traducción en toda la web.

Paso 8: Levantar el servidor y probar

Arrancamos la app shell:

nx run shell:dev

Esto corre en http://localhost:3000.

Probar el cambio de idioma

Para ver cómo funciona la traducción:

Accede a http://localhost:3000/es → ves la versión en español.
Accede a http://localhost:3000/en → ves la versión en inglés.

¡La traducción ya está activa y funcionando!

¿Qué logramos?

✅ Monorepo base creado y estructurado con Nx.
✅ App shell Next.js lista como host de microfrontends.
✅ Configuración de i18n con next-i18next y traducciones en español e inglés.
✅ Servidor corriendo y funcionando correctamente.

¿Qué sigue?

En el próximo post:

Agregaremos los microfrontends sets y cards.
Configuraremos Module Federation para que el shell cargue sus módulos remotos.
Documentaremos la configuración y primeras integraciones.

Tag: Microfrontends

Arquitectura moderna Microfrontends: Caso real TCG Pocket – II