# Nextjs Mastery

Next.js 14+ App Router patterns including RSC, ISR, middleware, parallel routes, and...

- Repository: https://github.com/rohitg00/awesome-claude-code-toolkit (2800 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-05-12
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add rohitg00/awesome-claude-code-toolkit --skill nextjs-mastery -g -a claude-code -y`
Codex: `npx skills add rohitg00/awesome-claude-code-toolkit --skill nextjs-mastery -g -a codex -y`
Cursor: `npx skills add rohitg00/awesome-claude-code-toolkit --skill nextjs-mastery -g -a cursor -y`
Gemini CLI: `npx skills add rohitg00/awesome-claude-code-toolkit --skill nextjs-mastery -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add rohitg00/awesome-claude-code-toolkit`

## Description

Next.js 14+ App Router patterns including RSC, ISR, middleware, parallel routes, and data fetching

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Next.js Mastery

## App Router Structure

```
app/
  layout.tsx              # Root layout (wraps all pages)
  page.tsx                # Home route /
  loading.tsx             # Route-level Suspense fallback
  error.tsx               # Route-level error boundary
  not-found.tsx           # Custom 404
  (marketing)/
    about/page.tsx        # /about (grouped without URL segment)
  dashboard/
    layout.tsx            # Nested layout for /dashboard/*
    page.tsx              # /dashboard
    @analytics/page.tsx   # Parallel route slot
    @activity/page.tsx    # Parallel route slot
    settings/
      page.tsx            # /dashboard/settings
  api/
    webhooks/route.ts     # Route handler (POST /api/webhooks)
```

Route groups `(name)` organize code without affecting URLs. Parallel routes `@slot` render multiple pages simultaneously.

## Server Components and Data Fetching

```tsx
async function ProductPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await db.product.findUnique({ where: { id } });

  if (!product) notFound();

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={id} />
      </Suspense>
    </div>
  );
}

async function Reviews({ productId }: { productId: string }) {
  const reviews = await db.review.findMany({ where: { productId } });
  return (
    <ul>
      {reviews.map(r => <li key={r.id}>{r.text} - {r.rating}/5</li>)}
    </ul>
  );
}
```

Server Components are the default. They run on the server, can access databases directly, and send zero JavaScript to the client.

## ISR and Caching

```tsx
export const revalidate = 3600;

async function BlogPage() {
  const posts = await fetch("https://api.example.com/posts", {
    next: { revalidate: 3600, tags: ["posts"] },
  }).then(r => r.json());

  return <PostList posts={posts} />;
}
```

The rest: https://github.com/rohitg00/awesome-claude-code-toolkit/blob/HEAD/skills/nextjs-mastery/SKILL.md