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