---
name: nextjs
description: Next.js specific patterns including App Router, React Server Components, Server Actions, streaming, caching, and Vercel deployment.
allowed-tools: Read, Write, Edit, Bash, Glob, Grep
---
# Next.js Skill
Expert assistance for building full-stack Next.js applications with App Router, React Server Components, Server Actions, and modern deployment patterns.
## Capabilities
- Generate Next.js project structure with App Router
- Implement React Server Components (RSC) patterns
- Create Server Actions for form handling and mutations
- Configure advanced routing (parallel, intercepting, route groups)
- Set up streaming with Suspense boundaries
- Implement caching strategies with revalidation
- Configure Vercel deployment and edge functions
## Usage
Invoke this skill when you need to:
- Bootstrap a new Next.js 15+ application
- Implement server-side rendering and data fetching
- Create API routes and Server Actions
- Configure advanced routing patterns
- Optimize for Core Web Vitals
## Inputs
| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| projectName | string | Yes | Name of the Next.js project |
| router | string | No | app (default) or pages |
| features | array | No | List of features to scaffold |
| database | string | No | prisma, drizzle, none |
| auth | string | No | nextauth, clerk, none |
| styling | string | No | tailwind, css-modules, styled-components |
### Feature Configuration
```json
{
"projectName": "my-saas",
"features": [
"authentication",
"api-routes",
"server-actions",
"parallel-routes",
"middleware"
],
"database": "prisma",
"auth": "nextauth",
"styling": "tailwind"
}
```
## Output Structure
```
my-saas/
├── app/
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ ├── loading.tsx # Loading UI
│ ├── error.tsx # Error boundary
│ ├── not-found.tsx # 404 page
│ ├── globals.css # Global styles
│ ├── (auth)/ # Route group
│ │ ├── login/
│ │ │ └── page.tsx
│ │ └── register/
│ │ └── page.tsx
│ ├── dashboard/
│ │ ├── layout.tsx # Dashboard layout
│ │ ├── page.tsx
│ │ ├── @sidebar/ # Parallel route
│ │ │ └── default.tsx
│ │ └── settings/
│ │ └── page.tsx
│ └── api/
│ └── [...route]/
│ └── route.ts # API routes
├── components/
│ ├── ui/ # Reusable UI components
│ └── features/ # Feature-specific components
├── lib/
│ ├── actions/ # Server Actions
│ │ └── user-actions.ts
│ ├── db/ # Database utilities
│ │ └── prisma.ts
│ └── utils/ # Utility functions
├── middleware.ts # Edge middleware
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind configuration
└── package.json
```
## Generated Code Patterns
### App Router Layout
```typescript
// app/layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: {
default: 'My SaaS',
template: '%s | My SaaS',
},
description: 'A modern SaaS application',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
### React Server Component
```typescript
// app/dashboard/page.tsx
import { Suspense } from 'react';
import { getUser } from '@/lib/db/user';
import { DashboardStats } from '@/components/features/dashboard-stats';
import { DashboardSkeleton } from '@/components/ui/skeletons';
export default async function DashboardPage() {
const user = await getUser();
return (
Welcome, {user.name}
}>
);
}
```
### Server Action
```typescript
// lib/actions/user-actions.ts
'use server';
import { revalidatePath } from 'next/cache';
import { redirect } from 'next/navigation';
import { z } from 'zod';
import { prisma } from '@/lib/db/prisma';
const updateProfileSchema = z.object({
name: z.string().min(1).max(100),
email: z.string().email(),
});
export async function updateProfile(formData: FormData) {
const validatedFields = updateProfileSchema.safeParse({
name: formData.get('name'),
email: formData.get('email'),
});
if (!validatedFields.success) {
return {
errors: validatedFields.error.flatten().fieldErrors,
};
}
const { name, email } = validatedFields.data;
try {
await prisma.user.update({
where: { id: getCurrentUserId() },
data: { name, email },
});
} catch (error) {
return { error: 'Failed to update profile' };
}
revalidatePath('/dashboard/settings');
redirect('/dashboard');
}
```
### Form with Server Action
```typescript
// app/dashboard/settings/page.tsx
import { updateProfile } from '@/lib/actions/user-actions';
import { SubmitButton } from '@/components/ui/submit-button';
export default function SettingsPage() {
return (
);
}
```
### Middleware
```typescript
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const token = request.cookies.get('auth-token');
if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
return NextResponse.redirect(new URL('/login', request.url));
}
const response = NextResponse.next();
// Add security headers
response.headers.set('X-Frame-Options', 'DENY');
response.headers.set('X-Content-Type-Options', 'nosniff');
return response;
}
export const config = {
matcher: ['/dashboard/:path*', '/api/:path*'],
};
```
### API Route Handler
```typescript
// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { prisma } from '@/lib/db/prisma';
export async function GET(request: NextRequest) {
const searchParams = request.nextUrl.searchParams;
const page = parseInt(searchParams.get('page') ?? '1');
const limit = parseInt(searchParams.get('limit') ?? '10');
const users = await prisma.user.findMany({
skip: (page - 1) * limit,
take: limit,
select: {
id: true,
name: true,
email: true,
},
});
return NextResponse.json({ users, page, limit });
}
export async function POST(request: NextRequest) {
const body = await request.json();
const user = await prisma.user.create({
data: body,
});
return NextResponse.json(user, { status: 201 });
}
```
## Caching Strategies
### Static Generation with Revalidation
```typescript
// Revalidate every hour
export const revalidate = 3600;
export default async function Page() {
const data = await fetchData();
return {/* content */}
;
}
```
### On-Demand Revalidation
```typescript
// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';
export async function POST(request: NextRequest) {
const { path, tag, secret } = await request.json();
if (secret !== process.env.REVALIDATION_SECRET) {
return NextResponse.json({ error: 'Invalid secret' }, { status: 401 });
}
if (tag) {
revalidateTag(tag);
} else if (path) {
revalidatePath(path);
}
return NextResponse.json({ revalidated: true });
}
```
## Dependencies
```json
{
"dependencies": {
"next": "^15.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"devDependencies": {
"@types/node": "^22.0.0",
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"typescript": "^5.7.0"
}
}
```
## Workflow
1. **Create project structure** - Set up App Router directories
2. **Configure layouts** - Root and nested layouts
3. **Implement pages** - Server and client components
4. **Add Server Actions** - Form handling and mutations
5. **Configure middleware** - Auth and security
6. **Set up API routes** - REST or tRPC endpoints
7. **Optimize caching** - Static and dynamic strategies
8. **Deploy to Vercel** - Edge and serverless configuration
## Best Practices Applied
- App Router with React Server Components
- TypeScript strict mode
- Server Actions for mutations
- Proper loading and error states
- Image optimization with next/image
- Font optimization with next/font
- Metadata API for SEO
- Edge-compatible code
## References
- Next.js Documentation: https://nextjs.org/docs
- Next.js DevTools MCP: https://github.com/vercel/next-devtools-mcp
- claude-code-nextjs-skills: https://github.com/laguagu/claude-code-nextjs-skills
- Vercel Deployment: https://vercel.com/docs
## Target Processes
- nextjs-full-stack-development
- server-component-architecture
- api-route-implementation
- authentication-setup
- deployment-optimization