Next.js i18n not translating "hello" with properly configured setup

Question

I'm working on an internationalization (i18n) setup in a Next.js project, but I'm encountering an issue with translating the "hello" string. Here's my configuration and code:

next.config.js:

module.exports = {
  i18n: {
    locales: ['en', 'es'],
    defaultLocale: 'en',
    localeDetection: false,
  },
};

Translation JSON files (locales/en.json and locales/es.json):

locales/en.json

{
  "hello": "Hello"
}

locales/es.json

{
  "hello": "Hola"
}

_app.js:

import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

component

import { useTranslation } from 'next-i18next';

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

  return <div>{t}</div>;
}

Even though I've configured the i18n setup, and I have translation files for both English and Spanish, when I use {t} in my component, it's not showing the translated "hello" string. I've double-checked my code and setup, but I can't figure out why the translation is not working.

Can someone please help me identify what might be causing this issue? Is there anything I'm missing in my configuration or code that could prevent the translation from displaying correctly? Thank you in advance for your assistance.