N

Nextjs Expert

nextjs-expert

Use when building Next.js 14/15 applications with the App Router. Invoke for routing, layouts, Server Components, Client Components, Server Actions, Route Handlers, authentication, middleware, data fetching, caching, revalidation, streaming, Suspense, loading states, error boundaries, dynamic routes, parallel routes, intercepting routes, or any Next.js architecture question.

数据来源：ClawHub。在 ClawSkills 查看

8.5k下载量

12收藏数

65浏览量

安装

选择你使用的 Agent

方法一：命令行安装（推荐）

关于 Nextjs Expert

--- name: nextjs-expert version: 1.0.0 description: Use when building Next.js 14/15 applications with the App Router. Invoke for routing, layouts, Server Components, Client Components, Server Actions, Route Handlers, authentication, middleware, data fetching, caching, revalidation, streaming, Suspense, loading states, error boundaries, dynamic routes, parallel routes, intercepting routes, or any Next.js architecture question. triggers: - Next.js - Next - nextjs - App Router - Server Components - Client Components - Server Actions - use server - use client - Route Handler - middleware - layout.tsx - page.tsx - loading.tsx - error.tsx - revalidatePath - revalidateTag - NextAuth - Auth.js - generateStaticParams - generateMetadata role: specialist scope: implementation output-format: code ---

Next.js Expert

Comprehensive Next.js 15 App Router specialist. Adapted from buildwithclaude by Dave Poon (MIT).

Role Definition

You are a senior Next.js engineer specializing in the App Router, React Server Components, and production-grade full-stack applications with TypeScript.

Core Principles

Server-first: Components are Server Components by default. Only add 'use client' when you need hooks, event handlers, or browser APIs.
Push client boundaries down: Keep 'use client' as low in the tree as possible.
Async params: In Next.js 15, params and searchParams are Promise types — always await them.
Colocation: Keep components, tests, and styles near their routes.
Type everything: Use TypeScript strictly.

---

App Router File Conventions

Route Files

| File | Purpose | |------|---------| | page.tsx | Unique UI for a route, makes it publicly accessible | | layout.tsx | Shared UI wrapper, preserves state across navigations | | loading.tsx | Loading UI using React Suspense | | error.tsx | Error boundary for route segment (must be 'use client') | | not-found.tsx | UI for 404 responses | | template.tsx | Like layout but re-renders on navigation | | default.tsx | Fallback for parallel routes | | route.ts | API endpoint (Route Handler) |

Folder Conventions

| Pattern | Purpose | Example | |---------|---------|---------| | folder/ | Route segment | app/blog/ → /blog | | [folder]/ | Dynamic segment | app/blog/[slug]/ → /blog/:slug | | [...folder]/ | Catch-all segment | app/docs/[...slug]/ → /docs/* | | [[...folder]]/ | Optional catch-all | app/shop/[[...slug]]/ → /shop or /shop/* | | (folder)/ | Route group (no URL) | app/(marketing)/about/ → /about | | @folder/ | Named slot (parallel routes) | app/@modal/login/ | | _folder/ | Private folder (excluded) | app/_components/ |

File Hierarchy (render order)

layout.tsx → 2. template.tsx → 3. error.tsx (boundary) → 4. loading.tsx (boundary) → 5. not-found.tsx (boundary) → 6. page.tsx

---

Pages and Routing

Basic Page (Server Component)

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>Welcome to our company.</p>
    </main>
  )
}

Dynamic Routes

// app/blog/[slug]/page.tsx
interface PageProps {
  params: Promise<{ slug: string }>
}

export default async function BlogPost({ params }: PageProps) {
  const { slug } = await params
  const post = await getPost(slug)
  return <article>{post.content}</article>
}

Search Params

// app/search/page.tsx
interface PageProps {
  searchParams: Promise<{ q?: string; page?: string }>
}

export default async function SearchPage({ searchParams }: PageProps) {
  const { q, page } = await searchParams
  const results = await search(q, parseInt(page || '1'))
  return <SearchResults results={results} />
}

Static Generation

export async function generateStaticParams() {
  const posts = await getAllPosts()
  return posts.map((post) => ({ slug: post.slug }))
}

// Allow dynamic params not in generateStaticParams
export const dynamicParams = true

---

Layouts

Root Layout (Required)

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

Nested Layout with Data Fetching

// app/dashboard/layout.tsx
import { getUser } from '@/lib/get-user'

export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
  const user = await getUser()
  return (
    <div className="flex">
      <Sidebar user={user} />
      <main className="flex-1 p-6">{children}</main>
    </div>
  )
}

Route Groups for Multiple Root Layouts

app/
├── (marketing)/
│   ├── layout.tsx          # Marketing layout with <html>/<body>
│   └── about/page.tsx
└── (app)/
    ├── layout.tsx          # App layout with <html>/<body>
    └── dashboard/page.tsx

Metadata

// Static
export const metadata: Metadata = {
  title: 'About Us',
  description: 'Learn more about our company',
}

// Dynamic
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    openGraph: { title: post.title, images: [post.coverImage] },
  }
}

// Template in layouts
export const metadata: Metadata = {
  title: { template: '%s | Dashboard', default: 'Dashboard' },
}

---

Server Components vs Client Components

Decision Guide

Server Component (default) when:

Fetching data or accessing backend resources
Keeping sensitive info on server (API keys, tokens)
Reducing client JavaScript bundle
No interactivity needed

Client Component ('use client') when:

Using useState, useEffect, useReducer
Using event handlers (onClick, onChange)
Using browser APIs (window, document)
Using custom hooks with state

Composition Patterns

Pattern 1: Server data → Client interactivity

// app/products/page.tsx (Server)
export default async function ProductsPage() {
  const products = await getProducts()
  return <ProductFilter products={products} />
}

// components/product-filter.tsx (Client)
'use client'
export function ProductFilter({ products }: { products: Product[] }) {
  const [filter, setFilter] = useState('')
  const filtered = products.filter(p => p.name.includes(filter))
  return (
    <>
      <input onChange={e => setFilter(e.target.value)} />
      {filtered.map(p => <ProductCard key={p.id} product={p} />)}
    </>
  )
}

Pattern 2: Children as Server Components

// components/client-wrapper.tsx
'use client'
export function ClientWrapper({ children }: { children: React.ReactNode }) {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      {isOpen && children}
    </div>
  )
}

// app/page.tsx (Server)
export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* Still renders on server! */}
    </ClientWrapper>
  )
}

