I'm currently working on implementing internationalization (I18N) in my Next.js 14 application, utilizing both Static Site Generation (SSG) and Server-Side Rendering (SSR). I've encountered a scenario where I find myself passing the language (lang) from the page.tsx file to all the children components to enable internalization.

For example, my IndexPage looks like this:

import { getDictionary } from '../../get-dictionary'
import { Locale } from '../../i18n-config'
import Template from './components/counter'

export default async function IndexPage({
  params: { lang },
}: {
  params: { lang: Locale }
}) {
  const dictionary = await getDictionary(lang)

  return (
    <div>
      <Template dictionary={dictionary} />
    </div>
  )
}

While this approach works, it requires passing the dictionary as a prop to every child component. I'm curious to know if there's a more streamlined way to directly import the necessary dictionary in each child component, eliminating the need to pass it explicitly as a prop.

Any insights or suggestions on optimizing the internationalization setup in a Next.js application would be greatly appreciated!

Thank you!