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.
NewMaintained
Automatic
◆Frontend / UI pack
Last verified 8/21/2026
What it changes
Passed 21 of 22 test cases with the skill, and 21 of 22 without it.
Without skill95%
With skill95%
Checks it passed that the model alone missed
Recommends creating the QueryClient instance inside component state using useState in a Client Component
1 fixed20 passed either way0 still failing1 broke
Pass-rate lift
0 pp
Tokens
+123%
Agent turns
0%
Response time
-11%
Model gemini-3.6-flashMeasured 8/21/2026v121 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
A test case the skill fixed. Same model, same prompt, with and without the skill.
Prompt
We want to set up client-side data fetching with React Query across our Next.js App Router app. Should we instantiate `new QueryClient()` in global scope above component definitions or inside component state in a dedicated client provider file?
What was checked, without and with the skill
Checked
Without skill
With skill
Recommends creating the QueryClient instance inside component state using useState in a Client Component
Missed
Passed
Explains that module-scope QueryClient instances can share cache state across different user requests on the server
Passed
Passed
case-07 · gemini-3.6-flash · 8/21/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md325 lines8 files
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:
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>
);
}