⏭️

nextjsのPageProps<''>について

に公開
Next.js
tech

PagePropsはuseful

nextjsのpageを作るときに、

export default function Page({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}) {
  return <h1>My Page</h1>
}

こう書いていませんか。でもちょっとpropsの型定義が煩雑すぎますよね。そうですよね。(圧)。

export default async function Page(props: PageProps<'/blog/[slug]'>) {
  const { slug } = await props.params
  const query = await props.searchParams
  return <h1>Blog Post: {slug}</h1>
}

そこでPageProps<>が登場します。ほら。大変綺麗になりました。しかも間違いがない。
使い方は簡単。app/の先のルートを入れるだけ。スッキリ。

みなさん、このPageProps<>使いたい。そうですよね。(圧)。これ、実は最近のnextのアップデートで追加されたものなんです。

なので、nextjs@15.5以上を入れないといけません。ここに引っかかったので時間を使いました。以上。オーバー。

https://nextjs.org/docs/app/api-reference/file-conventions/page#page-props-helper

https://blog.to-ko-s.com/nextjs-15-5/

p.s. PagePropsは死んだとか、@types/nextを入れれば良いとかっていうことじゃないゾ。

Discussion