I am unsure why I am receiving different information on the client than on the server. I am using Next.js and I am trying to use the URL query but am receiving undefined on the server.

[collection].js

import { useRouter } from "next/router";
import React from 'react'
import axios from "axios"
import {withRouter} from 'next/router';

function collection({symbol,image,title}) {
  const router = useRouter()
  var collections =  router.query.collection 

  console.log(collections)
    
  const url = `api-mainnet.magiceden.dev/v2/collections/${collections}/stats`
  console.log(url)
  axios.get(url).then((data)=>console.log(data))
  
  return (
    <div></div>
  )
}

export default collection

Nft.jsx

import React from 'react'
import Link from 'next/link'

const Nft = ({image,title,collection,symbol}) => {
  return (
    <div>
      <div>
        <Link href={`/collections/${symbol}`} ><a>{title}</a></Link>
          <div className='Card'>
            <img className='nftImage'  src={image}/>
            <h5>{collection}</h5>
          </div>
        </div>
      </div>
   )
}

export default Nft

What I'm console.logging on the server

undefined
undefined

What I'm console.logging on the client

undefined
gigahub