I’m trying to set up locale, but it shows key instead of value on my next app using next-i18next. I’ve tried following next-i18next’s documentation but it still doesn’t work and I don’t know where did I go wrong. Here’s my code

public/locales/en/common.json

{
    "test": "my test string"
}

next-i18next.js

const path = require('path');

module.exports = {
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
  localePath: path.resolve('./public/locales'),
};

next.config.js

const { i18n } = require('./next-i18next.config');

module.exports = {
  i18n,
};

pages/_app.js

import nextI18NextConfig from '../next-i18next.config';

var ls = require("local-storage");
const clientSideEmotionCache = createEmotionCache();

function MyApp(props) {

  return (
    ....
  );
}

export default appWithTranslation(MyApp, nextI18NextConfig);

src/content/Home/PageHeader.js

import { useTranslation } from "next-i18next";

function PageHeader() {

  const { t } = useTranslation('common');

  return (
    <Grid container justifyContent="space-between" alignItems="center">
      {t('test')} (This displayed as "test" instead of "my test string")
    </Grid>
  );
}

export default PageHeader;

Where did I go wrong? Thank you