Next.js Discord

Discord Forum

Accessing query param from multiple nested server components

Answered
European anchovy posted this in #help-forum
Open in Discord
Avatar
European anchovyOP
This might be a naive question but is there a way of accessing query params (via searchParams) in server components without having to prop drill them?
Answered by Ray
something like this
// app/users/layout.tsx
export default function Layout({children, top, bottom}) {
  return (
    <>
      {top}
      {children}
      {bottom}
    </>
  )
}

// app/users/@top/default.tsx
export default function Default({ searchParams}) {}

// app/users/@bottom/default.tsx
export default function Default({ searchParams}) {}

// app/users/page.tsx
export default function Page({ searchParams }) {}
View full answer

14 Replies

Avatar
European anchovyOP
Hmm because I am planning on having several server components whose data fetching may depend on query params (which will be a date range, like start=...&from=...)
Would I have to pass that as props to every component?
they receive the page props too
so they have access to searchParams
Avatar
@Ray you could try parallel route
Avatar
European anchovyOP
hmmm interesting I will look into that 😄
Avatar
something like this
// app/users/layout.tsx
export default function Layout({children, top, bottom}) {
  return (
    <>
      {top}
      {children}
      {bottom}
    </>
  )
}

// app/users/@top/default.tsx
export default function Default({ searchParams}) {}

// app/users/@bottom/default.tsx
export default function Default({ searchParams}) {}

// app/users/page.tsx
export default function Page({ searchParams }) {}
Answer
Avatar
European anchovyOP
its not possible to have a parallel route conditionally rendered based on device width is there?
Avatar
@European anchovy its not possible to have a parallel route conditionally rendered based on device width is there?
Avatar
device width is unknown when rendering on server, you would need to render on client.
css isn't enough for you use case?
Avatar
European anchovyOP
im just brainstorming, will it a go with css 🙂