Next.js AppRouterを利用して、searchparamsを取得する

0. 環境

name	version
nextjs	15.0

1. 取得方法

upgrading/version-15に記載があった。

1-1. pageレベルで、asyncを利用。

app/index.tsx

type Params = Promise<{ slug: string }>
type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>

const RootPage = async ({ params, searchParams }:{ props: Params, searchParams: SearchParams }) => {
    const p = await params
    const q = await searchParams
    return (
        <div>
            <div>{ JSON.stringify(p) }</div>
            <div>{ JSON.stringify(q) }</div>
        </div>
    )
}

export default RootPage

1-2. useを利用する

app/index.tsx

import { use } from "react"

type Params = Promise<{ slug: string }>
type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>

const RootPage = (props: { props: Params, searchParams: SearchParams }) => {
    const p = use(props.params)
    const q = use(props.searachParams)
    return (
        <div>
            <div>{ JSON.stringify(p) }</div>
            <div>{ JSON.stringify(q) }</div>
        </div>
    )
}

export default RootPage

1-3. FCを利用して型情報を記載する

app/index.tsx

import { type FC } from "react"

type RootPageProps {
    params: Promise<{ [key: string]: string }>
    searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}

const RootPage = async ({ params, searchParams }:{ props: Params, searchParams: SearchParams }) => {
    const p = await params
    const q = await searchParams
    return (
        <div>
            <div>{ JSON.stringify(p) }</div>
            <div>{ JSON.stringify(q) }</div>
        </div>
    )
}

export default RootPage