Per-page layouts are not rendering

I’m using per-page layouts as described here https://nextjs.org/docs/basic-features/layouts#per-page-layouts and when I use them with next-translate the layout is not rendering. Can I get some help? Thank you very much

nextJS version: 11.1.2 and 12.0.1 (tried both) next-translate version: 1.1.1

// Layout.tsx

export const Layout = ({ children }: PropsWithChildren<unknown>): JSX.Element => {
  return (
    <main>
      {children}
    </main>
  );
};

// index.tsx

import { Layout } from '@components';

const Home = (): JSX.Element => {
  const { t } = useTranslation();

  return (
    <div>
        {t('home:description')}
    </div>
  );
};

Home.getLayout = (page: PageProps) => <Layout>{page}</Layout>;

export default Home;

// _app.tsx

function MyApp({ Component, pageProps }: Props): JSX.Element {
  const getLayout = Component.getLayout || ((page) => page);

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

export default MyApp;

[rmlevangelio]

Thanks @aralroca for this solution!

[aralroca]

no problem, we all make mistakes ! I’m glad it’s working for you then. I close the issue

do you recommend me that? Should I avoid this?

It’s good that you do it this way, it doesn’t take up that much hoist-non-react-statics (1.2kb) and it’s used by most libraries that use HOC to copy everything.