Closed keesvanopdorp closed 10 months ago
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
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
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
.
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
I'm noticing few issues in your setup:
src/app/layout.tsx
should be moved to src/app/[locale]/layout.tsx
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
@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.
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:
Expected behavior Ability to use the hook in normal components
Screenshots
![image](https://github.com/QuiiBz/next-international/assets/35495762/8ef875b8-918e-4662-9bff-22ba3f573fb2)
About (please complete the following information):