`useI18n` must be used inside `I18nProvider`

QuiiBz / next-international

Type-safe internationalization (i18n) for Next.js

https://next-international.vercel.app

MIT License

1.19k stars 52 forks source link

`useI18n` must be used inside `I18nProvider` #335

Closed Fionn96 closed 5 months ago

Fionn96 commented 5 months ago

I have a client component that needs to be used in the server page. When I try to import it directly, I get the error "Error: useI18n must be used inside I18nProvider". How to solve it?

codesandbox

QuiiBz commented 5 months ago

You need to wrap client components inside I18nClientProvider, as the error message suggests. In your codesandbox you're doing it for the /client page inside the layout.tsx, so you can just move the layout from /app/[locale]/client/layout.tsx to /app/[locale]/layout.tsx.