Pass props from page to components in Nextjs

Question

I want to pass my props from a page to all other components. I have a dynamic route set up like this.

-pages
  -[tv]
  -index.js
   -category
   -index.js
   ...

So the rout looks like this: pages/[tv]/category/...

My index.js, child of folder [tv], page code.

const Home = props => {
  const router = useRouter()
  const { tv } = router.query
  console.log(tv) //Value that i want to pass as props to other components.

So i want to pass value of tv to other components as props. Hope my question is not too vague.

Thank you

Solution

If those components are rendered in Home component, you can just pass tv as prop:

const SomeComponent = props => {
  const { query } = useRouter()
  const { tv } = query
  // ...
}

const Home = props => {
  // ...

  return (
    <SomeComponent />
  )
};

If you don't want prop drilling then you can just use the useRouter hook.