使用next-translate时复合布局（getLayout）无法检测，如何解决？

问题原因 #

next-translate在页面组件未定义getStaticProps/getServerSideProps时，会自动生成包装组件注入翻译能力，这个过程会覆盖原组件的静态属性（比如你定义的pageLayout），导致_app.tsx中无法读取到布局配置。

可行解决方案 #

方案1：直接将布局属性挂载到最终导出的组件上 #

修改pages/test.tsx的导出逻辑，把pageLayout直接绑定到经过所有HOC包装后的组件上：

function TestPage() {
  const { t } = useTranslation();

  return (
    <>
      My testing page with translation
    </>
  );
}

// 先执行HOC包装
const WrappedTest = withOtherHoc(TestPage);
// 挂载布局属性到最终导出的组件
WrappedTest.pageLayout = MyLayout;

export default WrappedTest;

方案2：自定义翻译HOC，保留原组件静态属性 #

创建一个自定义的翻译包装函数，确保原组件的静态属性被拷贝到包装后的组件上：

// utils/withTranslationAndProps.ts
import { withTranslation } from 'next-translate';

export const withTranslationAndProps = (Component, namespace = 'common') => {
  const TranslatedComponent = withTranslation(namespace)(Component);
  // 拷贝原组件所有静态属性到翻译后的组件
  Object.assign(TranslatedComponent, Component);
  return TranslatedComponent;
};

然后在页面组件中使用这个自定义HOC：

// pages/test.tsx
function TestPage() {
  const { t } = useTranslation();

  return (
    <>
      My testing page with translation
    </>
  );
}

TestPage.pageLayout = MyLayout;

// 先用自定义HOC处理翻译，再用其他HOC包装
export default withOtherHoc(withTranslationAndProps(TestPage));

方案3：在_app.tsx中递归查找原组件的布局属性 #

如果不想修改页面组件的导出逻辑，可以在_app.tsx中递归遍历组件的包装层级，找到带有pageLayout的原组件：

// _app.tsx
function App({ Component, pageProps }) {
  let Layout = Component.pageLayout;
  let currentComp = Component;

  // 递归查找内层组件的静态属性，根据实际HOC调整属性名（比如wrappedComponent/WrappedComponent）
  while (!Layout && currentComp.wrappedComponent) {
    currentComp = currentComp.wrappedComponent;
    Layout = currentComp.pageLayout;
  }

  // 兜底使用默认布局
  if (!Layout) Layout = DefaultLayout;

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

注意：此方法依赖HOC的实现细节，不同HOC包装后的组件可能使用不同的属性名存储原组件（比如next-translate可能用originalComponent，需要通过调试确认）。

内容的提问来源于stack exchange，提问作者Meow Code