Next.js Discord

Discord Forum

Internationalization in client components (app directory)

Unanswered
Weevil parasitoid posted this in #help-forum
Open in Discord
Weevil parasitoidOP
this question already posted by @Bracco Italiano
but this don't solved
please help me

https://nextjs-forum.com/post/1150715875595386971

33 Replies

Aleutian Tern
What's your issue ? The solutions proposed on the thread your linked seems to be sensible
Weevil parasitoidOP
thanks for your reply
so what is solution?
you mean this?
Aleutian Tern
Well, could be. But here he needs a way to separate public and private fields on the dictionary. You could simply pass the dictionary to the client component as props from a RSC.
import { type Locale } from './types'
import { Form } from './client'

async function Page({ params }: { params: { lang: Locale } }) {
  const dictionary = await getDictionary(params.lang)

  return (
    <Form
      strings={dictionary.Form}
    />
  )
}
Weevil parasitoidOP
thanks
let me check
Weevil parasitoidOP
working well
Do I have to receive it as a prop every time and process it?
Weevil parasitoidOP
"Form" Component can't define type with Locale
because Locale is server only
like this
import 'server-only'

export type Locale = keyof typeof dictionaries

const dictionaries = {
  en: () => import('./dictionaries/en.json').then((module) => module.default),
  es: () => import('./dictionaries/es.json').then((module) => module.default),
}
 
export const getDictionary = async (locale: Locale) => dictionaries[locale]()

what is your solution?
Aleutian Tern
Do you mean to get the literal types of the dictionary ? like "email: "myemail@example.com" instead of string ?
Weevil parasitoidOP
I wanna use type like server component in client component
like this
but client compoent can't use over type because it is server only
make sense?
Aleutian Tern
Doesn't make sense to me, you are trying to access the params props on a client component ?
Weevil parasitoidOP
correct
Aleutian Tern
You simply can't
params is a RSC only prop.
Weevil parasitoidOP
umm so we can't use type in client component like server component?
Aleutian Tern
You can use types, you only cannot access RSC only props.
Weevil parasitoidOP
so I have to make new types for client component?
or other solution?
@Weevil parasitoid so I have to make new types for client component?
DirtyCajunRice | AppDir
just move your type to a generic file….
and statically type it
you statically typed the dictionaries…
Weevil parasitoidOP
greate
Could you know me with code to my easy understand?
DirtyCajunRice | AppDir
…?
export type Locale = "en" | "es";
Weevil parasitoidOP
aha got it
thanks
👍