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

API Development

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

About

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

Unified client-side fetch utility with automatic 401 token refresh
Pre-configured TypeScript types and directory structure for fetch modules
Next.js API route wrappers for secure FastAPI backend proxying
Server-side fetchers with cookie forwarding for SSR and Server Actions
0 GitHub stars
Standardized ApiError handling and retry logic for 429/503 status codes

Use Cases

Building a Next.js frontend for a separate FastAPI backend service
Implementing secure data fetching with JWT-based authentication and refresh tokens
Standardizing error handling and request timeouts across an enterprise Next.js application

About

Key Features

Unified client-side fetch utility with automatic 401 token refresh
Pre-configured TypeScript types and directory structure for fetch modules
Next.js API route wrappers for secure FastAPI backend proxying
Server-side fetchers with cookie forwarding for SSR and Server Actions
0 GitHub stars
Standardized ApiError handling and retry logic for 429/503 status codes

Use Cases

Building a Next.js frontend for a separate FastAPI backend service
Implementing secure data fetching with JWT-based authentication and refresh tokens
Standardizing error handling and request timeouts across an enterprise Next.js application