# Nextjs Fullstack Patterns

> Use when building fullstack apps with Next.js.

- Skill: `loopyluci/nextjs-fullstack-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add loopyluci/nextjs-fullstack-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/loopyluci/nextjs-fullstack-patterns/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: LoopyLuci (https://skillmd.com/u/loopyluci)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/loopyluci/nextjs-fullstack-patterns

---


# Next.js Fullstack Patterns

Building fullstack applications with Next.js — from App Router and Server Components through data fetching, middleware, and deployment.

## When to Use

- Building fullstack React applications with SSR/SSG
- Using Next.js App Router (13+)
- Server Components and Server Actions
- API routes and middleware

## Next.js Patterns

```typescript
// Server Component with data fetching
async function UserPage({ params }: { params: { id: string } }) {
  const user = await fetchUser(params.id); // Direct fetch, no useEffect
  return <div>{user.name}</div>;
}

// Server Action for form handling
'use server';
async function createUser(formData: FormData) {
  const name = formData.get('name');
  await db.user.create({ data: { name } });
  revalidatePath('/users');
}

// Route Handler (API route)
export async function GET(request: Request) {
  const users = await db.user.findMany();
  return Response.json(users);
}
```

## Verification Checklist

- [ ] Server Components default, Client Components opt-in
- [ ] Data fetching at component level (no waterfall)
- [ ] Server Actions for mutations
- [ ] ISR for static + dynamic hybrid
- [ ] Middleware for auth and redirects
- [ ] Route groups for layout organization