useCommonProps 不适用于 next-i18next

Question

我正在使用 next.js 开发一个项目。将

common-props

与

next-i18next

一起使用时，

pageProps

和

useCommonProps()

中缺少定义的道具。

重现

我使用

common-props

获取布局组件中的页面特定数据，在本例中是在

<Navbar />

中。我有一个

common-props.config.js

文件，我在其中定义道具：

// common-props.config.js:

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

然后我在

<Navbar />

组件中获取这些道具。 （

<Navbar />

组件渲染在

<Layout />

组件内部）：

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

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

export default function Navbar() {
  ...

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

  ...
}

在这种情况下，

navbarStyle

值应该是

'dark'

，但现在是

undefined

。在我将

next-i18next

添加到项目中之前，这一切都工作得很好。我注意到，如果我从

appWithTranslation

中删除

src/pages/_app.tsx

功能，它会再次工作。

pageProps

也缺少它。

// src/pages/_app.tsx:

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

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

export default appWithTranslation(App);

预期行为

我想将

common-props

与

next-i18next

一起使用。我假设

appWithTranslation

函数会覆盖一些

pageProps

，这就是它们缺失的原因。

您的环境

• 运行时版本：

  next: v13.1.5

  、

  node: v16.20.2

  、

  Brave browser: Version 1.59.117 Chromium: 118.0.5993.70 (Official Build)  (64-bit)

• i18下一个版本：

  v23.5.1

• 下一个-i18下一个版本：

  v14.0.3

• react-i18下一个版本：

  v13.2.2

• 操作系统：

  Ubuntu 22.04.3 LTS

Answer 1

我找到了一个替代解决方案：https://github.com/i18next/next-i18next/issues/2218#issuecomment-1783777753