Internacionalizacao (i18n)

O PlazerCLI configura internacionalizacao automaticamente quando voce habilita a feature i18n. A biblioteca usada depende do frontend escolhido. Os idiomas padrao sao pt-BR e en.

Frontend	Biblioteca
Next.js	next-intl
React/Vite	react-i18next
Vue	vue-i18n
Angular	@angular/localize

// apps/web/src/i18n/messages/pt-BR.json
{
  "common": {
    "appName": "MeuApp",
    "loading": "Carregando...",
    "save": "Salvar",
    "cancel": "Cancelar",
    "delete": "Excluir",
    "confirm": "Confirmar",
    "back": "Voltar",
    "next": "Proximo",
    "search": "Buscar..."
  },
  "auth": {
    "login": "Entrar",
    "register": "Criar conta",
    "logout": "Sair",
    "email": "Email",
    "password": "Senha",
    "forgotPassword": "Esqueceu a senha?",
    "magicLink": "Enviar link magico"
  },
  "dashboard": {
    "title": "Dashboard",
    "welcome": "Bem-vindo, {name}!",
    "stats": {
      "totalUsers": "Total de usuarios",
      "revenue": "Receita",
      "activeProjects": "Projetos ativos"
    }
  }
}

// apps/web/src/i18n/request.ts
import { getRequestConfig } from 'next-intl/server';

export default getRequestConfig(async ({ locale }) => ({
  messages: (await import(`./messages/${locale}.json`)).default,
}));

// Uso em componente:
import { useTranslations } from 'next-intl';

export function Dashboard() {
  const t = useTranslations('dashboard');
  return <h1>{t('welcome', { name: 'Joao' })}</h1>;
}

// apps/web/src/i18n/index.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import ptBR from './locales/pt-BR.json';
import en from './locales/en.json';

i18n.use(initReactI18next).init({
  resources: {
    'pt-BR': { translation: ptBR },
    en: { translation: en },
  },
  lng: 'pt-BR',
  fallbackLng: 'en',
  interpolation: { escapeValue: false },
});

export default i18n;

// Uso em componente:
import { useTranslation } from 'react-i18next';

export function Header() {
  const { t, i18n } = useTranslation();
  return (
    <div>
      <h1>{t('dashboard.title')}</h1>
      <select onChange={(e) => i18n.changeLanguage(e.target.value)}>
        <option value="pt-BR">Portugues</option>
        <option value="en">English</option>
      </select>
    </div>
  );
}

// apps/web/src/i18n/index.ts
import { createI18n } from 'vue-i18n';
import ptBR from './locales/pt-BR.json';
import en from './locales/en.json';

export const i18n = createI18n({
  locale: 'pt-BR',
  fallbackLocale: 'en',
  messages: { 'pt-BR': ptBR, en },
});

// Uso em componente Vue:
<template>
  <h1>{{ $t('dashboard.title') }}</h1>
  <p>{{ $t('dashboard.welcome', { name: user.name }) }}</p>

  <select v-model="$i18n.locale">
    <option value="pt-BR">Portugues</option>
    <option value="en">English</option>
  </select>
</template>