Next.jsのsearchParamsはas stringせずに必ずバリデーションしてくれ。またはvalibotのちょいテクニック

BRANK

Next.jsのsearchParamsの型問題Next.jsのsearchParamsの型は少々厄介です。searchParamsのドキュメントでは次のように型定義が記載されています。export default async function Page({ searchParams, }: { searchParams: Promise<{ [key: string]: string string[] undefined }>; }) { const filters = (await searchParams).filters; } 各パラメーターの型がstring string[] undefinedとなっていますね。これを使うときに型チェックが面倒になってsearchParams.filters as stringと書いてしまっているのをよく見ます。string[]になるのは、次のように同じパラメーターキーを複数指定したURLの場合です。/search?filters=foo&filters=bar 別の悪い例としては、そもそもsearchParamsが実際に届き得る値よりも狭い型定義をしてしまうことです。例えば次のようなコンポーネント定義です。export default async function Page({ searchParams, }: { searchParams: Promise<{ q: string; sort: "asc" "desc"; }>; }) { } sortはまるで必ず"asc"か"desc"が届くかのような型定義になっていますが、実際はサイト訪問者のURL手入力によりsortはstri…