Does it support Next.js Server Actions?

Yes, it includes dedicated 'serverFetch' methods designed to operate within the Next.js server environment while maintaining session context via cookies.

Is this only for FastAPI backends?

While the naming conventions reflect a FastAPI stack, the logic for Bearer tokens and JSON proxying is applicable to almost any modern REST API backend.

Can I use this with SWR or React Query?

Yes, the skill provides fetcher compatibility for SWR while also supporting standard React state management patterns.

How does this skill handle authentication?

It manages authentication by forwarding cookies on the server and using a specialized AuthService on the client to handle 401 responses with automatic token refresh.

Fetch Architecture for Next.js & FastAPI

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

byadelabdelgawad

0•

API Development

Implements a robust, multi-layered fetch utility system for Next.js applications communicating with FastAPI backends.

This skill provides a standardized data-fetching architecture designed specifically for the Next.js and FastAPI ecosystem. It facilitates seamless communication between the browser, Next.js server layers (API routes and Server Actions), and backend services through a set of specialized utilities. Key benefits include automated JWT token refresh on the client, secure cookie forwarding on the server, and a unified error-handling mechanism. Whether building complex dashboards or simple CRUD applications, this skill reduces boilerplate and ensures a production-grade communication flow across your entire full-stack application.

Key Features

01Automated JWT token refresh with client-side interceptors

020 GitHub stars

03Next.js Server Action and Server Component fetch utilities

04Secure API route proxying with auth-wrapped helpers

05Standardized error extraction and custom ApiError classes

06Built-in support for request timeouts and retry logic

Use Cases

01Building a secure full-stack bridge between Next.js and Python FastAPI

02Standardizing API communication patterns in large Next.js projects

03Implementing consistent authentication logic across client and server boundaries

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add adelabdelgawad/fullstack-agents fetch-architecture

For use in Claude.ai and ChatGPT

Download Skill