Internacionalización (i18n)

Shipabase incluye soporte multi-idioma con next-intl.

Idiomas incluidos

Inglés (en) — por defecto
Español (es)

Cómo funciona

Detección automática del idioma según la configuración del navegador
Selector manual de idioma en la navbar
Las traducciones viven en el directorio messages/ como archivos JSON planos

Usar traducciones en un componente

import { useTranslations } from 'next-intl';

export default function Hero() {
  const t = useTranslations('Hero');

  return <h1>{t('title')}</h1>;
}

Y en messages/es.json:

{
  "Hero": {
    "title": "Lanza tu SaaS en minutos"
  }
}

Textos de contenido

Los posts y páginas de docs (.mdx) no se traducen automáticamente: viven en un solo idioma en content/. Lo que sí pasa por messages/ es la UI alrededor del contenido — por ejemplo, el título del menú lateral de docs, que vive en el namespace contentNav:

{
  "contentNav": {
    "docs": "Documentación"
  }
}

Si activas el menú lateral para otro tipo de contenido (ver Contenido y SEO), añade su título en ese mismo namespace.

Añadir un nuevo idioma

Crea messages/[locale].json (por ejemplo, messages/fr.json)
Añade el locale a i18n/config.ts
Copia la estructura de messages/en.json y traduce los valores

Para casos avanzados (plurales, fechas, formatos), consulta la documentación de next-intl.

Siguiente paso

Haz tuyo el boilerplate con la Personalización.