What is the main benefit of this fetch architecture?

It provides a standardized way to handle authentication and data fetching across all Next.js environments—client, server components, and API routes—ensuring consistent error handling and security.

How does it connect to a FastAPI backend?

It uses Next.js API routes as a proxy. The provided withAuth wrapper extracts tokens from the session and forwards them to the backend via backendFetch using Bearer authentication.

Does this skill handle token refreshing?

Yes, the client-side utility includes logic to automatically attempt a token refresh on 401 Unauthorized errors before retrying the request or redirecting to login.

Does it support server-side rendering (SSR)?

Yes, it includes serverFetch and serverGet utilities which handle cookie forwarding from the browser to ensure SSR requests are properly authenticated.

Can I use this with data fetching libraries like SWR?

Absolutely. The fetchClient is designed to be used as a fetcher for libraries like SWR or TanStack Query, providing built-in auth and error handling out of the box.

Fetch Architecture for Next.js & FastAPI

Name: Fetch Architecture for Next.js & FastAPI
Author: adelabdelgawad

byadelabdelgawad

0•

API Development

Standardizes data fetching across Next.js client, server, and FastAPI backends with robust authentication and error handling.

This skill provides a comprehensive architecture for handling data fetching in modern Next.js applications communicating with FastAPI backends. It implements a layered approach including client-side utilities with automatic token refresh, server-side fetchers that forward cookies, and API route proxies that handle Bearer token injection. By standardizing error classes, retry logic, and request flows, it ensures consistent communication between the frontend and backend while simplifying complex authentication workflows across different Next.js rendering environments like Server Actions, API Routes, and Client Components.

Key Features

01Unified client-side fetch utility with automatic 401 token refresh

02Pre-configured TypeScript types and directory structure for fetch modules

03Next.js API route wrappers for secure FastAPI backend proxying

04Server-side fetchers with cookie forwarding for SSR and Server Actions

050 GitHub stars

06Standardized ApiError handling and retry logic for 429/503 status codes

Use Cases

01Building a Next.js frontend for a separate FastAPI backend service

02Implementing secure data fetching with JWT-based authentication and refresh tokens

03Standardizing error handling and request timeouts across an enterprise Next.js application

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add adelabdelgawad/claude-fullstack-plugins fetch-architecture

For use in Claude.ai and ChatGPT

Download Skill