Implement Next.js App Router patterns including Server Components, Client Components, layouts, route organization, and data fetching. Use when building with App Router, organizing routes, or implementing modern Next.js patterns. Trigger words include "App Router", "Server Component", "Client Component", "layout", "app directory".
View on GitHubarmanzeroeight/fastagent-plugins
nextjs-toolkit
January 21, 2026
Select agents to install to:
npx add-skill https://github.com/armanzeroeight/fastagent-plugins/blob/main/plugins/nextjs-toolkit/skills/app-router-helper/SKILL.md -a claude-code --skill app-router-helperInstallation paths:
.claude/skills/app-router-helper/# App Router Helper
Implement Next.js App Router patterns for modern React applications.
## Quick Start
App Router (Next.js 13+) uses file-system routing in the `app/` directory with Server Components by default.
**Key concepts:**
- Server Components (default): Render on server, reduce bundle size
- Client Components ('use client'): Interactive, use hooks
- Layouts: Shared UI across routes
- Loading/Error: Automatic UI states
## Instructions
### Step 1: Understand File Structure
**Basic structure:**
```
app/
├── layout.tsx # Root layout (required)
├── page.tsx # Home page (/)
├── loading.tsx # Loading UI
├── error.tsx # Error UI
├── not-found.tsx # 404 page
└── about/
└── page.tsx # About page (/about)
```
**Special files:**
- `layout.tsx`: Shared UI, doesn't re-render
- `page.tsx`: Unique UI for route
- `loading.tsx`: Loading state (Suspense boundary)
- `error.tsx`: Error boundary
- `template.tsx`: Re-renders on navigation
- `route.ts`: API endpoint
### Step 2: Create Layouts
**Root layout (required):**
```typescript
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<Header />
{children}
<Footer />
</body>
</html>
);
}
```
**Nested layouts:**
```typescript
// app/dashboard/layout.tsx
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div>
<Sidebar />
<main>{children}</main>
</div>
);
}
```
**Layouts persist across navigation and don't re-render.**
### Step 3: Server vs Client Components
**Server Component (default):**
```typescript
// app/products/page.tsx
// No 'use client' = Server Component
async function ProductsPage() {
// Can fetch data directly
const products = await db.products.findMany();
return (
<div>
{products.map(p => (
<ProductCard key={p.id} produc