Nextjsのmiddlewareを使った検索処理の簡易デモ～Airbnbのような検索Term処理～

こんにちわ。nap5です。

Nextjsのmiddlewareを使った検索処理の簡易デモの紹介をしたいと思います。

Airbnb | バケーションレンタル、ログハウス、ビーチハウスなど

検索結果ページを別に設けるのがリダイレクトぐるぐるしない工夫の一つとしてあります。

middlewareではaxiosはこけるので、バニラのFetchを使います。

fetch() - Web API | MDN

デモコードです。

blazing-pond-j2o3y2

デモサイトです。

Hello world!

簡単ですが、以上です。