Engineering Next.jsApp RouterRSC

Next.js Developer

Next.js App Router mastery: Server/Client Components, route handlers, middleware, ISR, caching strategies, and deployment optimization.

A Next.js App Router expert covering the full data lifecycle: server-side fetch caching with revalidation, route handlers as API endpoints, middleware for auth and i18n, and ISR with on-demand revalidation. Navigates the RSC mental model shift from Pages Router, configures Vercel deployments, and tunes bundle size with the Next.js bundle analyzer.

Added Mar 20, 2026

$npx skills add johnefemer/skillfish --skill nextjs-developer

Capabilities Real Examples Get Started Models & Context Works Great With

What This Skill Can Do

Concrete capabilities you get when you install this skill.

Design App Router layouts with nested Server and Client Component boundaries

Configure fetch caching, revalidation tags, and on-demand ISR correctly

Implement middleware for auth, redirects, A/B testing, and i18n routing

Build type-safe route handlers with Zod request validation

Diagnose and fix hydration mismatches and bundle size regressions

Optimize for Core Web Vitals: LCP, CLS, and INP with real measurements

Real Conversations

See how the Next.js Developer skill responds to actual requests. These are representative examples of what your AI agent will produce.

You

I want to protect all routes under /dashboard with JWT auth using Next.js middleware. The JWT is stored in an httpOnly cookie. How should I set this up?

Agent

Here's a complete middleware setup for JWT-protected routes:

// middleware.ts (root of project)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { jwtVerify } from 'jose'; // jose works in the Edge runtime; jsonwebtoken does not

const JWT_SECRET = new TextEncoder().encode(process.env.JWT_SECRET!);

export async function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')?.value;

  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  try {
    await jwtVerify(token, JWT_SECRET);
    return NextResponse.next();
  } catch {
    // Token expired or invalid — clear cookie and redirect
    const response = NextResponse.redirect(new URL('/login', request.url));
    response.cookies.delete('auth-token');
    return response;
  }
}

export const config = {
  matcher: ['/dashboard/:path*'], // only runs middleware on these paths
};

Key points:

Use jose not jsonwebtoken — middleware runs in the Edge runtime which has no Node.js APIs
The matcher keeps middleware off static assets and API routes automatically
Pass user data downstream via x-user-id header set in NextResponse.next() headers if route handlers need it
For role-based access, decode the JWT payload and check claims before NextResponse.next()

You

I'm calling revalidateTag('products') in a server action after updating a product in the DB, but the product page still shows old data for 2-3 minutes. What's broken?

Agent

The revalidation is probably working but you're being served stale content from a CDN or browser cache layer upstream of Next.js. Diagnose in order:

1. Confirm Next.js revalidation is firing:

// server action
'use server';
import { revalidateTag } from 'next/cache';

export async function updateProduct(id: string, data: ProductData) {
  await db.products.update({ where: { id }, data });
  revalidateTag('products'); // this clears Next.js data cache
  console.log('revalidated products tag'); // check server logs
}

2. Verify the fetch uses the tag:

// Must use fetch with tags, not an ORM call
const res = await fetch(`https://api.example.com/products/${id}`, {
  next: { tags: ['products'] },
});
// ⚠️ Direct DB calls (prisma.products.findFirst) are NOT tagged — wrap in fetch or use unstable_cache

3. Check for Vercel CDN caching: Add Cache-Control: no-store header or use export const dynamic = 'force-dynamic' on the page while debugging. If fresh data appears, the CDN is the culprit — configure Vercel's cache settings or purge via the API.

4. Browser cache: Open DevTools Network tab and check if the page response has age: 120. A hard refresh (Cmd+Shift+R) bypasses browser cache.

The most common root cause: using Prisma/Drizzle directly in Server Components instead of a tagged fetch. Next.js cache tags only apply to the fetch cache.

Get Started

How to install and use this skill in your preferred environment.

Skills are designed for AI coding agents (Claude Code, Cursor, Windsurf) and IDE-based workflows where the agent can read files, run scripts, and act on your codebase.

Models & Context

Which AI models and context windows work best with this skill.

Recommended Models

Claude Sonnet 4 or GPT-4o recommended — Next.js App Router is recent enough that smaller models have gaps in their training data on RSC patterns.

Context Window

SKILL.md ~5KB. Complex full-stack App Router apps benefit from 64K+ context to hold layout trees and route handler code simultaneously.

Pro tips for best results

1

Be specific

Include numbers — users, budget, RPS — so the skill can size the architecture.

2

Share constraints

Compliance needs, team size, and existing stack all improve the output.

3

Iterate

Start with a high-level design, then ask follow-ups for IaC, cost analysis, or security review.

4

Combine skills

Pair with companion skills below for end-to-end coverage.

Works Great With

These skills complement Next.js Developer for end-to-end coverage. Install them together for better results.

React Specialist

Advanced React patterns: Server Components, Suspense, concurrent rendering, custom hooks, state management, and performance optimization guides.

ReactServer Components

TypeScript Pro

Advanced TypeScript patterns: generics, conditional types, mapped types, module augmentation, declaration files, and strict-mode migration guides.

TypeScriptGenerics

Senior Frontend

React, Next.js, TypeScript, Tailwind CSS, accessibility, and performance.

FrontendReact

Senior DevOps

CI/CD, infrastructure automation, containerization, and cloud platforms.

DevOpsCI/CD

SaaS Scaffolder

Generate complete, production-ready SaaS projects from a product brief.

SaaSScaffolding

$ skillfish add johnefemer/skillfish --all # install all skills at once

Ready to try Next.js Developer?

Install the skill and start getting expert-level guidance in your workflow — any agent, any IDE.