Cannot destruct params prop in server component
Answered
Yellow and black potter wasp posted this in #help-forum
Yellow and black potter waspOP
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: "{locale}"</div>
<Link className="header__lang-link header__lang-link--active " href="/nl">
NL
</Link>
|{' '}
<Link className="header__lang-link" href="/en">
EN
</Link>
</div>
)
}Answered by Yellow and black potter wasp
yeah apparently locale was only avaible in the root page/layout component
5 Replies
Yellow and black potter waspOP
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'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@Yellow and black potter wasp jsx
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: "{locale}"</div>
<Link className="header__lang-link header__lang-link--active " href="/nl">
NL
</Link>
|{' '}
<Link className="header__lang-link" href="/en">
EN
</Link>
</div>
)
}
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@Yellow and black potter wasp solved?
Yellow and black potter waspOP
yeah apparently locale was only avaible in the root page/layout component
Answer