nextjs-mastery
Next.js 14+ App Router patterns including RSC, ISR, middleware, parallel routes, and data fetching
Profile →npx skills add rohitg00/awesome-claude-code-toolkit --skill nextjs-mastery --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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: {
- App Router Structure
- Server Components and Data Fetching
- ISR and Caching
- Middleware
- Server Actions
- Anti-Patterns
- Checklist
What does the nextjs-mastery skill do?
Next.js 14+ App Router patterns including RSC, ISR, middleware, parallel routes, and data fetching
How do I install it?
Run `npx skills add rohitg00/awesome-claude-code-toolkit --skill nextjs-mastery --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From rohitg00/awesome-claude-code-toolkit, a repository with 2,438 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.