M

MLOG

Português

Aprenda a implementar internacionalização (i18n) de forma integrada nas suas aplicações Next.js para alcançar um público global. Aborda roteamento, tradução de conteúdo e melhores práticas.

Internacionalização com Next.js: Construindo Aplicações Multilíngues para um Público Global

No mundo interconectado de hoje, construir aplicações que atendem a um público global já não é um luxo – é uma necessidade. O Next.js, uma poderosa framework de React, oferece recursos robustos para implementar a internacionalização (i18n), permitindo-lhe criar aplicações multilíngues que proporcionam uma experiência localizada a utilizadores em todo o mundo. Este guia abrangente irá orientá-lo através dos conceitos essenciais, técnicas e melhores práticas para construir aplicações Next.js internacionalizadas.

Entendendo Internacionalização e Localização

Antes de mergulhar nos detalhes do i18n do Next.js, vamos clarificar os termos chave:

Essencialmente, o i18n prepara a sua aplicação para a localização. Ao separar elementos dependentes do idioma do código principal, torna-se mais fácil localizar a aplicação para diferentes mercados.

Por que Implementar Internacionalização no Next.js?

Implementar i18n na sua aplicação Next.js oferece inúmeros benefícios:

Recursos e Configuração de i18n no Next.js

O Next.js oferece suporte integrado para i18n através das suas funcionalidades de roteamento e gestão de conteúdo. A seguir, uma análise das funcionalidades importantes:

1. Configurando o i18n em next.config.js

A configuração central do i18n reside no ficheiro next.config.js. Eis um exemplo:


/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'es', 'fr'], // Um array de localidades suportadas (códigos de idioma)
    defaultLocale: 'en', // A localidade padrão a ser usada
    localeDetection: true, // Ativar/desativar a deteção automática de localidade com base nas configurações do navegador (opcional)
    //  domains: [
    //  {
    //    domain: 'example.com',
    //    defaultLocale: 'en',
    //  },
    //  {
    //    domain: 'example.es',
    //    defaultLocale: 'es',
    //  },
    //  ],
  },
}

module.exports = nextConfig;

Explicação:

2. Roteamento com Prefixos de Localidade

O Next.js adiciona automaticamente prefixos de localidade às rotas. Por exemplo, se tiver uma página em /about e a localidade for 'es' (espanhol), o URL tornar-se-á /es/about. Isto permite diferentes versões de idioma das páginas e permite que os motores de busca indexem o conteúdo para cada localidade. A framework trata do redirecionamento e do roteamento por si.

3. Utilizando o Hook useRouter

O hook useRouter de next/router fornece acesso à localidade atual e outras informações de roteamento.


import { useRouter } from 'next/router';

function MyComponent() {
  const router = useRouter();
  const { locale, locales, defaultLocale } = router;

  return (
    

      
Localidade atual: {locale}

      
Localidades disponíveis: {locales.join(', ')}

      
Localidade padrão: {defaultLocale}

    

  );
}

export default MyComponent;

O objeto router oferece as seguintes propriedades chave:

Estratégias de Tradução de Conteúdo

Depois de configurar a sua aplicação Next.js para i18n, precisará de implementar estratégias para traduzir o seu conteúdo. Aqui estão várias abordagens populares:

1. Usando um Sistema de Gestão de Tradução (TMS) Dedicado

Para projetos de grande escala com muitos idiomas, um TMS é altamente recomendado. Opções populares incluem:

Benefícios:

2. Criando Ficheiros de Tradução JSON

Para projetos mais pequenos, usar ficheiros JSON para armazenar traduções é um método simples e eficaz.

Exemplo de Estrutura de Diretórios:


/src
├── locales
│   ├── en.json
│   └── es.json
├── components
│   └── MyComponent.js
└── pages
    └── index.js

Exemplo en.json:


{
  "greeting": "Olá, mundo!",
  "welcomeMessage": "Bem-vindo ao nosso site."
}

Exemplo es.json:


{
  "greeting": "Olá, mundo!",
  "welcomeMessage": "Bem-vindo ao nosso site."
}

Exemplo MyComponent.js:


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';

function MyComponent() {
  const { locale } = useRouter();
  const t = locale === 'es' ? es : en;

  return (
    

      
{t.greeting}

      
{t.welcomeMessage}

    

  );
}

