Accessing search Params from Layout or Component File in Next.JS 13

Question

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 (
...

score 0 · Answer 1 · answered Mar 27 '23 at 22:56

0

you can use router to get the lang as parameter and then pass it down as props to your components

  const router = useRouter();
  const lang = router.query.lang;

to import it :

import { useRouter } from "next/router";

in your case :

import { useRouter } from "next/router";

export default function DashboardLayout({ children }: DashboardProps) {
  const router = useRouter();
  const lang = router.query.lang;

  return (
    ....
  );
}

answered Mar 27 '23 at 22:56

Charfeddine Mohamed Ali

943
2
14

Hi, thanks for try to help. I receive this error, but i don't want to render this at client. ReactServerComponentsError: You have a Server Component that imports next/router. Use next/navigation instead. Maybe one of these should be marked as a client entry "use client": ./src\app\dashboard\layout.tsx The next/navigation don't have useRouter() query – Tomás Mar 27 '23 at 23:02
okay let me get this clear you want to pass the lang from DashboardLayout to DashboardMenu component ? – Charfeddine Mohamed Ali Mar 27 '23 at 23:04
The lang is in the url, if I can get it from the Layout or directly from the component, whatever. Because I easily send the layout data to the component. I just want to access data in the url. – Tomás Mar 27 '23 at 23:06
i will add another answer so it is more clear – Charfeddine Mohamed Ali Mar 27 '23 at 23:13

score 0 · Answer 2 · answered Apr 14 '23 at 21:20

Helo, if you gonna use a client side component then you can use useSearchParams Hook available in the version 13..

Here is the beta documentation link

'use client';

export default function ExampleClientComponent() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams()!;

  // Get a new searchParams string by merging the current
  // searchParams with a provided key/value pair
  const createQueryString = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(searchParams);
      params.set(name, value);

      return params.toString();
    },
    [searchParams],
  );

  return (
    <>
      <p>Sort By</p>

      {/* using useRouter */}
      <button
        onClick={() => {
          // <pathname>?sort=asc
          router.push(pathname + '?' + createQueryString('sort', 'asc'));
        }}
      >
        ASC
      </button>

      {/* using <Link> */}
      <Link
        href={
          // <pathname>?sort=desc
          pathname + '?' + createQueryString('sort', 'desc')
        }
      >
        DESC
      </Link>
    </>
  );
}

Happy coding

Accessing search Params from Layout or Component File in Next.JS 13

2 Answers2