【情報求む】next12のmiddlewareでTypeError adapter is not functionが出た場合の対処法
6285 ワード
結論
_middleware.ts内部でaxiosを使おうとするとTypeError adapter is not function
が出る。
@vespaiach/axios-fetch-adapterを追加して、axiosのインスタンス生成時にfetchAdapterを使えるようにしてあげれば使える。
ミドルウェアと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についてよくわかってない
リファレンス
Author And Source
この問題について(【情報求む】next12のmiddlewareでTypeError adapter is not functionが出た場合の対処法), 我々は、より多くの情報をここで見つけました https://zenn.dev/nicopin/articles/5dc87c27bd08de著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol