🚰

next.jsでAPI resolved without sending a response...のエラーが出るとき

2021/02/27に公開

JavaScript

Next.js

TypeScript

tech

next.jsで時折下記のようなエラーが出ることがある

API resolved without sending a response for /api/hello, 
this may result in stalled requests.

これは主にres.end()を忘れたりres.json()を使わず、レスポンスの終了処理をしてないときに起きる

export default async (req, res) => {
  const { status } = await axios.get("https://example.com")
  res.status(status)
  // res.status(status).end() とすべき
}

上記の例の場合、警告が出るだけでなくCloud Runなどの場合は不必要に料金が発生するので注意しなければならない。

Middlewareの書き方で起きるケース

これは例えばmiddlewareの書き方で起きることもある。
例えば下記のような書き方をした場合に起きる

const exampleMiddleware = (handler: NextApiHandler) => {
  return (req, res) => {
    console.log("this is example middleware!")
    handler(req, res)
  }
}

async function someHandler(req, res) {
  const { status } = await axios.get("https://example.com")

  res.status(status).end()
}

export default exampleMiddleware(someHandler)

一見.end()もしているのが、exampleMiddlewareに問題がある。

解決法

returnでhandlerを返してあげる。

const exampleMiddleware = (handler: NextApiHandler) => {
  return (req, res) => {
    console.log("this is example middleware!")
    //  handler(req, res) <- これだと警告が出る
    return handler(req, res)
  }
}

またはasync/awaitの形式で記述する

const exampleMiddleware = (handler: NextApiHandler) => {
  return async (req, res) => {
    console.log("this is example middleware!")
    await handler(req, res)
  }
}

参考:

Middlewareの書き方で起きるケース

解決法

Discussion