Internationalization for client side components #57405
-
|
I am using nextjs version 13.5.6 and using app router Internationalization for translating my components, |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 6 replies
-
|
did you added "use client" in files where is client side code? |
Beta Was this translation helpful? Give feedback.
-
|
i do, i get this error ./lib\dictionary.ts
ReactServerComponentsError:
You're importing a component that needs server-only. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
Learn more: https://nextjs.org/docs/getting-started/react-essentials
╭─[C:\Users\deghat\Desktop\Dana\dana\lib\dictionary.ts:1:1]
1 │ import 'server-only'
· ────────────────────
2 │ import { Locale } from '../i18n.config'
3 │
3 │ const dictionaries = {
╰────
One of these is marked as a client entry with "use client":
./lib\dictionary.ts
./src\app\[lang]\components\Typography\Button.tsx |
Beta Was this translation helpful? Give feedback.
-
|
After adding the import statement import If you need to access the dictionary from a client component, you should call the server-only function For example: // app/[lang]/layout.tsx
export default async function RootLayout({
children,
params,
}: {
children: React.ReactNode
params: { lang: Locale }
}) {
const dictionary = await getDictionary(params.lang)
return (
<html lang={params.lang}>
<body>
<DictionaryProvider dictionary={dictionary}>
{children}
</DictionaryProvider>
</body>
</html>
)
}// dictionary-provider.tsx
'use client'
type Dictionary = Awaited<ReturnType<typeof getDictionary>>
const DictionaryContext = React.createContext<Dictionary | null>(null)
export default function DictionaryProvider({
dictionary,
children,
}: {
dictionary: Dictionary
children: React.ReactNode
}) {
return (
<DictionaryContext.Provider value={dictionary}>
{children}
</DictionaryContext.Provider>
)
}
export function useDictionary() {
const dictionary = React.useContext(DictionaryContext)
if (dictionary === null) {
throw new Error('useDictionary hook must be used within DictionaryProvider')
}
return dictionary
}'use client'
export default function YourClientComponent(){
const dictionary = useDictionary()
return <div>{dictionary.something}</div>
} |
Beta Was this translation helpful? Give feedback.
-
|
Thank you this fixed my issue! |
Beta Was this translation helpful? Give feedback.
-
|
Hi, i'm doing exactly the same but i get this error : "Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"." It's referring to the dictionary var that we pass to the provider. Can you help me please? thank you |
Beta Was this translation helpful? Give feedback.
-
|
@hichui |
Beta Was this translation helpful? Give feedback.
-
|
Some kind of meaningless implementation. Then why "server only"? And if the dictionary is huge, put it all in context? |
Beta Was this translation helpful? Give feedback.
-
|
it worked for me. |
Beta Was this translation helpful? Give feedback.
After adding the import statement import
'server-only'in thelib/dictionary.tsfile, all the code in that file is now designated as server-only code and cannot be imported from a client component.If you need to access the dictionary from a client component, you should call the server-only function
getDictionaryin thelayout.tsx(server component) file and then pass its result to a provider.For example: