title: Nextjs - access url params on server side
body: <p>I am using the official <a href="https://github.com/vercel/next.js/tree/canary/examples/with-apollo" rel="nofollow noreferrer">with-apollo</a> 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.<br><br>
  <strong>The Link to the user profile</strong></p>
  <pre><code>&lt;Link href={{ pathname: &quot;/users/[slug]&quot;, query: { slug: user.slug } }}&gt;
  </code></pre>
  <p><strong>The user profile component</strong></p>
  <pre><code>import { gql, useQuery } from &quot;@apollo/client&quot;
  import ErrorMessage from &quot;./ErrorMessage&quot;
  import { useRouter } from &quot;next/router&quot;;
  
  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: &quot;userSlug&quot;, // 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 &lt;ErrorMessage message=&quot;Error loading users.&quot; /&gt;
    if (loading) return &lt;div&gt;Loading&lt;/div&gt;
    if (!data) return &lt;div&gt;No data&lt;/div&gt;
  
    const { user } = data
  
    return (
      &lt;section&gt;
        &lt;div&gt;
          &lt;h3&gt;
            {user.firstName} {user.lastName}
          &lt;/h3&gt;
          &lt;p&gt;{user.email}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    )
  }
  </code></pre>
  <p><strong>The user profile page</strong></p>
  <pre><code>import App from &quot;../../../components/App&quot;
  import Header from &quot;../../../components/Header&quot;
  import UserProfile, {
    USER_QUERY,
    userQueryVars,
  } from &quot;../../../components/UserProfile&quot;
  import { initializeApollo, addApolloState } from &quot;../../../lib/apolloClient&quot;
  
  const UserProfilePage = () =&gt; (
    &lt;App&gt;
      &lt;Header /&gt;
      &lt;UserProfile /&gt;
    &lt;/App&gt;
  )
  
  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
  </code></pre>
  <hr>
  <p><strong>What I have tried so far (among a lot of other things):</strong><br></p>
  <ol>
  <li><p>Using router:</p>
  <p>export const userQueryVars = {
  slug: router.query.slug,
  }</p>
  </li>
  </ol>
  <p>Error: You should only use &quot;next/router&quot; inside the client side of your app.</p>
  <ol start="2">
  <li><p>Using router and checking that is it called on client side:</p>
  <p>if (process.browser) {
  export const userQueryVars = {
  slug: router.query.slug,
  }
  }</p>
  </li>
  </ol>
  <p>Error: 'import' and 'export' may only appear at the top level.</p>
  <p>I would be very thankful for any kind of help!!</p>