Menu
I want to access the search params in a Component or in Layout File to get the lang. There is an way to do that? I Read that is impossible to get the searchparams in Layout File, but there is any other way in Next.JS 13? Or other way to get the lang inside the component?
export default function DashboardLayout({ children }: DashboardProps) {
return (
<html>
<body>
<div className="w-full h-full flex absolute bg-slate-100">
<div className="flex flex-col">
<div className="bg-sky-800 w-[20rem] h-12 flex items-center justify-center">
<img src="/bigLogo.svg" className="w-28 h-12" title="ProPay" alt="ProPay" />
</div>
<div className="bg-white h-full shadow-md">
<DashboardMenu />
</div>
</div>
<div className="flex flex-col w-full">
<div className="bg-sky-700 flex justify-between items-center h-12 pr-5">
<p className="ml-5 text-lg text-white">Câmara Municipal de Tondela</p>
<SelectLang />
</div>
<div className="p-3">
{children}
</div>
</div>
</div>
</body>
</html>
)
};
.
export default function DashboardMenu(){
const lang: DashboardLangsTypes = getLang("en", "dashboard"); // i want the lang here
return (
...
494
asked Jan 28 '26 15:01
This is not documented but the Layout component actually receives 2 properties children and params, so you can simply read the params property
interface DashboardProps {
children: React.ReactNode;
params: { id: string }
}
export default function DashboardLayout({ children, params }: DashboardProps) {
console.log(params.id)
...
}
According to the documentation
Layouts are Server Components by default but can be set to a Client Component.
So it's technically possible to read the params using the Client Component hook useParams. I would not recommend using it as you will need to transform your Layout Component into a Client Component (with the use client directive).
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
