Страница Next.js работает на локальном хосте, но не на vercel

Я создаю блог для веб-сайта и только что завершил страницу результатов поиска. Когда я попробовал его на локальном хосте, он работал отлично, но когда я развернул его на верцеле, он вообще не работает. searchParams.query не определен в сети, потому что, когда я посещаю веб-страницу в Интернете, заголовок заголовка выглядит так: Searching for: undefined Вот мой код, который использует Sanity и Next 13:

import { getSearchResults } from "@/sanity/utils"
import Link from "next/link"
import { SearchBar } from "@/components"

export async function generateMetadata({ searchParams }) {
  return {
    title: `Searching for: ${searchParams.query}`
  }
}

export default async function SearchPage({ searchParams }) {
  const searchResults = await     getSearchResults(searchParams.query)

  return (
<main className = "mt-[70px] min-h-screen">
  <div className = "bg-byzantine-blue text-white py-10 px-5">
    <div className = "container mx-auto flex flex-col justify-center items-center">
      <h2 className = "text-lg md:text-xl mb-3 md:mb-5">Search results for:</h2>
      <SearchBar />
      <p className = "mt-2 text-text-blue text-lg">{searchResults.length} {searchResults.length === 1 ? 'article' : 'articles'}</p>
    </div>
  </div>
  <div className = "max-w-screen-web mx-auto py-10 px-6 md:px-10 flex flex-col gap-6 md:gap-10">
    {searchResults.map(article => (
      <Article key = {article.id} {...article} />
    ))}
  </div>
</main>
  )
}

const Article = ({ description, id, title }) => {
  return (
<article className = "border-solid border-[1px] flex flex-col items-center border-neutral-200 px-3 py-6">
  <h5 className = "text-xl font-medium text-center">{title}</h5>
  <p className = "mt-3 md:text-lg text-neutral-600 text-center max-w-4xl">{description}</p>
  <Link href = {`/blog/${id}`} className = "md:text-lg inline-block hover:bg-blue-500 mt-4 px-3 py-2 bg-byzantine-blue text-white">View article</Link>
</article>
  )
}

Это код компонента <Searchbar />:

"use client"
import React, { useState } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'

export default function SearchBar() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const search = useSearchParams().get('query')

  const [query, setQuery] = useState(search ? search : '');

  const handleSearch = () => {
    router.push(`/search?query=${query}`);
  }


  return (
    <div className='flex justify-center md:gap-4 gap-2  w-[80%] md:w-full max-w-xl mx-auto'>
      <input type = "text" placeholder='Search for articles:' className='bg-transparent py-2 border-solid border-[2px] border-blue-400 px-4 md:px-6 grow placeholder:text-text-blue outline-none text-white text-lg focus:bg-white focus:text-black focus:placeholder:text-neutral-400' value = {query} onChange = {(e) => setQuery(e.target.value)} />
      <button onClick = {handleSearch} className='bg-gold hover:bg-gold-hover px-4 md:px-6 text-lg text-white'>
    Search
  </button>
</div>
  )
}

Любая помощь приветствуется. Спасибо!