Question 1

Qual é o papel principal do arquivo middleware.ts em uma aplicação Next.js com next-intl?

Accepted Answer

O middleware next-intl detecta automaticamente o locale do usuário (via cabeçalho Accept-Language, cookies ou URL) e redireciona para a URL apropriada com o prefixo de locale. Ele é executado antes de cada requisição e gerencia a negociação de locale sem código adicional nos componentes. É o ponto de entrada obrigatório para habilitar o routing i18n no Next.js App Router.

Question 2

No next-intl, onde os arquivos de tradução devem ser colocados para uma estrutura de projeto otimizada?

Accepted Answer

Os arquivos de tradução são colocados em messages/[locale].json na raiz do projeto (ex: messages/fr.json, messages/en.json). Esta convenção facilita a descoberta de traduções e permite que next-intl as carregue automaticamente via configuração i18n. Alguns projetos também usam messages/[locale]/ com arquivos separados por namespace para melhor organização.

Question 3

Qual é a diferença principal entre useTranslations e getTranslations no next-intl?

Accepted Answer

useTranslations é um hook React síncrono para Client Components, enquanto getTranslations é uma função async para Server Components. getTranslations permite buscar traduções do lado do servidor sem enviar JavaScript ao cliente, melhorando o desempenho. useTranslations é necessário para componentes interativos que exigem a diretiva use client.

Internacionalização do Next.js

Qual é o papel principal do arquivo middleware.ts em uma aplicação Next.js com next-intl?

Resposta

No next-intl, onde os arquivos de tradução devem ser colocados para uma estrutura de projeto otimizada?

Resposta

Qual é a diferença principal entre useTranslations e getTranslations no next-intl?

Resposta

Como configurar os locales suportados no next-intl?

Qual é a sintaxe para usar variáveis em uma tradução next-intl?

Outros temas de entrevista React / Next.js

Fundamentos de JavaScript

Fundamentos do React

React Hooks

Ciclo de vida dos componentes

React Router

Gerenciamento de estado com Context

Formulários e Controlled Components

Busca de dados e API

React Query (TanStack Query)

Styling & CSS-in-JS

Fundamentos do Next.js

TypeScript com React

Data Fetching no Next.js

Server Actions do Next.js

Roteamento e Navegação no Next.js

API Routes do Next.js

Metadata & SEO no Next.js

Middleware e Auth no Next.js

Testes em React

Zustand State Management

Otimização de Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Recursos avançados do Next.js

Deploy e Produção com Next.js

Architecture & Design Patterns

React Server Components

React Security & Boas Práticas

Domine React / Next.js para sua proxima entrevista