🚨 Stop Writing Messy API Calls in Next.js — Do This Instead (Production-Grade Setup)

Let me be brutally honest.

Most Next.js codebases I’ve reviewed lately are a complete mess when it comes to API handling:

• useEffect everywhere
• API calls inside components
• No caching
• Broken auth (random logouts 🤡)
• Copy-pasted logic across files

And the worst part?

👉 These apps work… until they scale.

---

⚠️ The Problem Nobody Talks About

Frontend devs focus a lot on UI…

But ignore architecture.

Meanwhile, backend engineers:

• design layers
• enforce contracts
• optimize performance

👉 Frontend?
"Just fetch it bro" 😅

---

💡 So I Built This Instead

A production-grade API layer using modern tools:

🧱 Stack

• Next.js (App Router)
• Axios (client-side)
• TanStack Query (API state)
• Zustand (global state)
• Zod (validation)
• React Hook Form (forms)
• JWT Auth (with refresh token rotation)

---

🧠 Architecture Overview

[ UI Components ]
        ↓
[ Custom Hooks (React Query) ]
        ↓
[ Services Layer ]
        ↓
[ Axios / Fetch Layer ]
        ↓
[ NestJS Backend ]

👉 Clean separation = scalable system

---

🔥 Step 1: STOP Calling APIs in Components

❌ Bad

useEffect(() => {
  fetch("/api/users").then(...)
}, [])

✅ Good (Service Layer)

// services/user.service.ts
export const getUsers = async () => {
  const res = await api.get("/users");
  return res.data;
};

👉 Your components should NEVER know how APIs work.

---

⚡ Step 2: React Query = Game Changer

Using TanStack Query:

const { data, isLoading } = useQuery({
  queryKey: ["users"],
  queryFn: getUsers,
});

What you get for free:

• 🚀 caching
• 🔁 retries
• ⚡ background refetch
• 📊 pagination support

👉 This replaces Redux (for API state)

---

🧩 Step 3: Axios with Interceptors (REAL AUTH)

// lib/api.ts
import axios from "axios";

export const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  withCredentials: true,
});

---

🔐 Token Handling (IMPORTANT)

Flow:

Request → 401 → Refresh Token → Retry Request

Interceptor:

api.interceptors.response.use(
  res => res,
  async (error) => {
    if (error.response.status === 401) {
      const newToken = await refreshToken();
      error.config.headers.Authorization = `Bearer ${newToken}`;
      return api(error.config);
    }
    return Promise.reject(error);
  }
);

👉 This is what separates amateur apps vs production apps

---

🧠 Step 4: Zustand (Keep It Simple)

Using Zustand:

import { create } from "zustand";

export const useAuthStore = create((set) => ({
  user: null,
  token: null,
  setAuth: (data) => set(data),
  logout: () => set({ user: null, token: null }),
}));

✔ no boilerplate
✔ super fast
✔ perfect with React Query

---

🛡️ Step 5: Zod = No More API Surprises

Using Zod:

const userSchema = z.object({
  id: z.string(),
  name: z.string(),
});

Why this matters:

Without validation:

Backend changes → frontend silently breaks 😬

With Zod:
✔ strict validation
✔ type safety
✔ safer production

---

🧾 Step 6: Forms That Don’t Lag

Using React Hook Form:

const { register, handleSubmit } = useForm();

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("email")} />
</form>

✔ minimal re-renders
✔ clean integration with Zod
✔ better UX

---

📁 Step 7: Folder Structure (This is KEY)

/src
  /lib
    api.ts
    fetcher.ts
  /services
    auth.service.ts
    user.service.ts
  /hooks
    useApiQuery.ts
    useApiMutation.ts
  /store
    auth.store.ts
  /schemas
    user.schema.ts

👉 This is what makes your app scalable after 6+ months.

---

🧠 Step 8: Custom Hooks = Clean UI

export const useApiQuery = (key, fn) => {
  return useQuery({
    queryKey: key,
    queryFn: fn,
  });
};

Now in UI:

const { data } = useApiQuery(["users"], getUsers);

👉 Clean AF.

---

📊 Diagram: Full Flow

[Component]
   ↓
[useApiQuery]
   ↓
[Service Layer]
   ↓
[Axios Instance]
   ↓
[Interceptor]
   ↓
[NestJS API]

---

💥 The Real Difference

Before:

• messy code
• duplicated logic
• no caching
• auth bugs

After:

• scalable architecture
• centralized API logic
• automatic caching
• seamless auth flow

---

⚠️ Controversial Take

If you're still using useEffect for API calls in 2025…

You're writing legacy code.

Yeah, I said it.

---

🧠 Final Thoughts

Frontend is no longer “just UI”.

It’s:

• data orchestration
• caching strategy
• auth handling
• performance optimization

👉 Treat it like backend architecture.

---

🚀 Want This Setup Instantly?

I created a Cursor AI command that generates this entire architecture automatically.

Drop a comment: "setup"
I’ll share it with you 👇

---

🔥 Tags

nextjs #nestjs #reactquery #zustand #webdev #typescript #frontend #fullstack #javascript

---

🚀 Want the full setup?

I’ve created a Cursor AI command that generates this entire architecture automatically.

Comment “setup” and I’ll share it 👇