Cara Menggunakan Axios di dalam Middleware Next.js

Kita tidak bisa menggunakan axios pada middleware di Next.js secara langsung. Sebagai contoh kode di bawah ini

try {
    const response = await axios.get(
        `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/user`,
        {
            headers: {
                Authorization: `Bearer ${accessToken}`,
            },
        }
    );

    return NextResponse.next();
} catch (error) {
    console.error(error.message);
    return NextResponse.redirect(new URL("/admin/login", request.url));
}

Jika kita mencoba menjalankan kode di atas pada middleware, maka akan muncul error "adapter is not a function"

Solusi :

Install package @vespaiach/axios-fetch-adapter menggunakan NPM, Yarn atau PNPM

npm install @vespaiach/axios-fetch-adapter

yarn add @vespaiach/axios-fetch-adapter

pnpm add @vespaiach/axios-fetch-adapter

Kemudian tambahkan adapter axios menggunakan package yang baru saja kita install tadi. Sehingga kode akan menjadi seperti ini

import fetchAdapter from "@vespaiach/axios-fetch-adapter";

try {
    const response = await axios.get(
        `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/user`,
        {
            adapter: fetchAdapter,
            headers: {
                Authorization: `Bearer ${accessToken}`,
            },
        }
    );

    return NextResponse.next();
} catch (error) {
    console.error(error.message);
    return NextResponse.redirect(new URL("/admin/login", request.url));
}