[Next.js] APIのRequestとResponseの型を調べてみた

概要

Next.jsでフォームからデータを受けった利する際にAPIでリクエスト（req）とレスポンス（res）の型をTypeScriptではどんな型なのか調べてみた。

変更前のコード

JavaScriptで記載する場合は特に型指定とかないので下記のように書く。

api/test.js

const testApi = async (req, res) => {
  try {
   
    return res.status(200).json({ message:"成功" });
  } catch (error) {
    return res.status(400).json({ message:"失敗" });

  }
};

export default testApi;

公式サイトを見てみる

公式サイトに載ってました。
https://nextjs.org/docs/basic-features/typescript#api-routes

公式サイトを見ると下記のように記載されています。

import type { NextApiRequest, NextApiResponse } from 'next'

export default (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ name: 'John Doe' })
}

nextのモジュールからimportでNExtApiRequestとNextApiResponseが読み込まれてます。
またimportの後にtypeが指定されてますが、こうすると型だけインポートできるみたいですね。

まとめ

結果的には以下のように書き直した。

api/test.js

import type { NextApiRequest,NextApiResponse } from "next"

const testApi = async (req:NextApiRequest, res:NextApiResponse) => {
  try {
    return res.status(200).json({ message:"成功" });
  } catch (error) {
    return res.status(400).json({ message:"失敗" });
  }
};

export default testApi;

とまぁ完全に自分のメモ。