Hi Folks, First of a short thank you for giving ur time

I’m building a Next.js app with a Django backend and I’m using HttpOnly cookies for auth (access + refresh). Access tokens are short-lived (around 2 minutes) and refresh works fine through my API calls — when an API hits a 401, the server handles refresh and retries. That part is okay.

The problem is with protected pages. If I just refresh the browser on a protected route, and my access token has already expired, the page still loads because the cookie is there. No API call = no check. Basically I end up with “stale cookies” that make it look like the user is still logged in, even though the access token is dead.

Obviously I don’t want to hammer my backend with a API checks on every single route change or page refresh just to catch this. There has to be a cleaner pattern.

So my question is:
👉 How do people usually structure this in Next.js so that:

1. Tokens stay HttpOnly (never exposed to JS)
2. Expired tokens don’t allow access to protected pages
3. We’re not doing a ton of unnecessary API calls

I feel like I’m missing a “standard” way here. Any advice or examples from folks who’ve already solved this would be awesome. Thanks!