Internacionalização (i18n) é o processo de projetar um aplicativo para ser facilmente adaptável a diferentes idiomas e regiões sem alterações de engenharia. Neste artigo, você aprenderá como configurar o i18n em um aplicativo Next.js e criar um alternador de idioma para alternar entre inglês e espanhol usando next-intl.

Instalação

Primeiro, você precisa instalar a biblioteca next-intl, que facilita o gerenciamento da internacionalização no Next.js. Execute o seguinte comando em seu terminal:

npm install next-intl

Estrutura do Projeto

A estrutura do projeto será a seguinte:

├── messages
│   ├── en.json
│   └── es.json
├── next.config.mjs
└── src
    ├── i18n.ts
    ├── middleware.ts
    └── app
        └── [locale]
            ├── layout.tsx
            └── page.tsx

1. Configurando mensagens de tradução

Crie um diretório de mensagens na raiz do seu projeto. Dentro deste diretório, adicione arquivos JSON para cada idioma que você deseja oferecer suporte.

mensagens/en.json

{
  "greeting": "Hello Codú",
  "farewell": "Goodbye Codú"
}

mensagens/es.json

{
  "greeting": "Hola Codú",
  "farewell": "Adiós Codú"
}

Esses arquivos contêm as traduções das frases que seu aplicativo usará.

2. Configurando Next.js

Configure Next.js para oferecer suporte à internacionalização em next.config.mjs.

próximo.config.mjs

import { getRequestConfig } from 'next-intl/server';

// List of supported languages
const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  // Validate that the incoming `locale` parameter is valid
  if (!locales.includes(locale)) {
    return { notFound: true };
  }

  return {
    messages: (await import(`./messages/${locale}.json`)).default
  };
});

Este arquivo configura Next.js para carregar as mensagens de tradução corretas com base no idioma solicitado.

3. Middleware de Internacionalização

Crie um middleware para lidar com o redirecionamento e definir o idioma padrão.

src/middleware.ts

import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  // List of all supported languages
  locales: ['en', 'es'],

  // Default language
  defaultLocale: 'en'
});

export const config = {
  // Only match internationalised pathnames
  matcher: ['/', '/(en|es)/:path*']
};

Este middleware lida com o redirecionamento para o idioma padrão se nenhum for especificado.

4. Configuração de Internacionalização

Crie um arquivo de configuração para gerenciar as configurações de internacionalização.

src/i18n.ts

import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

const locales = ['en', 'es'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../messages/${locale}.json`)).default
  };
});

Este arquivo valida as localidades e carrega as mensagens correspondentes.

5. Configurando Layout e Página

Configure o layout e a página principal para suportar a internacionalização.

src/app/[locale]/layout.tsx

import { useLocale } from 'next-intl';
import { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const locale = useLocale();
  return (
    
      {children}
    
  );
}

src/app/[locale]/page.tsx

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations();
  return (
    

      
{t('greeting')}
      
{t('farewell')}
    
  );
}

Esses arquivos configuram o layout e a página principal para usar as traduções.

6. Criando o alternador de idioma

Finalmente, crie um alternador de idioma para alternar entre inglês e espanhol.

src/app/[localidade]/switcher.tsx

'use client';

import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ChangeEvent, useTransition } from 'react';

export default function LocalSwitcher() {
  const [isPending, startTransition] = useTransition();
  const router = useRouter();
  const localActive = useLocale();

  const onSelectChange = (e: ChangeEvent) => {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  };

  return (
    
      
Change language
      
        English
        Spanish
      
    
  );
}

Este componente permite aos usuários alterar o idioma da interface.

Conclusão

Com essas etapas, você configurou com êxito a internacionalização em seu aplicativo Next.js e criou um alternador de idioma para alternar entre inglês e espanhol. Isso permitirá que seu aplicativo suporte vários idiomas e forneça uma experiência de usuário localizada.