What is the useTranslation hook in Next.js?

useTranslation is a custom hook provided by the next-i18next and react-i18next libraries for implementing internationalization (i18n) and multi-language translations in Next.js applications:

### How It Works:

1. Translation strings are stored in JSON files per locale:

   public/locales/
   ├── en/common.json  --> { "welcome": "Welcome back, {{name}}!" }
   └── es/common.json  --> { "welcome": "¡Bienvenido de nuevo, {{name}}!" }
   

1. Using the hook inside a component:

   import { useTranslation } from 'next-i18next';

   export function Header({ userName }: { userName: string }) {
     const { t } = useTranslation('common');
     return <h1>{t('welcome', { name: userName })}</h1>;
   }
   

### In Modern App Router:
Modern Next.js 13+ App Router natively supports localized sub-path routing (e.g. app/[lang]/page.tsx) with dictionary loaders (getDictionary(lang)), reducing dependency on heavy client-side i18n libraries.