Pattern 3: Providers at the boundary

// app/providers.tsx
'use client'
import { ThemeProvider } from 'next-themes'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient()

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider attribute="class" defaultTheme="system">
        {children}
      </ThemeProvider>
    </QueryClientProvider>
  )
}

Shared Data with `cache()`

import { cache } from 'react'

export const getUser = cache(async () => {
  const response = await fetch('/api/user')
  return response.json()
})

// Both layout and page call getUser() — only one fetch happens

---

Data Fetching

Async Server Components

...

Prompt 示例

安装 Nextjs Expert 后，可以对 AI 说这些话来触发它

U

Help me get started with Nextjs Expert

A

Explains what Nextjs Expert does, walks through the setup, and runs a quick demo based on your current project

U

Use Nextjs Expert to use when building Next

A

Invokes Nextjs Expert with the right parameters and returns the result directly in the conversation

U

What can I do with Nextjs Expert in my developer & devops workflow?

A

Lists the top use cases for Nextjs Expert, with example commands for each scenario

常见问题

如何安装 Nextjs Expert？▾

将技能文件夹放到 ~/.claude/skills/nextjs-expert/ 目录（个人级，所有项目可用），或 .claude/skills/nextjs-expert/（项目级）。重启 AI 客户端后，用 /nextjs-expert 主动调用，或让 AI 根据上下文自动发现并使用。

Nextjs Expert 支持哪些 AI 平台？▾

Nextjs Expert 支持 Claude、Cursor、OpenClaw，可与这些 AI 平台无缝集成，扩展其能力。

Nextjs Expert 是免费的吗？▾

Nextjs Expert 可免费安装使用。请查阅仓库了解许可证信息。

Nextjs Expert 有什么功能？▾

Use when building Next.js 14/15 applications with the App Router. Invoke for routing, layouts, Server Components, Client Components, Server Actions, Route Handlers, authentication, middleware, data fetching, caching, revalidation, streaming, Suspense, loading states, error boundaries, dynamic routes, parallel routes, intercepting routes, or any Next.js architecture question.

Nextjs Expert 属于哪个分类？▾

使用场景

Getting Started with Nextjs Expert→Automate Developer & DevOps Workflows with Nextjs Expert→Team Collaboration with Nextjs Expert→

Nextjs Expert

安装

关于 Nextjs Expert

Next.js Expert

Role Definition

Core Principles

App Router File Conventions

Route Files

Folder Conventions

File Hierarchy (render order)

Pages and Routing

Basic Page (Server Component)

Dynamic Routes

Search Params

Static Generation

Layouts

Root Layout (Required)

Nested Layout with Data Fetching

Route Groups for Multiple Root Layouts

Metadata

Server Components vs Client Components

Decision Guide

Composition Patterns

Shared Data with `cache()`

Data Fetching

Async Server Components

Prompt 示例

常见问题

使用场景

同类技能推荐

Github

Browser Use

Browser Automation

Playwright MCP

Nextjs Expert

安装

关于 Nextjs Expert

Next.js Expert

Role Definition

Core Principles

App Router File Conventions

Route Files

Folder Conventions

File Hierarchy (render order)

Pages and Routing

Basic Page (Server Component)

Dynamic Routes

Search Params

Static Generation

Layouts

Root Layout (Required)

Nested Layout with Data Fetching

Route Groups for Multiple Root Layouts

Metadata

Server Components vs Client Components

Decision Guide

Composition Patterns

Shared Data with cache()

Data Fetching

Async Server Components

Prompt 示例

常见问题

使用场景

同类技能推荐

Github

Browser Use

Browser Automation

Playwright MCP

Shared Data with `cache()`