Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →wshobson/nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching.
Passed 24 of 24 test cases with the skill, and 23 of 24 without it.
1 fixed23 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
When a user requests an invalid ID on a product page in Next.js App Router, I want to display a standard 404 fallback page. Which file convention within the route folder segment handles this?
| Checked | Without skill | With skill |
|---|---|---|
| Uses not-found.tsx to render 404 UI | Missed | Passed |
The instructions your model reads when the skill loads.
Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.
| Mode | Where | When to Use |
|---|---|---|
| Server Components | Server only | Data fetching, heavy computation, secrets |
| Client Components | Browser | Interactivity, hooks, browser APIs |
| Static | Build time | Content that rarely changes |
| Dynamic | Request time | Personalized or real-time data |
| Streaming | Progressive | Large pages, slow data sources |
app/
├── layout.tsx # Shared UI wrapper
├── page.tsx # Route UI
├── loading.tsx # Loading UI (Suspense)
├── error.tsx # Error boundary
├── not-found.tsx # 404 UI
├── route.ts # API endpoint
├── template.tsx # Re-mounted layout
├── default.tsx # Parallel route fallback
└── opengraph-image.tsx # OG image generation
test cases passed, vs 23 / 24 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.