Next.js 获取 URL Search Params 查询参数

Server Component

使用Next.js内置的searchParams，类型为Promise。

export default async function Home({searchParams}: {
    searchParams: Promise<{
        page: string,
    }>
}) {
    return <></>
}

Client Component

使用Next.js内置的useSearchParams函数。

'use client'
 
import { useSearchParams } from 'next/navigation'
 
export default function SearchBar() {
  const searchParams = useSearchParams()
 
  const search = searchParams.get('search')
 
  // URL -> `/dashboard?search=my-project`
  // `search` -> 'my-project'
  return <>Search: {search}</>
}

官方文档

https://nextjs.org/docs/app/getting-started/layouts-and-pages#rendering-with-search-params

https://nextjs.org/docs/app/api-reference/functions/use-search-params