Next.js page working on localhost but not on vercel

Question

I'm building the blog for a website, and I just completed the search results page. When I tried it on localhost, it worked perfectly but when I deployed it to vercel it doesn't work at all. The searchParams.query is undefined online, because when I visit the webpage online the head title is: Searching for: undefined Here is my code which uses Sanity and 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>
  )
}

This is the code for the <Searchbar /> component:

"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>
  )
}

Any help is appreciated. Thanks!

Answer 1

After hours of trying to find a solution, I came up with this:

export const dynamic = 'force-dynamic'

Just added this to the page.js and I was good to go