Cannot destruct params prop in server component

[trim ginkgo]

import React from 'react'
import Link from 'next/link'
import { TypedLocale } from 'payload'

export default async function LocaleChanger({
  params,
}: {
  props: undefined
  params: Promise<{
    locale: TypedLocale
  }>
}) {
  const { locale } = await params

  return (
    <div className="header__top-menu-language-toggle">
      <div>test: &#34;{locale}&#34;</div>
      <Link className="header__lang-link header__lang-link--active " href="/nl">
        NL
      </Link>
      |{' '}
      <Link className="header__lang-link" href="/en">
        EN
      </Link>
    </div>
  )
}

[runic canyon]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[trim ginkgo]

im new to nextjs and react (im an experienced vue and nextjs dev)
I've been trying to figure out why this doesn't work, I cant find anything after googling, reading docs and trying chatgpt

I use this library: next-i18n-router

[woeful pebble]

only the page.tsx and the layout.tsx and maybe some other system files are receiving the params. Your component, does not receive it by default. So you need to pass the props yourself to your component

[woeful pebble]

@trim ginkgo solved?

[trim ginkgo]

yeah apparently locale was only avaible in the root page/layout component