# Nextjs App Router Patterns

> Build Next.js 13+ App Router applications with server components, client components, API routes, middleware, and streaming. Use when implementing Next.js features, route handlers, or RSC patterns. Use when this capability is needed.

- Skill: `tomevault-io/nextjs-app-router-patterns-5` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/nextjs-app-router-patterns-5`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/nextjs-app-router-patterns-5/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/nextjs-app-router-patterns-5

---


# Next.js App Router Patterns

## Page Structure

```typescript
// app/dashboard/page.tsx
export default async function DashboardPage() {
  const data = await fetch('https://api.example.com/data')
  return <div>{/* Server Component */}</div>
}
```

## Server vs Client Components

**Server Component (default):**
```typescript
// No "use client" = Server Component
export default async function ServerComp() {
  const data = await fetchData() // Direct async/await
  return <div>{data}</div>
}
```

**Client Component:**
```typescript
'use client'
import { useState } from 'react'

export default function ClientComp() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```

## API Routes

```typescript
// app/api/users/route.ts
import { NextRequest, NextResponse } from 'next/server'

export async function GET(request: NextRequest) {
  const users = await db.user.findMany()
  return NextResponse.json(users)
}

export async function POST(request: NextRequest) {
  const body = await request.json()
  const user = await db.user.create({ data: body })
  return NextResponse.json(user, { status: 201 })
}
```

## Layouts

```typescript
// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="dashboard">
      <nav>{/* Sidebar */}</nav>
      <main>{children}</main>
    </div>
  )
}
```

## Loading & Error States

```typescript
// app/dashboard/loading.tsx
export default function Loading() {
  return <div>Loading...</div>
}

// app/dashboard/error.tsx
'use client'
export default function Error({ error, reset }: {
  error: Error
  reset: () => void
}) {
  return <div>Error: {error.message}</div>
}
```

## Data Fetching

```typescript
// Server Component - Direct fetch
async function getData() {
  const res = await fetch('https://api.example.com', {
    cache: 'no-store', // or 'force-cache'
  })
  return res.json()
}

export default async function Page() {
  const data = await getData()
  return <div>{data.title}</div>
}
```

## Middleware

```typescript
// middleware.ts (root level)
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token')

  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/dashboard/:path*',
}
```

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/ak-eyther) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->