searchParams.query error in Learn Next.js project

Feedback
1

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={}>






)
}

2

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. 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.

You can find more info at the link provided in the error message: Dynamic APIs are Asynchronous | Next.js

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.

3

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: GitHub - dwa-github/nextjs-dashboard

Greetings

5

Thanks for your patience with this. 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

6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.