# Layouts Routing

> Next.js App Router 布局模式。设计页面结构、路由组织、布局嵌套时加载。

- Skill: `lennney/layouts-routing` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lennney/layouts-routing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lennney/layouts-routing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: lennney (https://skillmd.com/u/lennney)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lennney/layouts-routing

---


Use these App Router patterns:

**Route groups**(`(name)`) — 组织页面不影响 URL。适合分 marketing/dashboard/auth 区域
**Layout nesting** — `layout.tsx` 跨导航保持，只有 `children` 重新渲染
**Loading/Error** — 每段路由可单独配 `loading.tsx` 和 `error.tsx`（error 必须是 Client Component）
**Parallel routes**(`@slot`) — 一个布局显示多个独立页面
**Intercepting routes**(`(.)`) — 从列表进入时弹 modal，直接访问进正常页面

Default to Server Components. Push Client boundaries down — 只在需要交互的部分包 `'use client'`。