反映 - 検索画面をFormで作成し直し、RouteHandler経由でリダイレクトをし検索内容を結果画面へ送信する

[OKAUEND]

Issue / Ticket

作業カテゴリー

Trello - 機能 - 配信者の名前や配信日の降順昇順、配信年でフィルタリングをし、簡易検索機能を実現する

69

作業チケット

検索ページをFormで囲い、Linkのラジオボタンに変更する Formの検索ボタンを配置し、ボタンを押すとRoute Handlerでクエリをキャッチする Route Handlerでキャッチしたクエリを元に、検索結果画面へのリンクを生成し、リダイレクトする 検索ページのカテゴリー毎のリンクにデザインをつける

課題/何が起こったか

コードレビューで検索画面はHTMLのFormを使用したほうがよいと指摘を頂いた。 ReactやJSを使い機能を実現しており、HTMLのルール通りに作っていなかった。

仮説/どうしてそうなったのか

ReactやJSの機能で画面遷移をすることで検索機能としていたため、Formを使用するという発想がなかった Formを使う事で、検索機能をHTMLのルールに沿った構成へ変更することで、アクセシビリティなどへ対応

どういう作業を行ったか

next/linkで実装していたページ遷移を削除し、FormのSubmit機能を使いRoute Handlerへ検索内容を送信する Route Handlerで取得した検索内容を元に、結果画面URLへ生成する。 生成する時に、デフォ値はパスへ表示させないようにするため、除外して生成をする。 生成した値を元に結果画面へリダイレクトでアクセスをし、結果画面へURLを経由して検索内容を送信する。

Next Point

• カテゴリー検索でORやAND検索ができるように、ラジオボタンからチェックボックスへ変更をすべき
• デフォ値はnoneか0000にしてあるが、別の方法があるのではないか
• 検索ボタンのスタイリングをする

変更画面のサンプル

変更前

変更後

遷移時の動作

参考資料

• Next.js Form Route Handler ※Pages Routerではあるが、理論はApp Routerでも同じ
• From MDN
• Next.js Route Handler redirect
• Next.js NextRequest