npm package: @lucas.weber.dev/nextjs-translate-component
Description: A React component for language switching with Next.js.
Author: Lucas Weber
Latest version: 1.1.2

# 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:

```tsx
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:
```js
module.exports = {
    i18n: {
        locales: ['pt', 'en', 'es'],
        defaultLocale: 'pt',
    },
}
```

### Arquivo ```_app.tsx```
Implemente o provider de tradução:
```tsx
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:
```tsx
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](https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing).

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**:

```js
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**

```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](https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing).