next-translate is returning key

Question

Next translation is displaying key instead of lang common:menu.1.title common:read_more

i18n.js

module.exports = {
    locales: ['en', 'de', 'cs'],
    defaultLocale: 'en',
    redirectToDefaultLang: true,
    pages: {
        '*': ['common'],
        '/404': ['home'],
        '/': ['home'],
        '/about': ['about'],
    },
    interpolation: {
        prefix: '${',
        suffix: '}',
    },
    logger: true,
    logBuild: true,
    loadLocaleFrom: (locale, namespace) =>
        import(`./public/locales/${locale}/${namespace}`).then((m) => m.default),
}

this is my next.config.js

const nextTranslate = require('next-translate')

module.exports = nextTranslate()

_app.js

import I18nProvider from 'next-translate/I18nProvider';
class MyApp extends App {
    render () {
        const { Component, pageProps, store } = this.props

        return (

                <I18nProvider lang={'en'} >
                    <Component {...pageProps} />
                    <GoTop scrollStepInPx="50" delayInMs="16.66" />
                </I18nProvider>
            );
        }
    }


export default MyApp

and following HOC

import React, {Component} from "react";
import withTranslation from 'next-translate/withTranslation'

class NavBarLink extends Component {
    render() {
        const { t, lang } = this.props.i18n
        const description =  t('menu.1.title')
        const description2 =  t('read_more')

        return <p>{description + ' '+ description2}</p>
    }
}

export default withTranslation(NavBarLink, 'common')

The return value is common:menu.1.title common:read_more

Please can someone tell me what is missing in my code?

Answer 1

In new version of next-translate wouldn't need to provide I18nProvider as said here.

But when you provider that you should provide all namespaces you wanna use.

You'd better to look at this migration guide.