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 |
Execute o seguinte comando para instalar o componente:
$ npm install @lucas.weber.dev/nextjs-translate-component
Crie uma pasta no seu projeto em:
public/translate
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.
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
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 />
</>
);
}
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
Adicione os idiomas suportados no arquivo de configuração:
module.exports = {
i18n: {
locales: ['pt', 'en', 'es'],
defaultLocale: 'pt',
},
}
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>
);
}
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
}
};
}
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
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.
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);
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.
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!
Para adicionar mais idiomas:
- Crie o arquivo de idioma na pasta
/messages
- Adicione o ícone correspondente na pasta
/public/translate
- Adicionar o idioma no arquivo
/src/middleware.ts
- Adicionar o idioma no array de
locales
no arquivo/src/i18n/routing.ts
- 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.