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