Next.js AppRouterでparams, queryを取得する

Next.js AppRouterでparams, queryを取得する

TL;DR

Page Props経由で、paramsと同様に取得する。
Migration Guideにsampleがあるのでそれを利用する。

0. 環境

name	version
nextjs	15.0
scaffdog	4.1

1. 取得方法

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

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

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を利用する

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を利用して型情報を記載する

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

2.scaffdogで1-3を記載する

scaffdogで記載すると以下のようになる。(src directoryを想定しています。)

npm run gen:page

? Please select the output destination directory.
src/app
? Please enter name of page sample
? do you need css? No

🐶 Generated 1 file! (1 skipped)

     ✔ src/app/sample/page.tsx
     ⚠ src/app/sample/sample.module.css (skipped)

3. PlayWrightのファイル生成もscaffdogに任せる

playwrightの導入はここに記載ください。

想定しているDirectory構成は以下です。

next-project
|- src/app
|- e2e