Agent skill

app-router

Next.js App Router - Server components, layouts, routing patterns

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/app-router

SKILL.md

App Router Skill

Overview

Master Next.js 14+ App Router with server components, layouts, and modern routing patterns.

Capabilities

  • Layouts: Root layout, nested layouts, templates
  • Server Components: Default server rendering
  • Client Components: Interactive with 'use client'
  • Route Groups: (folder) for organization
  • Parallel Routes: @slot for simultaneous rendering
  • Intercepting Routes: (.) notation patterns

Examples

tsx
// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// app/dashboard/page.tsx
export default async function DashboardPage() {
  const data = await fetchData() // Server-side
  return <Dashboard data={data} />
}

Best Practices

  • Use server components by default
  • Add 'use client' only when needed
  • Leverage layouts for shared UI
  • Use loading.tsx for suspense

Didn't find tool you were looking for?

Be as detailed as possible for better results