Passing props to parent layout

Question

I have to make a project where the client wants to have the URLs translated between pages of different language. The classical case where

/contacts  --> /it/contatti

It is a handful of pages, some of them depending on a slug, like /cars/[slug]. Instead of using i18n and middleware, I was thinking to manually create the translated routes and simply re-export the default component from the main page. So, for example, the content /it/contatti/page.tsx will be

import Page from '../(main-app)/contacts';
import { generateMetadata as originalGenerateMetadata} from '../(main-app)/contacts';

export async function generateMetadata({params}) {
  const newParams = { ...params, lang: 'it' };
  return originalGenerateMetadata({ params: newParams });
}

export default async function TranslatedPage({params}) {
  const newParams = { ...params, lang: 'it' };
  return Page ({ params: newParams });
}

It is a dirty way, I know, so open to any other suggestion (I am not an expert in this at all!).

In any case, everything works fine, however I also need to pass the language to the root layout, to populate lang in the main html tag

export default async function RootLayout({
  children,
  params
}: Readonly<{
  children: React.ReactNode
  params: { lang: string }
}>) {

  return (
    <html lang={params.lang}>
      <body className={font.className}>
        {children}
      </body>
    </html>
  )
}

How can I do this? I have absolutely no idea how to pass this property to it.

Passing props to parent layout

0 Replies