Componente de Tradução - Next.js

Este componente facilita a implementação de uma experiência multilíngue em seu projeto Next.js, de forma simples e eficiente. Ele oferece suporte a:

• Next.js 14 com App Router e Page Router
• Next.js 12 e 13 com Page Router

As dependências utilizadas pelo componente são:

| Dependência | Versão | |--------------------------------------|-----------| | commander | ^12.1.0 | | i18next | ^23.15.1 | | i18next-browser-languagedetector | ^8.0.0 | | i18next-http-backend | ^2.6.1 | | inquirer | ^11.1.0 | | next | 14.2.14 | | next-intl | ^3.20.0 | | react | ^18 | | react-dom | ^18 | | react-i18next | ^15.0.2 |

Como utilizar o componente

Passo a Passo de integração

1. Instale o pacote

Execute o seguinte comando para instalar o componente:

$ npm install @lucas.weber.dev/nextjs-translate-component

2. Crie a pasta de ícones

Crie uma pasta no seu projeto em:

public/translate

3. Adicione ícones de bandeiras

Você pode optar por usar os ícones de bandeiras fornecidos pelo pacote:

• Navegue até a node_modules/@lucas.weber.dev/nextjs-translate-component/public
• Copie a pasta translate para o diretório public do seu projeto

Dica.: Caso prefira usar ícones próprios, basta salvá-los na pasta public/translate seguindo a mesma estrutura.

Suporte para App Router

O componente suporta os idiomas Português, Inglês e Espanhol através das bibliotecas next-intl e i18n. A estrutura do projeto deve seguir o diagrama abaixo:

├── messages (1)
│   ├── pt.json
|   ├── en.json
│   └── es.json
├── next.config.mjs (2)
└── src
    ├── i18n (3)
    │   ├── routing.ts 
    │   └── request.ts 
    ├── middleware.ts (4)
    └── app
        └── [locale] (5)
            ├── layout.tsx
            └── page.tsx

• messages: Diretório com os arquivos de tradução
• next.config.mjs: Configurações do Next.js
• i18n: Diretório para configuração do i18n
• middleware.ts: Define as rotas de tradução
• [locale]: Diretório que renderiza dinamicamente as páginas de acordo com a língua selecionada

Exemplo de uso

Após configurar a internacionalização, use o componente com as importações adequadas:

import { useTranslations } from 'next-intl';
import Translate from '@lucas.weber.dev/nextjs-translate-component/src/components/Translate';

export default function Page(){
	const { t } = useTranslations();
	return(
		<>
			<h1>{ t('hello') }</h1>
			<Translate />
		</>
	);
}

Suporte para Page Router

Com o Page Router, o componente também suporta os idiomas Português, Inglês e Espanhol, mantendo uma estrutura semelhante à mostrada anteriormente:

├── messages (1)
│   ├── pt.json
|   ├── en.json
│   └── es.json
├── next.config.js (2)
└── src
    ├── pages (3)
    │   ├── _app.tsx 
    │   └── index.tsx 

Arquivo next.config.js

Adicione os idiomas suportados no arquivo de configuração:

module.exports = {
    i18n: {
        locales: ['pt', 'en', 'es'],
        defaultLocale: 'pt',
    },
}

Arquivo _app.tsx

Implemente o provider de tradução:

import {AppProps} from 'next/app';
import {NextIntlClientProvider} from 'next-intl';

export default function App({Component, pageProps}: AppProps) {
  return (
    <NextIntlClientProvider
      locale="pt_BR"
      messages={pageProps.messages}
      timeZone="America/Sao_Paulo"
    >
      <Component {...pageProps} />
    </NextIntlClientProvider>
  );
}

Arquivo index.tsx

Configure a rota de tradução na página inicial:

import {GetStaticPropsContext} from 'next';
import {useTranslations} from 'next-intl';
import Translate from '@/components/Translate';

export default function Home() {
  const t = useTranslations();
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <h1>{t('hello')}</h1>
      <Translate />
    </div>
  );
}

export async function getStaticProps({locale}: GetStaticPropsContext) {
	return {
	  props: {
		messages: (await import(`../../messages/${locale}.json`)).default
	  }
	};
  }

Configuração Inicial de Internacionalização

Se você ainda não configurou a internacionalização, siga os passos abaixo. Caso queira mais detalhes, acesse a documentação.

O Setup abaixo irá criar os arquivos conforme a estrutura de rotas de sua aplicação Next.js

Inicialize o setup

Execute o seguinte comando para preparar o projeto:

$ npx @lucas.weber.dev/nextjs-translate-component init

Durante o processo, escolha:

• O modelo de rotas da sua aplicação
• Os idiomas suportados (PT, EN, ES)
• O idioma padrão

Caso sua aplicação use App router faça as últimas configurações.

Configurando o NextJS com next-intl

Adicione a seguinte configuração no arquivo next.config.mjs:

import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withNextIntl(nextConfig);

Configurando arquivo page.tsx

Adicione o seguinte trecho de codigo em sua página page.tsx localizada no diretório src/app/page.tsx

import { redirect } from "next/navigation";
import { routing } from '@/i18n/routing'

export default function RootPage(){
	redirect(routing.defaultLocale);
}

O trecho fará que quando houver uma requisição na rota "/", a aplicação será direcionada para a linguagem padrão definida ao instalar o pacote.

Teste a aplicação.

Após seguir os passos, rode o ambiente de desenvolvimento:

$ npm run dev

Seu projeto está agora pronto para suportar múltiplos idiomas de maneira simples!

Adicionando novos idiomas

Para adicionar mais idiomas:

1. Crie o arquivo de idioma na pasta /messages
2. Adicione o ícone correspondente na pasta /public/translate

App router

• Adicionar o idioma no arquivo /src/middleware.ts
• Adicionar o idioma no array de locales no arquivo /src/i18n/routing.ts

Page router

• Adicionar o idioma no array de locales no arquivo /next.config.js

Para mais informações sobre o sistema de internacionalização com NextJS, consulte a documentação oficial do next-intl.