skills.rest
adelabdelgawad
adelabdelgawadCOMMUNITY
Explore all skills by this author →
𝕏@Adel_AbdElgawaDGitHub

fetch-architecture

Create Next.js API routes with authentication, token refresh, and error handling.

Updated Jan 10, 2026
Search Tags:#typescript#authentication#api#data fetching#backend#next.js#fetch
One-click install
npx skills add https://github.com/adelabdelgawad/claude-fullstack-skills --skill fetch-architecture
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fetch-architecture
Source: https://github.com/adelabdelgawad/claude-fullstack-skills/tree/main/fetch-architecture
Command: npx skills add https://github.com/adelabdelgawad/claude-fullstack-skills --skill fetch-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill simplifies and standardizes how your Next.js application communicates with backend APIs, ensuring secure, efficient, and robust data fetching and manipulation across client and server environments.

Core Features & Use Cases

  • Unified Fetching: Provides consistent client-side and server-side fetching utilities.
  • Authentication Handling: Integrates seamlessly with token refresh and session management.
  • Error Management: Implements robust error handling with custom ApiError classes and retry logic.
  • Use Case: When building a dashboard that needs to display real-time user data fetched from a FastAPI backend, this Skill provides the necessary tools to make authenticated API calls from both server components (for initial load) and client components (for updates), handling token expiry gracefully.

Quick Start

Use the fetch-architecture skill to create a new API route for managing user data.

Frequently Asked Questions about fetch-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle authentication and token refresh in Next.js data fetching?▼

Next.js data fetching with token refresh is handled by integrating session management directly into client and server-side fetch utilities, automatically refreshing expired tokens during API calls.

What is the best way to standardize API calls between Next.js and a FastAPI backend?▼

Standardizing API calls between Next.js and FastAPI is achieved through API route proxies that facilitate secure communication, providing consistent fetching utilities for both environments.

How do I manage API errors and retries in Next.js server actions?▼

Managing API errors in Next.js server actions involves using custom ApiError classes alongside built-in retry logic to robustly handle failed requests and maintain application stability.

Can I use SWR hooks with server-side fetching in Next.js?▼

SWR hooks are supported for client-side data updates, working alongside server components for initial loads to provide a unified fetching architecture across your Next.js application.

Does this fetch architecture work with both client and server components in Next.js?▼

The fetch architecture supports both client and server components in Next.js, offering unified fetching utilities that ensure consistent API interactions across your entire application.

Related Skills

Explore More Software Engineering Skills→
EsdevenimentsEsdeveniments
2

api-layer-patterns

Implement a three-layer API pattern for Next.js apps with HMAC signing.

Official
Advanced
yutnayutna
2

nextjs-data-access

Orchestrate server and client data fetching with SWR in Next.js apps.

Community
Advanced
scalekit-incscalekit-inc

implementing-scalekit-fastapi-auth

Integrate Scalekit OAuth authentication into FastAPI projects with protected routes.

Official
Advanced
ar4mirezar4mirez
7

nextjs

Provide guardrails and best practices for Next.js 14+ App Router development.

Community
Advanced