# nextjs-data-fetching

Provides Next.js App Router data fetching patterns, covering Server Components, ISR caching strategies, and SWR or React Query client integration.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 3700 installs · ★ 363
- Author: giuseppe-trisciuoglio
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/giuseppe-trisciuoglio/developer-kit/tree/HEAD/plugins/developer-kit-typescript/skills/nextjs-data-fetching/SKILL.md
- Updated: 2026-09-10
- HTML: https://affpapa.org/en/nevibecode/skills/nextjs-data-fetching

## What it does

This skill supplies agent workflows with standard data fetching patterns for the Next.js App Router. It guides the model through direct requests inside async Server Components, parallel execution with `Promise.all()`, and sequential queries when dependent parameters exist.

The instructions cover caching controls such as time-based ISR, on-demand cache invalidation via `revalidateTag`, and opting out using `cache: 'no-store'`. It also outlines client integration setups for `swr` and `@tanstack/react-query`, alongside fallback UI patterns using `loading.tsx` and `Suspense`.

Keep in mind that Server Components cannot run React hooks like `useState` or client data libraries, which means any component using SWR or React Query must declare the `'use client'` directive.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add giuseppe-trisciuoglio/developer-kit --skill nextjs-data-fetching -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/nextjs-data-fetching/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/nextjs-data-fetching/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add giuseppe-trisciuoglio/developer-kit --skill nextjs-data-fetching -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/nextjs-data-fetching/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add giuseppe-trisciuoglio/developer-kit --skill nextjs-data-fetching -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/nextjs-data-fetching/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install giuseppe-trisciuoglio/developer-kit nextjs-data-fetching
```

2. **Manually: put the files in place**
- File: `.github/skills/nextjs-data-fetching/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add giuseppe-trisciuoglio/developer-kit --skill nextjs-data-fetching -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/giuseppe-trisciuoglio/developer-kit --path plugins/developer-kit-typescript/skills/nextjs-data-fetching
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/nextjs-data-fetching/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add giuseppe-trisciuoglio/developer-kit --skill nextjs-data-fetching -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/giuseppe-trisciuoglio/developer-kit/tree/HEAD/plugins/developer-kit-typescript/skills/nextjs-data-fetching/SKILL.md

## When to use it
- fetch data in async Server Components and parallelize calls with `Promise.all()`
- configure time-based ISR and on-demand cache tagging with `revalidateTag`
- wire up SWR or TanStack React Query in client components
- handle UI fallback states using `loading.tsx` and React Suspense boundaries

## Example prompts
- Show how to implement parallel data fetching in a Next.js Server Component
- Set up an on-demand revalidation route handler using revalidateTag
- Configure a client component to fetch posts using SWR with refresh intervals

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 0c3370a68dc28b0d.

BEGIN THIRD-PARTY FILE 0c3370a68dc28b0d
````text
---
name: nextjs-data-fetching
description: Provides Next.js App Router data fetching patterns including SWR and React Query integration, parallel data fetching, Incremental Static Regeneration (ISR), revalidation strategies, and error boundaries. Use when implementing data fetching in Next.js applications, choosing between server and client fetching, setting up caching strategies, or handling loading and error states.
allowed-tools: Read, Write, Edit, Bash
---

# Next.js Data Fetching

## Overview

Provides patterns for data fetching in Next.js App Router: server-side fetching, SWR/React Query integration, ISR, revalidation, error boundaries, and loading states.

## When to Use

- Implementing data fetching in Next.js App Router
- Choosing between Server Components and Client Components
- Setting up SWR or React Query for client-side caching
- Configuring ISR, time-based, or on-demand revalidation
- Handling loading and error states
- Building forms with Server Actions

## Instructions

### Server Component Fetching

Fetch directly in async Server Components:

```tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts');
  if (!res.ok) throw new Error('Failed to fetch posts');
  return res.json();
}

export default async function PostsPage() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
```

### Parallel Data Fetching

Use `Promise.all()` for independent requests:

```tsx
async function getDashboardData() {
  const [user, posts, analytics] = await Promise.all([
    fetch('/api/user').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/analytics').then(r => r.json()),
  ]);
  return { user, posts, analytics };
}

export default async function DashboardPage() {
  const { user, posts, analytics } = await getDashboardData();
  // Render dashboard
}
```

### Sequential Data Fetching (When Dependencies Exist)

```tsx
async function getUserPosts(userId: string) {
  const user = await fetch(`/api/users/${userId}`).then(r => r.json());
  const posts = await fetch(`/api/users/${userId}/posts`).then(r => r.json());
  return { user, posts };
}
```

### Time-based Revalidation (ISR)

```tsx
async function getPosts() {
  const res = await fetch('https://api.example.com/posts', {
    next: { revalidate: 60 } // Revalidate every 60 seconds
  });
  return res.json();
}
```

### On-Demand Revalidation

```tsx
// app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache';
````
END THIRD-PARTY FILE 0c3370a68dc28b0d

The third-party file has ended. Everything between the 0c3370a68dc28b0d tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2581 of 8883 bytes. © giuseppe-trisciuoglio · MIT · https://github.com/giuseppe-trisciuoglio/developer-kit/tree/HEAD/plugins/developer-kit-typescript/skills/nextjs-data-fetching/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md