Nextjs - access url params on server side

Question

I am using the official with-apollo example to create a nextjs frontend. I am trying to use the user's slug, which can be found in the url string to render the user profile. However, I am not able to use the url parameter (the slug) as a variable in the graphql query.

The Link to the user profile

<Link href={{ pathname: "/users/[slug]", query: { slug: user.slug } }}>

The user profile component

import { gql, useQuery } from "@apollo/client"
import ErrorMessage from "./ErrorMessage"
import { useRouter } from "next/router";

export const USER_QUERY = gql`
  query getUser($slug: String!) {
    user(slug: $slug) {
      id
      email
    }
  }
`

// I can not get this to work using url parameters
export const userQueryVars = {
  slug: "userSlug", // This should be a url parameter!!
}

export default function UserProfile() {
    const router = useRouter()
    const userSlug = router.query.slug

  const { loading, error, data } = useQuery(USER_QUERY, {
    variables: {slug: userSlug},
  })

  if (error) return <ErrorMessage message="Error loading users." />
  if (loading) return <div>Loading</div>
  if (!data) return <div>No data</div>

  const { user } = data

  return (
    <section>
      <div>
        <h3>
          {user.firstName} {user.lastName}
        </h3>
        <p>{user.email}</p>
      </div>
    </section>
  )
}

The user profile page

import App from "../../../components/App"
import Header from "../../../components/Header"
import UserProfile, {
  USER_QUERY,
  userQueryVars,
} from "../../../components/UserProfile"
import { initializeApollo, addApolloState } from "../../../lib/apolloClient"

const UserProfilePage = () => (
  <App>
    <Header />
    <UserProfile />
  </App>
)

export async function getServerSideProps() {
  const apolloClient = initializeApollo()

  await apolloClient.query({
    query: USER_QUERY,
    variables: userQueryVars, // This is passed from the component!
  })

  return addApolloState(apolloClient, {
    props: {}
  })
}

export default UserProfilePage

What I have tried so far (among a lot of other things):

Using router:

export const userQueryVars = { slug: router.query.slug, }

Error: You should only use "next/router" inside the client side of your app.

Using router and checking that is it called on client side:

if (process.browser) { export const userQueryVars = { slug: router.query.slug, } }

Error: 'import' and 'export' may only appear at the top level.

I would be very thankful for any kind of help!!

If your question has been answered, please make sure to accept an answer for further references. — Danila
– Danila, Commented Jul 25, 2021 at 18:08

Danila · Accepted Answer · 2023-07-28 08:01:05Z

13

When using getServerSideProps you can find your slug (and all other dynamic params if you have them) inside context.params:

export async function getServerSideProps(context) {
  const  { slug } = context.params;

  // Do whatever you need with `slug`
  // ...
}

If you use TypeScript you can follow this example from the docs to add types:

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
 
type Repo = {
  name: string
  stargazers_count: number
}
 
export const getServerSideProps: GetServerSideProps<{
  repo: Repo
}> = async () => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  return { props: { repo } }
}
 
export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return repo.stargazers_count
}

edited Jul 28, 2023 at 8:01

answered Jul 25, 2021 at 13:20

Danila

19k2 gold badges57 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kampfkuchen Over a year ago

Cannot thank you enough!! Exactly what I was searching for!

Darren Zou Over a year ago

what is the type of context?? I am so frustrated, nowhere can I find the type of context.

Danila Over a year ago

nextjs.org/docs/basic-features/…

Code on the Rocks · Accepted Answer · 2024-05-22 14:56:51Z

8

App Router Solution

In the new NextJS App Router, you can access the query parameters by adding the params and searchParams props to your page.tsx file:

export default function page({
  params,
  searchParams,
}: {
  params: { slug: string }
  searchParams: { [key: string]: string | string[] | undefined }
}) {
}

Then you can read the searchParams directly. Source.

answered May 22, 2024 at 14:56

Code on the Rocks

18.8k6 gold badges81 silver badges99 bronze badges

Comments

Suyash Lawand · Accepted Answer · 2023-07-16 10:49:15Z

4

You can access search params on the server side by:

export function GET(request) {
    request.nextUrl.searchParams.get('search-key')
}

edited Jul 16, 2023 at 10:49

answered Jul 16, 2023 at 10:37

Suyash Lawand

731 silver badge3 bronze badges

3 Comments

grantmx Over a year ago

That is not the ask. the ask is to get the URL params from the current URL in the browser window not the URL parameters from the URL passed to a route hander

Vedant Agarwala Over a year ago

Answer doesn't answer OP's question. But helped me coming from google. Upvoted!

Vedant Agarwala Over a year ago

Also, for ts, be sure to use request: NextRequest instead of Request

Collectives™ on Stack Overflow

Nextjs - access url params on server side

3 Answers 3

3 Comments

App Router Solution

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

App Router Solution

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related