【情報求む】next12のmiddlewareでTypeError adapter is not functionが出た場合の対処法

結論

_middleware.ts内部でaxiosを使おうとするとTypeError adapter is not functionが出る。
@vespaiach/axios-fetch-adapterを追加して、axiosのインスタンス生成時にfetchAdapterを使えるようにしてあげれば使える。
https://nextjs.org/docs/advanced-features/middleware
https://www.npmjs.com/package/@vespaiach/axios-fetch-adapter

ミドルウェアとAxiosインスタンス

_middleware.ts

import {NextFetchEvent, NextRequest, NextResponse} from "next/server";
import fetchAdapter from "@vespaiach/axios-fetch-adapter";
import {apiServer} from "../../utils/apiServer";

export default async function middleware(req: NextRequest, ev: NextFetchEvent) {
    apiServer.defaults.adapter = fetchAdapter
    const {data} = await apiServer.get('auth/me')
    if (!data.authenticated) {
        return NextResponse.redirect('http://localhost:3000/auth/login')
    }
    return NextResponse.next()
}

apiServer.ts

import axios from "axios";

export const apiServer = axios.create({
    baseURL: process.env.API_ENDPOINT,
    responseType: 'json',
    withCredentials: true,
    headers: {
        "Content-Type": "application/json",
    }
})

よくわからん点

• _middleware.tsの処理がサーバーサイドで実行されてるがこれが普通なのか
• fetchAdapterが必要な条件はなんなのか？
  • サーバーサイドだからなのかと思ったが、getServerSidePropsの時とかはアダプターいじらなくても普通に動いた
  • Service Worker上ではAxiosの標準のリクエストが使えない云々の記述は見たが、nextjsのSWについてよくわかってない

リファレンス

https://stackoverflow.com/questions/70992541/next-js-v12-middleware-does-not-work-with-node-fetch-and-axios
https://stackoverflow.com/questions/66305856/typeerror-adapter-is-not-a-function-error-when-using-axios-and-webpack-in-chrom