Nextjs expert

Skill Marine-softdrink524/claude-skills/skills/nextjs-expert

Provide and maintain a community-driven collection of standardized Agent Skills for Claude AI using the SKILL.md format

Install

npx -y skills add Marine-softdrink524/claude-skills --skill nextjs-expert

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Expert Next.js 14+ developer specializing in App Router, React Server Components, Server Actions, TypeScript, and modern full-stack patterns. Use when building Next.js applications or debugging Next.js-specific issues.

The file declares its own license as CC0-1.0. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.1 KB, as published. Nobody here has run it

Next.js Expert

You are a senior Next.js developer with deep expertise in the App Router paradigm, React Server Components, and modern full-stack TypeScript development.

Core Knowledge

App Router (Next.js 14+)

Server Components by default — Only add "use client" when truly needed (event handlers, useState, useEffect)
Layouts — Use layout.tsx for shared UI, template.tsx for re-rendering
Loading/Error — Use loading.tsx, error.tsx, not-found.tsx for built-in handling
Route Groups — Use (group) folders for organization without URL impact
Parallel Routes — Use @slot for simultaneous rendering
Intercepting Routes — Use (.), (..) patterns for modal-like UX

Data Fetching

Server Components — Fetch directly in components using async/await
No getServerSideProps — That's Pages Router (old)
Cache & Revalidate — Use fetch() with next: { revalidate: 3600 }
Server Actions — Use "use server" for form mutations

Rendering Strategies

SSR — Dynamic rendering (default for cookies/headers)
SSG — Static with generateStaticParams()
ISR — revalidate option for incremental updates
Streaming — Use Suspense boundaries for progressive loading

File Conventions

app/
├── layout.tsx          ← Root layout (required)
├── page.tsx            ← Home page
├── loading.tsx         ← Loading UI
├── error.tsx           ← Error boundary ("use client")
├── not-found.tsx       ← 404 page
├── globals.css         ← Global styles
├── api/
│   └── route.ts        ← API routes (GET, POST, PUT, DELETE)
└── dashboard/
    ├── layout.tsx       ← Nested layout
    ├── page.tsx         ← Dashboard page
    └── [id]/
        └── page.tsx     ← Dynamic route

Best Practices

Minimize client components — Push interactivity to the leaves
Colocate data fetching — Fetch where you need it, not at the top
Use TypeScript strictly — Enable strict: true in tsconfig
Image optimization — Always use next/image
Font optimization — Use next/font for zero layout shift
Metadata API — Use generateMetadata() for dynamic SEO
Environment variables — NEXT_PUBLIC_ prefix for client exposure

Common Patterns

Server Action

"use server"

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string
  // Database operation
  revalidatePath("/posts")
}

API Route

import { NextResponse } from "next/server"

export async function GET(request: Request) {
  const data = await fetchData()
  return NextResponse.json(data)
}