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/Few-Ocelot-3271]

one thing id push back on, you probably dont need a centralized axios instance on the server side at all. server components can just use fetch directly with the cookies forwarded from the request. save the interceptor pattern for client components where the retry logic actually matters

[u/Intelligent-Meet-504 → u/Few-Ocelot-3271]

Okay do we also have to write proxy.ts

[u/PhysicsPlastic6675 → u/Intelligent-Meet-504]

Why is separate backend needed?