Reactjs – Next js 14 – How to use i18n

I am starting a project from scratch with next js 14, using /app as the directory and not using src and I have a problem when trying to use i18n according to the vercel guide

Following this guide

https://next-intl-docs.vercel.app/docs/getting-started/pages-router

I have configured the middleware, the translation file and other files.

I am creating a page to log in, this component makes a fetch call to an API and logs in the user…

I have the problem trying to make the texts on this page automatically translatable according to the language

/* eslint-disable @next/next/no-img-element */
'use client';
import { useRouter } from 'next/navigation';
import React, { useContext, useState } from 'react';
import { useAuth } from '@/layout/context/authcontext';
import {useTranslations} from 'next-intl';

const LoginPage = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [checked, setChecked] = useState(false);
    const { layoutConfig } = useContext(LayoutContext);

    const { login, error } = useAuth();
    const [loginError, setLoginError] = useState('');

    const handleLogin = async () => {
    ...
    ...
    };

    const router = useRouter();
    const t = useTranslations('Index');

    return (
        <div>
             <h1>{t('title')}</h1>;                
        </div>
    );
};

export default LoginPage;

The error I’m getting is this and it has me a little confused

Unhandled Runtime Error
Error: Failed to call `useTranslations` because the context from `NextIntlClientProvider` was not found.

This can happen because:
1) You intended to render this component as a Server Component, the render
   failed, and therefore React attempted to render the component on the client
   instead. If this is the case, check the console for server errors.
2) You intended to render this component on the client side, but no context was found.
   Learn more about this error here: https://next-intl-docs.vercel.app/docs/environments/server-client-components#missing-context

I have read next js documentation, I have consulted specialized forums and I have struggled for many hours with the component… without any success.