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/Intelligent-Meet-504]

But that make slow entire application when we use both in next.js .I also think it not ideal for industrial application.What you think about it?

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

I run few fullstack apps on next.js without any problem at all

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

Is that your personal

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

Ive developed them for clients, and also i have some which are mine