✏️
Nextjs 13 appDir middleware で http(axios)が使えない
Uncaught (in promise) Error: Error: Adapter 'http' is not available in the build
NextjsのappDirのmiddlewareでaxiosをつかってGETリクエストを行おうとしたところ、上記のエラーが発生
結論
NextjsのappDir使用時、middlewareで非同期通信を行うには、fetchメソッドしか使えない。
状況
以下のバージョンでNextjsのアプリケーションを開発中、認証状態によるリダイレクト処理を行おうと、middlewareをつかって実装していた。
"next": "13.3.1",
"axios": "^1.4.0"
コードは以下のような感じにしていた
middleware.ts
export async function middleware(request: NextRequest) {
if (request.cookies.has('token')) {
const { data } = await axios.get<any>(
`${process.env.NEXT_PUBLIC_API_URL}/idtoken`,
{
headers: {
Cookie: `token=${request.cookies.get('token')?.value}`,
},
withCredentials: true,
}
);
// リダイレクト処理
}
// 省略
}
エラー発生
Uncaught (in promise) Error: Error: Adapter 'http' is not available in the build
どうにも service workerではaxiosの標準リクエストが使えないらしい、、、
fetchAdapterを使う方法も見つかったが、エラーは解消されなかった。
解決策
結論の通り、appDierのmiddlewareではfetchでリクエストをする必要があるみたい。
コードは以下のように修正した。
middleware.ts
export async function middleware(request: NextRequest) {
if (request.cookies.has('token')) {
const data = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/idtoken`,
{
credentials: "include",
headers: {
Cookie: `token=${request.cookies.get('token')?.value}`,
},
}
);
// リダイレクト処理
}
// 省略
}
リファレンス
Discussion