概要

日本語を含むというところがポイントですが、それ以前に文字列をそのまま連結してURLを作っていたという問題点もありました。

このようなシチュエーションで、APIをたたいた時、

となって少し詰まったので記事として残します。

過去同じようなことがあった気がしたので試しに英単語で検索したら本番でもローカルでも動いていたので、今回はエンコードか…とすぐ気づくことができました。

解決方法

検索キーワードの部分に渡す文字列をURLSearchParamsで処理してから渡すだけです。
そもそもそのまま文字列連結して渡すのは危なかったですね。

const q = '日本語のキーワード' // Inputなどから得た検索キーワード
fetch(`/api/search?q=${q}`)

const q = '日本語のキーワード' // Inputなどから得た検索キーワード
const params = new URLSearchParams()
params.append('q', q)
fetch(`/api/search?${params.toString()}`)

気を付けましょう。