[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live)

[Feedback](/c/feedback/8)

# searchParams.query error in Learn Next.js project

213 views · 0 likes · 4 posts


Dwa Github (@dwa-github) · 2024-10-18

Hi Guys,

Unfortunately the deployment failed due to the error below. I got this error after completing chapter 11, tutorial: https://nextjs.org/learn/dashboard-app/adding-search-and-pagination

Can someone please help me with this error? THANKS!

Vercel:
Type error: Type '{ searchParams?: { query?: string | undefined; page?: string | undefined; } | undefined; }' does not satisfy the constraint 'PageProps'.

MS Code:
 In route /dashboard/invoices a searchParam property was accessed directly with `searchParams.query`. `searchParams` should be awaited before accessing properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis



Source:
`import Pagination from "@/app/ui/invoices/pagination"
import Search from "@/app/ui/search"
import Table from "@/app/ui/invoices/table"
import { CreateInvoice } from "@/app/ui/invoices/buttons"
import { lusitana } from "@/app/ui/fonts"
import { InvoicesTableSkeleton } from "@/app/ui/skeletons"
import { Suspense } from "react"
import { fetchInvoicesPages } from "@/app/lib/data"

export default async function Page({
  searchParams,
}: {
  searchParams?: {
    query?: string
    page?: string
  }
}) {
  const query = searchParams?.query || ""
  const currentPage = Number(searchParams?.page) || 1

  const totalPages = await fetchInvoicesPages(query)

  return (
    <div className="w-full">
      <div className="flex w-full items-center justify-between">
        <h1 className={`${lusitana.className} text-2xl`}>Invoices</h1>
      </div>
      <div className="mt-4 flex items-center justify-between gap-2 md:mt-8">
        <Search placeholder="Search invoices..." />
        <CreateInvoice />
      </div>
      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
        <Table query={query} currentPage={currentPage} />
      </Suspense>
      <div className="mt-5 flex w-full justify-center">
        <Pagination totalPages={totalPages} />
      </div>
    </div>
  )
}


Amy Egan (@amyegan) · 2024-10-18

Hello and welcome to the community, @dwa-github! Based on the error and the code you shared, I'm guessing this project uses [Next.js 15](https://nextjs.org/blog/next-15-rc2). Instead, I recommend using the latest version of Next.js 14 for that learning course. 

The `searchParams` prop API is asynchronous. If you do want to use version 15 then [the `next-async-request-api` codemod should help](https://nextjs.org/docs/messages/sync-dynamic-apis#possible-ways-to-fix-it). 

You can find more info at the link provided in the error message: https://nextjs.org/docs/messages/sync-dynamic-apis

Please let me know if you still can't get it working. If you can share your public repo, I can work with you to debug this error.


Dwa Github (@dwa-github) · 2024-10-19

Hello Amyegan

Thank you very very much for your response !

You are right: "Next.js 15.0.0-canary.195"

Downgrading to Next.js 14 may cause me a lot of dependency conflict.

I would really appreciate it if you could fix the error for me so I can continue with the tutorial!

Public repo: https://github.com/dwa-github/nextjs-dashboard

Greetings


Amy Egan (@amyegan) · 2024-10-22

Thanks for your patience with this. [Next 15](https://nextjs.org/blog/next-15) is officially stable, and an updated version of the Learn Next.js course was published! :smile: 

Please try with the updated code and let me know if you still have any trouble with it