Hi Guys,
Unfortunately the deployment failed due to the error below. I got this error after completing chapter 11, tutorial: Learn Next.js: Adding Search and Pagination | Next.js
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: Dynamic APIs are Asynchronous | Next.js
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 (
<h1 className={
${lusitana.className} text-2xl}>Invoices<Suspense key={query + currentPage} fallback={}>
)
}