export default MyComponent;

Esta abordagem oferece flexibilidade e é direta para projetos mais pequenos. Geralmente, é fácil de atualizar e manter.

3. Usando uma Biblioteca de Tradução

Várias bibliotecas de JavaScript simplificam a tradução de conteúdo dentro dos seus componentes React.

Exemplo com next-i18next (Instalação: npm install next-i18next i18next react-i18next):

Crie um ficheiro de configuração i18n (ex., i18n.js no seu diretório raiz):


// i18n.js
import { createServerSideHelpers } from 'next-i18next'
import { i18n } from './next-i18next.config'

export function initI18next(req, res, namespaces = ['common']) {
  const helpers = createServerSideHelpers(
    req, 
    res, 
    i18n, 
    namespaces
  )

  return helpers
}

export { appWithTranslation } from 'next-i18next'
export { i18n }

Crie a sua configuração Next.js para next-i18next.


// next-i18next.config.js
const { i18n } = require('./next-i18next.config');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es', 'fr'],
  },
  // outra configuração
}

module.exports = nextConfig

Adicione a configuração e a importação da tradução ao seu _app.js:


import { appWithTranslation } from 'next-i18next';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default appWithTranslation(MyApp);

Crie uma pasta e preencha-a com as localidades para as suas traduções.


/public
└── locales
    ├── en
    │   └── common.json
    ├── es
    │   └── common.json
    └── fr
        └── common.json

Exemplo en/common.json:


{
  "greeting": "Olá, mundo!",
  "welcomeMessage": "Bem-vindo ao nosso site."
}

Usando a tradução num componente:


import { useTranslation } from 'next-i18next';

function MyComponent() {
  const { t } = useTranslation('common');

  return (
    

      
{t('greeting')}

      
{t('welcomeMessage')}

    

  );
}

export default MyComponent;

Este exemplo usa o hook useTranslation para obter traduções com base na localidade atual.

Lidando com Rotas Dinâmicas e Geração de Site Estático (SSG)

A internacionalização torna-se mais complexa ao lidar com rotas dinâmicas (ex., publicações de blog, páginas de produtos) e geração de site estático (SSG).

1. Rotas Dinâmicas (ex: /blog/[slug])

Para rotas dinâmicas, precisará de gerar os caminhos corretos para cada localidade durante o tempo de construção usando getStaticPaths. Esta função retorna um array de caminhos que o Next.js deve pré-renderizar.


export async function getStaticPaths() {
  const paths = [];
  const locales = ['en', 'es', 'fr'];
  const posts = await fetchPosts(); // Obter dados das publicações do blog

  posts.forEach(post => {
    locales.forEach(locale => {
      paths.push({
        params: {
          slug: post.slug,
        },
        locale,
      });
    });
  });

  return {
    paths,
    fallback: false, // ou 'blocking' se quiser mostrar um estado de carregamento
  };
}

export async function getStaticProps({ params, locale }) {
  const post = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

Explicação:

2. Geração de Site Estático (SSG) com getStaticProps

Em getStaticProps, pode obter conteúdo traduzido com base no parâmetro locale.


export async function getStaticProps({ params, locale }) {
  // Obter conteúdo com base na localidade e nos parâmetros
  const { post } = await getPostBySlug(params.slug, locale);

  return {
    props: {
      post,
    },
  };
}

A função getPostBySlug deve obter o conteúdo traduzido para o slug e localidade fornecidos, que pode ser recuperado dos seus ficheiros de tradução, base de dados ou um CMS.

3. Renderização do Lado do Servidor (SSR) com getServerSideProps

Para conteúdo que precisa de ser obtido no momento do pedido, use getServerSideProps. Isto é útil se o conteúdo mudar frequentemente ou for personalizado para cada utilizador.


export async function getServerSideProps({ params, locale, req, res }) {
  // Obter dados com base na localidade e nos parâmetros (ex., de uma base de dados)
  const data = await fetchData(params.slug, locale);

  return {
    props: {
      data,
    },
  };
}

Melhores Práticas para a Internacionalização com Next.js

Seguir estas melhores práticas ajudá-lo-á a construir aplicações multilíngues robustas, fáceis de manter e amigáveis para o utilizador:

Considerações de SEO para Sites Internacionalizados

Otimizar o seu site internacionalizado para os motores de busca é essencial para gerar tráfego orgânico de todo o mundo. Aqui estão algumas das melhores práticas de SEO:

Exemplo: Construindo um Blog Multilíngue Simples

Vamos criar um exemplo simplificado de um blog multilíngue usando o Next.js. Isto fornecerá uma ilustração mais concreta de como aplicar os conceitos discutidos acima.

1. Configuração do Projeto

Crie um novo projeto Next.js:


npx create-next-app my-multi-lang-blog
cd my-multi-lang-blog

2. Configure o i18n (next.config.js)


/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'es', 'fr'],
    defaultLocale: 'en',
  },
}

