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