store lang in context and refer from descendants

src/app/[lang]/_components/i18n/index.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { type FC, type ReactNode, createContext, useContext } from 'react'
+
+export const LangContext = createContext<string>('')
+
+type LangContextProviderProps = Readonly<{
+  lang: string
+  children: ReactNode
+}>
+
+export const LangContextProvider: FC<LangContextProviderProps> = ({ lang, children }) => (
+  <LangContext.Provider value={lang}>{children}</LangContext.Provider>
+)

src/app/[lang]/sample/_components/Birthday/index.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { type FC, use, useContext } from 'react'
+
+import { LangContext } from '@/app/[lang]/_components/i18n'
+import { useTranslation } from '@/app/_hooks/i18n'
+
+import translationDef from './translationDef'
+
+export const Birthday: FC = () => {
+  const lang = useContext(LangContext)
+  // devサーバーだとめちゃくちゃログが流れるのでなにか間違ってる気もする
+  const { t } = use(useTranslation({ lang, translationDef }))
+
+  return <p style={{ color: 'blue' }}>{t('myBirthday')}</p>
+}

src/app/[lang]/sample/_components/Birthday/translationDef.ts

@@ -0,0 +1,15 @@
+const ja = {
+  translation: {
+    myBirthday: '私の誕生日は11月21日です。',
+  },
+} as const
+
+const en = {
+  translation: {
+    myBirthday: 'My birthday is on Nov. 21st.',
+  },
+} as const
+
+const translationDef = { ja, en } as const
+
+export default translationDef

src/app/[lang]/sample/page.tsx

@@ -1,4 +1,6 @@
 import { nonDefaultLanguages, useTranslation } from '../../_hooks/i18n'
+import { LangContextProvider } from '../_components/i18n'
+import { Birthday } from './_components/Birthday'
 import translationDef from './translationDef'
 
 export const generateStaticParams = async () => nonDefaultLanguages.map(lang => ({ lang }))
@@ -13,9 +15,12 @@ export default async function SamplePage({ params }: SamplePageProps) {
   const { lang } = params
   const { t } = await useTranslation({ lang, translationDef })
   return (
-    <main>
-      <h1>{t('title')}</h1>
-      <p>{t('myLanguage')}</p>
-    </main>
+    <LangContextProvider lang={lang}>
+      <main>
+        <h1>{t('title')}</h1>
+        <p>{t('myLanguage')}</p>
+        <Birthday />
+      </main>
+    </LangContextProvider>
   )
 }