Next.js での検索パラメータの管理 - nuqs を使用する

Next.jsは、特にバージョン13、14、15で導入されたApp Routerや関連機能により、Reactアプリケーションでの検索パラメータの管理に強力なツールです。しかし、複雑な検索パラメータの処理はまだトリッキーです。これが、nuqsというNext.js用の型安全な検索パラメータステートマネージャーライブラリが登場する背景です。nuqsは、URLパラメータの処理のためのボイラープレートコードを削減することでステート管理を簡素化し、宣言的APIによってコードの読みやすさを向上させ、効率的なパースと更新によりパフォーマンスを向上させ、型安全性とZodなどの人気ツールとの統合により開発者の体験を向上させます。nuqsを使用するには、create-next-app@latestを使用して新しいNext.jsアプリを初期化し、コマンドnpm install nuqs@latestまたはyarn add nuqsを使用してnuqsをインストールします。次に、ルートレイアウトファイルでNuqsAdapterコンポーネントで{children}をラップします。これにより、入力するたびに検索パラメータが設定および更新されます。ただし、nuqsは自動的にサーバーコンポーネントを再描画しません。これに対処するには、useQueryStateフックでshallowオプションをfalseに設定します。nuqsはまた、URL内の複数の関連するクエリパラメータを処理するためにuseQueryStatesフックを提供します。これにより、1つのフィルタの変更が不要な再描画や不整合をトリガーせずに、バッチ更新をサポートしてパフォーマンスを向上させます。