Get URL Params (Next.js 13)

handyman_hank

I am building a Next.js 13 project with the /app directory. In the root layout, I have a permanent navbar component in which the component is imported from /components/Navbar.jsx . Inside the Navbar.jsx , I want to be able to access the slug parameter in url, for example, localhost:3000/:slug , in which I want the slug id. I have already defined a Next.js 13 page.jsx for that slug. But how do I get the slug id in the navbar component? I also...

Originally asked by Vivaan Kumar on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

There are 3 different variants of params params (/blog/1) single params multiple params searchParams (/blog?postId=123) single search params multiple search params Both params and searchParams (/blog/1?postId=123) There are multiple ways to handle this For params - useParams() 'use client' import { useParams } from 'next/navigation' export default function ExampleClientComponent() { const params = useParams() // Route -> /shop/[tag]/[item] // URL -> /shop/shoes/nike-air-max-97 // `params` -> { tag: 'shoes', item: 'nike-air-max-97' } console.log(params) return <></> } For searchParams - useSearchParams() 'use client' import { useSearchParams } from 'next/navigation' export default function...

Full answer by krishnaacharyaa: https://stackoverflow.stackexchange.com/a/76613628 (CC BY-SA 4.0).

Need it done for your business? UphillTech.