Sort Users table throws `searchParams` should be awaited before using its properties

Next.js
1

Following the lessons to make the Users table sortable, I am seeing the following console message: Server Error: Route "/users" used 'searchParams.sortOrder'. 'searchParams' should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at UsersPage (page.tsx:12:34)...
I’ve read the docs and it’s saying that the message is misleading, that the issue is that const UsersPage = async ({ searchParams: { sortOrder } }: Props) needs should not be unpacked here. The proposed solutions do not address the console messages. What is the correct way to address this issue?

1 Like
2

I managed to get it to work with this:

const UsersPage = async ({ searchParams }: Props) => {
  var sortOrder = (await searchParams).sortOrder
  console.log(sortOrder)

But I am not sure if this is the right approach. Would love some feedback from some experienced members.
I am using

"dependencies": {
    "fast-sort": "^3.4.1",
    "next": "15.1.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@types/node": "22.10.5",
    "@types/react": "19.0.2",
    "autoprefixer": "^10.4.20",
    "daisyui": "^4.12.23",
    "postcss": "^8.4.49",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.2"
  }

Cheers,
Dan