Nextjs

What it does

When your agent uses it

• React 19.2 apps
• Encountering async params
• Proxy.ts migration
• Use cache errors

Example prompts

• “/nextjs”

Requirements

• Node.js
• A Bash shell
• Pre-approved tools (allowed-tools): Read, Write, Edit, Bash, Glob, Grep

Workflow steps

12 steps, taken from the first numbered list in SKILL.md.

1. 1When to Use This Skill
2. 2When NOT to Use This Skill
3. 3Next.js 16 Breaking Changes
4. 4Cache Components & Caching APIs
5. 5Server Components
6. 6Server Actions
7. 7Route Handlers
8. 8React 19.2 Features
9. 9Metadata API
10. 10Image & Font Optimization
11. 11Top 5 Critical Errors
12. 12Performance Patterns

What it can do on your machine

Read from SKILL.md and the folder at commit 8837836. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • Read
  • Write
  • Edit
  • Bash
  • Glob
  • Grep

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships 1 file in scripts/ (TypeScript and Shell), which the agent can run.

  Shell commands in SKILL.md call:

  • bunx

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • nextjs.org

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Nextjs loads about 3.7k tokens when it runs, and up to ~16k if it reads all its reference files. Until then it costs about 46 tokens; SKILL.md has 910 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~46

When it runs · the whole SKILL.md, loaded when a task matches

~3.7k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~16k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

• NotePre-approves every shell command (allowed-tools: Bash)SKILL.md

  allowed-tools: Read, Write, Edit, Bash, Glob, Grep

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from secondsky/claude-skills at commit 8837836, republished under its MIT licence (© secondsky). 910 words, ~3,715 tokens.

name

nextjs

description

Next.js 16 with App Router, Server Components, Server Actions, Cache Components. Use for React 19.2 apps, SSR, or encountering async params, proxy.ts migration, use cache errors.

allowed-tools

Read, Write, Edit, Bash, Glob, Grep

license

MIT

metadata.version

1.0.0

metadata.last_verified

2025-11-21

metadata.nextjs_version

16.2.0

metadata.react_version

19.2.0

metadata.node_version

20.9+

metadata.author

Claude Skills Maintainers

metadata.repository

https://github.com/secondsky/claude-skills

metadata.production_tested

true

metadata.token_savings

65-70%

// ✅ Next.js 16 pattern
export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  return <div>{id}</div>
}

'use cache'

export async function BlogPosts() {
  const posts = await db.posts.findMany()
  return posts.map(post => <article key={post.id}>{post.title}</article>)
}

// next.config.ts
const config = { experimental: { ppr: true } }

// page.tsx
export const experimental_ppr = true

export default function Page() {
  return (
    <>
      <StaticHeader />
      <Suspense fallback={<Skeleton />}>
        <DynamicContent />
      </Suspense>
    </>
  )
}

// app/posts/page.tsx (Server Component by default)
export default async function PostsPage() {
  const posts = await db.posts.findMany()
  return <div>{posts.map(p => <article key={p.id}>{p.title}</article>)}</div>
}

import { Suspense } from 'react'

export default function Page() {
  return (
    <div>
      <Header />
      <Suspense fallback={<Skeleton />}>
        <Posts />
      </Suspense>
    </div>
  )
}

'use client'
import { useState } from 'react'
export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

// app/actions.ts
'use server'

import { revalidatePath } from 'next/cache'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string
  await db.posts.create({ data: { title } })
  revalidatePath('/posts')
}

// Server Component Form (simplest)
import { createPost } from './actions'

export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <button type="submit">Create</button>
    </form>
  )
}

// app/api/posts/route.ts
export async function GET(request: Request) {
  const posts = await db.posts.findMany()
  return Response.json({ posts })
}

export async function POST(request: Request) {
  const body = await request.json()
  const post = await db.posts.create({ data: body })
  return Response.json({ post }, { status: 201 })
}

// app/api/posts/[id]/route.ts
export async function GET(
  request: Request,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params // Await in Next.js 16
  const post = await db.posts.findUnique({ where: { id } })
  return post ? Response.json({ post }) : Response.json({ error: 'Not found' }, { status: 404 })
}

// Static metadata
export const metadata: Metadata = {
  title: 'My Blog',
  description: 'A blog about Next.js',
  openGraph: { title: 'My Blog', images: ['/og-image.jpg'] },
}

// Dynamic metadata (await params in Next.js 16)
export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const post = await db.posts.findUnique({ where: { id } })
  return { title: post.title, description: post.excerpt }
}

// next/image
import Image from 'next/image'
<Image src="/profile.jpg" alt="Profile" width={500} height={500} priority />

// next/font
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
<html className={inter.variable}>

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
}

// Rename: middleware.ts → proxy.ts
// Rename function: middleware → proxy
export function proxy(request: NextRequest) {
  // Same logic
}

// app/@modal/default.tsx
export default function ModalDefault() {
  return null
}

'use client'

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

'use cache'

export async function getPosts() {
  const response = await fetch('/api/posts')
  return response.json()
}

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": { "@/*": ["./*"] }
  }
}

© secondsky, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 15 other files (scripts, references) in plugins/nextjs/skills/nextjs of secondsky/claude-skills.

• SKILL.md
• references/caching-apis.md
• references/error-catalog.md
• references/next-16-migration-guide.md
• references/server-actions-patterns.md
• references/top-errors.md
• scripts/check-versions.sh
• templates/app-router-async-params.tsx
• templates/async-params-page.tsx
• templates/cache-component-use-cache.tsx
• templates/package.json
• templates/parallel-routes-with-default.tsx
• templates/proxy-migration.ts
• templates/route-handler-api.ts
• templates/server-action-form.tsx
• templates/server-actions-form.tsx

Open the folder on GitHubat commit 8837836