I tried using middleware. As a result, when I attempted to retrieve the token from await cookies() in async pages, I received the token value from the previous page load.

That could happen, I have an applyCookies function that might help ya, ill send you a bit later

After countless attempts to write the correct middleware, I finally succeeded. I still can't notice any difference in the logic between the old and new code, but the new code works - and that's the main thing! Thank you for pointing me in the right direction!

May I see your solution?

I dont think its cookies().set 😂

middleware.ts

import { cookies } from "next/headers";
import { NextResponse } from "next/server";

export async function middleware() {
    const refreshTokenCookie = (await cookies()).get("refresh_token");

    const newResponse = NextResponse.next();

    if (refreshTokenCookie) {
        const response = await fetch(`http://localhost:8000/auth/refresh`, {
            method: "GET",
            headers: {
                Cookie: `${refreshTokenCookie.name}=${refreshTokenCookie.value}`
            },
            credentials: "include"
        });

        if (response.ok) {
            response.headers.getSetCookie().forEach(responseSetCookieStr => {
                const [cookieName, ...cookieValue] = responseSetCookieStr
                    .split(";")[0]
                    .split("=");
                newResponse.cookies.set(
                    cookieName.trim(),
                    cookieValue.join("=").trim(),
                    {
                        httpOnly: true
                    }
                );
            });
        }
    }

    return newResponse;
}

export const config = {
    matcher: ["/((?!api|_next/static|_next/image|favicon|.*\\.png$).*)"]
};