Next.js · Junior · Question 51 of 75

How does a client component read the [slug] segment of the current URL?

'use client'
import { useParams } from 'next/navigation'

export function ShareButton() {
  const { slug } = useParams<{ slug: string }>()
}

Explanation

Pages and layouts get params as a prop (a Promise in Next.js 16), while deeply nested client components can call useParams() instead of receiving params through props.

Further reading

Problem with a question

Next.js · Junior · question 51

Test yourself

Take the Next.js · Junior quiz: questions and options are shuffled, and you get a review of your mistakes at the end.

Take this quiz