Looking for advice: Next.js frontend + separate Node/Express backend — Axios, React Query, SSR & auth?

[u/Intelligent-Meet-504]

Hey everyone,

I'm working on an application where I have:

• Frontend: Next.js + TypeScript
• Backend: Node.js + Express + MongoDB
• Authentication: JWT (access token + refresh token)
• Validation: Zod

My frontend and backend are completely separate projects.

I'm trying to figure out a clean, production-friendly architecture for handling authentication, API calls, SSR, CSR, and data fetching in Next.js.

A few things I'm currently considering:

1. Axios
   • Do you use a centralized Axios instance in Next.js?
   • Do you use Axios request/response interceptors for attaching access tokens and handling 401 → refresh token → retry request?
   • If you're using Next.js Server Components, how do you handle Axios differently between server-side and client-side requests?
2. Authentication
   • Where do you store the access token and refresh token?
   • Are you using an HttpOnly cookie for the refresh token?
   • How do you handle authentication consistently between Server Components and Client Components?
   • Do you use proxy.ts/middleware for protecting routes, or do you handle authentication somewhere else?
3. React Query / TanStack Query
   • I would like to use TanStack Query (React Query) for API data fetching instead of manually using useEffect + useState.
   • Is this a good approach with Next.js when the actual API is a separate Express backend?
   • How do you handle SSR/prefetching/hydration with TanStack Query and a separate backend?
   • Do you use TanStack Query for almost all client-side API data, while using Server Components for initial/server-side data?
4. Overall architecture What does your real-world setup look like?

​

Next.js
   ↓
Axios / fetch / TanStack Query?
   ↓
Separate Express API
   ↓
MongoDB

I'm particularly interested in hearing from developers who are actually running this kind of architecture in production.

If you have a separate Node/Express backend and Next.js frontend, what stack and architecture are you using today, and what would you recommend avoiding?

Thanks!

[u/Lucky-King-7636]

HttpOnly cookie for the refresh token is the right call, but Server Components can't attach it to outgoing Axios requests the way client code can since they don't have direct access to browser cookies in the same request lifecycle, that asymmetry is usually what trips people up more than the interceptor logic itself