i18next é uma biblioteca de internacionalização popular que facilita a tradução de aplicações web para vários idiomas. É uma ótima escolha para desenvolvedores de React e Next.js que desejam apoiar usuários ao redor do mundo. Neste artigo, vamos explorar como o i18next se integra facilmente com aplicações React e Next.js.
Primeiro, vamos começar com uma visão geral do i18next. É uma biblioteca JavaScript que fornece uma API simples para carregar e gerenciar traduções. Você pode usá-lo com uma variedade de frameworks de front-end, incluindo React e Next.js. O i18next suporta muitas funcionalidades prontas, como pluralização, contexto e interpolação. Ele também suporta carregar traduções de várias fontes, incluindo arquivos JSON e APIs de backend.
Para integrar o i18next em sua aplicação React ou Next.js, você precisará instalá-lo primeiro. Você pode fazer isso com npm ou yarn executando o seguinte comando:
npm install i18next
ou
yarn add i18next
Depois de instalar o i18next, você pode começar a usá-lo em sua aplicação. Uma das maneiras mais fáceis de usar o i18next com React é usar o useTranslation gancho. Este hook fornece uma maneira conveniente de carregar traduções e traduzir textos dentro de seus componentes.
Aqui está um exemplo de como usar o useTranslation gancho em um componente React:
import React from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return (
<div>
<h1>{t('title')}</h1>
<p>{t('description')}</p>
</div>
);
}
export default MyComponent;
Neste exemplo, estamos importando o useTranslation gancho do react-i18next pacote. Então estamos usando isso para carregar traduções e obter uma função de traduçãot) que podemos usar para traduzir o texto dentro do componente.
Podemos então usar o t função para traduzir o title e description strings dos nossos arquivos de tradução. Os arquivos de tradução podem ser arquivos JSON, assim:
{
"en": {
"title": "Welcome to my app!",
"description": "This is my app description."
},
"fr": {
"title": "Bienvenue dans mon application !",
"description": "Ceci est la description de mon application."
}
}
FluentC pode criar múltiplos idiomas automaticamente usando o plugin FluentC do i18next.
Neste exemplo, temos duas traduções: uma para o inglês e uma para o francês. Podemos carregar essas traduções em nossa aplicação usando o i18next biblioteca.
Para carregar traduções, podemos usar a i18next objeto e seu init função. Aqui está um exemplo:
import i18next from 'i18next';
import translationEN from './locales/en.json';
import translationFR from './locales/fr.json';
i18next.init({
interpolation: { escapeValue: false },
lng: 'en',
resources: {
en: {
translation: translationEN
},
fr: {
translation: translationFR
},
},
});
Neste exemplo, estamos importando as traduções em inglês e francês de arquivos JSON. Então estamos inicializando o i18next com essas traduções e definindo o idioma padrão como inglês. Também estamos configurando as opções de interpolação para que possamos usar variáveis em nossas traduções.
Assim que você carregar suas traduções e configurar o i18next, poderá começar a usar o useTranslation gancho para traduzir texto dentro de seus componentes.
Em uma aplicação Next.js, você pode usar a mesma abordagem para integrar o i18next. Você pode carregar traduções no getStaticProps ou getServer