useCommonProps not working with next-i18next

34 Views Asked by At

I'm working on a project with next.js. When using common-props with next-i18next the defined props are missing from pageProps and from useCommonProps().

To Reproduce

I using common-props to get page specific data in layout components, in this case in the <Navbar />. I have a common-props.config.js file where I define the props:

// common-props.config.js:

module.exports = () => ({
  ...,
  '/example/path/to/a/page': [
    { key: 'navbarStyle', data: () => 'dark' },
  ],
  ...,
});

And then I getting these props in the <Navbar /> component. (<Navbar /> component is rendered inside the <Layout /> component):

// src/components/nav/Navbar.tsx:

...
import useCommonProps from 'next-common-props/useCommonProps';
...

export default function Navbar() {
  ...

  const { common: { navbarStyle } } = useCommonProps();

  ...
}

In this case the navbarStyle value should be 'dark' but instead now it's undefined. This is worked fine until I added next-i18next to the project. I noticed if I remove the appWithTranslation function from src/pages/_app.tsx it's working again. It's also missing from pageProps.

// src/pages/_app.tsx:

const App = ({ Component, pageProps }: AppProps) => {
  ...

  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
};

export default appWithTranslation(App);

Expected behavior

I want to use common-props together with next-i18next. I assume that appWithTranslation function override some pageProps and that's why they are missing.

Your Environment

  • runtime version: next: v13.1.5, node: v16.20.2, Brave browser: Version 1.59.117 Chromium: 118.0.5993.70 (Official Build) (64-bit)
  • i18next version: v23.5.1
  • next-i18next version: v14.0.3
  • react-i18next version: v13.2.2
  • os: Ubuntu 22.04.3 LTS
0

There are 0 best solutions below