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.
来源信息
- 仓库
- tomevault-io/skills-registry
- 最近来源活动
- 2026年4月28日 22:53
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 0
- 分支
- 0
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
2 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- nextjs-app-router-patterns
- description
- 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.
- metadata
- {"author":"ak-eyther"}
# 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 -->
在 GitHub 查看