module.exports = nextConfig

3. Crie os Ficheiros de Tradução

Crie uma pasta locales no diretório raiz e adicione os seguintes ficheiros JSON:

locales/en.json:


{
  "title": "Bem-vindo ao Meu Blog",
  "postTitle": "Minha Primeira Publicação",
  "postContent": "Este é o conteúdo da minha primeira publicação no blog."
}

locales/es.json:


{
  "title": "Bem-vindo ao meu Blog",
  "postTitle": "Minha Primeira Publicação",
  "postContent": "Este é o conteúdo da minha primeira publicação do blog."
}

locales/fr.json:


{
  "title": "Bem-vindo ao Meu Blog",
  "postTitle": "Meu Primeiro Artigo",
  "postContent": "Este é o conteúdo do meu primeiro artigo de blog."
}

4. Crie o Componente de Publicação do Blog (ex: components/BlogPost.js)


import { useRouter } from 'next/router';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function BlogPost() {
  const router = useRouter();
  const { locale } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.postTitle}

      
{translations.postContent}

    

  );
}

export default BlogPost;

5. Crie a Página de Índice (pages/index.js)


import { useRouter } from 'next/router';
import BlogPost from '../components/BlogPost';
import en from '../locales/en.json';
import es from '../locales/es.json';
import fr from '../locales/fr.json';

function HomePage() {
  const router = useRouter();
  const { locale, locales } = router;

  let translations;
  switch (locale) {
    case 'es':
      translations = es;
      break;
    case 'fr':
      translations = fr;
      break;
    default:
      translations = en;
  }

  return (
    

      
{translations.title}

      
      

        {locales.map((l) => (
          
            {l.toUpperCase()}
          
        ))}
      

    

  );
}

export default HomePage;

Este exemplo simplificado mostra os princípios fundamentais da internacionalização com Next.js. Pode expandir esta estrutura básica para incluir funcionalidades mais complexas, como rotas dinâmicas e integração com sistemas de gestão de tradução. Considere melhorar os links acima com o componente Link e adicionar o atributo locale apropriado.

6. Execute a Aplicação

Execute a aplicação com:


npm run dev

Agora pode aceder ao seu blog em http://localhost:3000 (inglês), http://localhost:3000/es (espanhol), e http://localhost:3000/fr (francês). Deverá ver o título e o conteúdo da publicação do blog traduzidos com base na localidade selecionada.

Conclusão

O Next.js fornece um conjunto abrangente de funcionalidades para implementar a internacionalização nas suas aplicações web. Seguindo os princípios e técnicas delineados neste guia, pode criar aplicações multilíngues que oferecem experiências localizadas a utilizadores em todo o mundo. Lembre-se de planear a sua estratégia de i18n cedo, escolher o método de tradução certo para as suas necessidades e priorizar a experiência do utilizador. Com planeamento e execução cuidadosos, pode construir aplicações que ressoam com um público global e desbloqueiam novas oportunidades de crescimento. A aprendizagem contínua, mantendo-se a par dos últimos lançamentos e melhores práticas, garantirá que está a utilizar as suas ferramentas e tecnologias de forma eficaz.

À medida que a tecnologia avança, espere ver surgir funcionalidades de i18n mais avançadas. A capacidade de alcançar utilizadores de diferentes culturas e grupos linguísticos continuará a ser uma prioridade chave para os desenvolvedores de aplicações em todo o mundo. Portanto, dominar os fundamentos do i18n é uma habilidade valiosa que aumentará o seu valor no cenário de desenvolvimento global de hoje.