Retrieve current locale used in field hooks

default discord avatar
<Clement/>
last month
33

Hi, I need to save the locale inside the page data. Also I created a Field "Locale" on it, and I'd like to create a hook to automaticaly set the field with the current Payload locale selected.


I started with this, and looking for the info inside "req", but I din't find it.

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    You will need to create a custom component that uses the

    useLocale

    hook to read the current locale and then set that in state. Curious, what is the use case?



    https://payloadcms.com/docs/admin/hooks#uselocale
  • default discord avatar
    <Clement/>
    last month

    Damn there is already a hook, thanks 🙂



    I was looking for a way to fill my frontend url with the locale, do you know another way to do it?



    my-domain.fr (should be FR index)


    my-domain.fr/en (EN index)



    but actually all my links are without locale

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    hmmmmm



    I feel like you could use rewrites to do this

  • default discord avatar
    <Clement/>
    last month

    domain.fr/articles/titre1


    domain.fr/artilcles/title1



    I can switch locale when I query Payload, all is working, but now my english version should have '/en' everywhere



    I could serve 2 versions with differents locales with the same url, but its weird for SEO

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    Im wondering if this could be done with path segments, i.e. /[locale]/[slug]



    if you are using file based routing

  • default discord avatar
    <Clement/>
    last month

    Im using /[lang]/[...slug] as you say, then I catch the current lang with Next.js params and use it to fetch Payload



    I use a middleware to detect the browser favorite lang to redirect to the good locale

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    yeah so you might have to serve fr from /fr/page-slug

  • default discord avatar
    <Clement/>
    last month

    my defaultLocale is "FR", then I rewrite every /fr/slug, to stay at root domain -> /slug



    when I want to turn to english version, I have add the "/en" after root domain

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    ok so whats the snag?

  • default discord avatar
    <Clement/>
    last month

    ok then I created a function to fill the <a> with relation page info



    image.png
  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    you will want to read the current [lang] var from NextJS, are you?

  • default discord avatar
    <Clement/>
    last month

    nop, its already done



    just fill all my website links with the good locale prefix

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    ok this sounds like it would work? What does not work for ya?

  • default discord avatar
    <Clement/>
    last month

    after this yes haha

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    after what? haha trying to follow

  • default discord avatar
    <Clement/>
    last month

    nothing, you just asked for the use case 🥲



    I try to explain mine haha

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    for sure, but I don't think you need the locale field in payload to make this work?

  • default discord avatar
    <Clement/>
    last month

    🤷‍♂️



    If you know another way, I listen to you 🙂

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    haha, but it sounds like you have all the pieces, without the custom locale field I feel like your setup would work!

  • default discord avatar
    <Clement/>
    last month

    yeah but how to generate urls, If I cant know what the locale's page?

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    but you do know the locale, from NextJS



    and then you just fetch data from the API, using the locale

  • default discord avatar
    <Clement/>
    last month

    ok I detect, my current locale, and add this to urls with a prefix

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    yes 100%



    only on your frontend though

  • default discord avatar
    <Clement/>
    last month

    hmm



    then sitemap can't be generated



    all urls would be with the current locale

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    how are you generating the sitemap? You could just loop over all of your locales and then create all urls

  • default discord avatar
    <Clement/>
    last month

    I can only have one sitemap for the whole site, then I have to fetch every pages, and articles



    hmmmm



    yeah I could fetch multiple times with a locales array



    I try the way you do, I think you are more senior than me 😂


    Thks 🙏

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    You could fetch 1 time, and then just loop over locale array and build up all page urls for all locales

  • default discord avatar
    <Clement/>
    last month

    Hi, I'm going to create my "local" field anyway. It's getting too complicated for me to manage only with NextJs (drill props are too important for some parts).


    I've just created my custom field, I just wanted to know, by default I only get "Option" type props in my custom field? Can't I retrieve the rest of the content (name, description, options, etc.)?





    image.png
    image.png
  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    I feel like you would use context and access the value from that? And then the only places you would need to know it are in your custom link component and your language selector?

  • default discord avatar
    <Clement/>
    last month

    Hi, unless I'm mistaken, custom fields only receive "Options", which contains a limited amount of information. I've added a second argument to retrieve the information from my field, but this creates unnecessary duplicates, which is not great. I've checked for the context, but it's normally only present in hooks?





    image.png
    image.png
  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    Oh I meant on the frontend I would use context to avoid prop drilling

  • default discord avatar
    <Clement/>
    last month

    yep, but I think context is only available on 'client component'

    :whatthehell:

    , for the moment its working well, I'll see later If I can optimize more 🙂

  • discord user avatar
    jarrod_not_jared
    Payload Team
    last month

    yeah but you can pass props from server to client components. So you would just have the server component render a component that renders the provider, taking the locale as a prop

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.