[Bug]: useI18n hook does not work in with client components that are not pages

[keesvanopdorp]

Describe the bug As the title already suggest i want to try use the useI18n hook in a client component that is not a page.

To Reproduce Steps to reproduce the behavior:

1. Create a next project with the latest version (using the app router and typescript)
2. Install next-international following the docs
3. Create a components folder
4. Create a component that use the useI18n hook
5. Import that component and add it to the homepage
6. See error in console

Expected behavior Ability to use the hook in normal components

Screenshots

About (please complete the following information):

• next-international version: 1.1.3
• Next.js version: 13.5.4

[QuiiBz]

I think you likely missed this part of the documentation, where you have to wrap your app inside an I18nProviderClient component (that's what the error suggests): https://next-international.vercel.app/docs/app-setup#move-your-existing-files

You can also check out the example, specifically this line: https://github.com/QuiiBz/next-international/blob/e0bad163fece71bce4d333fad533d5c75a1275c7/examples/next-app/app/%5Blocale%5D/client/layout.tsx#L5 with the Provider component being https://github.com/QuiiBz/next-international/blob/main/examples/next-app/app/%5Blocale%5D/provider.tsx

[keesvanopdorp]

The problem is the documentation only talks about using it for client side routes and the addBoardCard is a component that is rendered by a side rendered route

[QuiiBz]

What's a "side rendered route"? You can simply wrap your whole application inside a component as shown here: https://github.com/QuiiBz/next-international/blob/main/examples/next-app/app/%5Blocale%5D/provider.tsx

You can also send a reproduction so I can show you directly how to wrap your app inside I18nProviderClient.

[keesvanopdorp]

I'm using next 13 and everything is server side rendered by default, as you can see it in the project linked below https://github.com/keesvanopdorp/task-system/blob/master/src/app/[locale]/page.tsx

[QuiiBz]

I'm noticing few issues in your setup:

• src/app/layout.tsx should be moved to src/app/[locale]/layout.tsx
• You're never using I18nProviderClient, so you can't use useI18n. Copy/paste this component and use it in the root layout (src/app/[locale]/layout.tsx), similar to src/app/[locale]/client/layout.tsx

[keesvanopdorp]

@QuiiBz thanks for the help, I now create a provider file that exports the I18nProviderClient and has uses the use client directive and import into my RootLayout. Only thing was that I needed to keep the RootLayout in the app folder (src/app/) otherwise my catch all 404 page was not working anymore.