概要
Nextjs 自体は長いこと使っていた（つもり）でしたが、
初歩的なところでタイトルのエラーと遭遇し、解決をすぐにできなかったので、備忘録として残しておきます。
error - Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
問題のコード
pages/api/users/[id].js
export default async function handler(req, res) {
const method = req.method;
const { id } = req.query
switch (method){
case "GET":
res.status(200).json({ res: id})
case "POST":
res.status(200).json({ res: id})
default:
res.status(200).json({ res: id})
}
}
上のようなコードを走らせ、front 側から axios でコールすると、
error - Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
というようなエラーとなっていました。
わかる人はすぐに原因が分かりますよね、、
エラーの原因を調べると、リクエストに対してレスポンスが複数回返ってきているからだ、
ということがわかりましたが、なんで複数回返っているのかが理解できていませんでした。
解決策
初歩的なミスでしたが、breakを行なっていませんでした。。
pages/api/users/[id].js
export default async function handler(req, res) {
const method = req.method;
const { id } = req.query
switch (method){
case "GET":
res.status(200).json({ res: id})
break
case "POST":
res.status(200).json({ res: id})
break
default:
res.status(200).json({ res: id})
break
}
}
と書かないと、switch 文から抜けずに、複数のswitch 文に引っ掛かってしまうということでした。
javascript の文法を理解していなかった問題でした。
もちろん、きちんとapi 内でリクエストの場合わけができていればこのエラーは回避できるので、
以下のように書いても大丈夫です。（私は最初break を書き忘れているとわからなかったので、下のやり方で回避しました。）
pages/api/users/[id].js
export default async function handler(req, res) {
const method = req.method;
const { id } = req.query;
if(method === "GET"){
res.status(200).json({ res: id})
}
else{
res.status(200).json({ res: id})
}
}
まとめ
今回は、Nextjs のapi を実装する時の初歩的なミスによって出たエラーの備忘録を書きました。
簡単なミスではあったのですが、私は意外と気づかずに放置してしまっていたので、
もし同じエラーに出会した人の参考になれば幸いです。
みなさんも楽しいNextjs ライフを。
今回はこの辺で。