useCommonProps not working with next-i18next

[FabianDaniel00]

🐛 Bug Report

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: () => 'light' },
    { key: 'footerStyle', 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

[adrai]

I have no idea... but feel free to investigate: https://github.com/i18next/next-i18next/blob/master/src/appWithTranslation.tsx

[FabianDaniel00]

I founded an alternative solution.

I removed the next-common-props from the project. Created a src\utils\common-props.ts file.

// src\utils\common-props.ts:

const COMMON_PROPS: { [key: string]: { [key: string]: () => any } } = {
  ...,
  '/example/path/to/a/page': {
    navbarStyle: () => 'light',
    footerStyle: () => 'dark',
  },
  ...,
};

const getCommonProps = (pathname: string, keys: string[] | null = null) => {
  const commonProps: { [key: string]: any } = {};

  if (COMMON_PROPS[pathname])
    (keys === null
      ? Object.keys(COMMON_PROPS[pathname])
      : keys.filter((key) => COMMON_PROPS[pathname][key] !== undefined)
    ).forEach((key) => (commonProps[key] = COMMON_PROPS[pathname][key]()));

  return commonProps;
};

export default getCommonProps;

And use it like this:

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

...
import getCommonProps from '@/utils/common-props';
...

export default function Navbar({ pathname }: { pathname: string }) {
  ...

  const { navbarStyle } = getCommonProps(pathname, ['navbarStyle']);

  ...
}

Please write a comment if you found a better solution for this. I'm gonna close this issue.