ZGI 市场
登录注册账号
插件版本 1.0.1

nextjs-expert

Next.js development expertise with skills for App Router, Server Components, Route Handlers, Server Actions, and authentication patterns

商品介绍

# Next.js Expert Plugin A comprehensive Claude Code plugin providing Next.js development expertise with skills for App Router, Server Components, Route Handlers, Server Actions, and authentication patterns. ## Features - **5 Skills** covering core Next.js App Router concepts - **3 Commands** for common development tasks - **Progressive disclosure** with references and examples - **Next.js 15** compatible patterns ## Installation Add to your Claude Code settings: ```json { "plugins": [ "https://github.com/davepoon/buildwithclaude/tree/main/plugins/nextjs-expert" ] } ``` ## Skills ### app-router File-based routing, layouts, metadata, and route organization for Next.js App Router. **Topics covered:** - File conventions (page.tsx, layout.tsx, loading.tsx, error.tsx) - Dynamic routes and catch-all segments - Parallel routes and intercepting routes - Route groups and organization ### server-components React Server Components patterns and when to use server vs client components. **Topics covered:** - Server vs Client component decision guide - 'use client' boundaries - Composition patterns - Data fetching in server components ### route-handlers API route handlers in the app directory. **Topics covered:** - HTTP method handlers (GET, POST, PUT, PATCH, DELETE) - Request/response handling - Streaming responses - CORS and authentication ### server-actions Server Actions for form handling and mutations. **Topics covered:** - 'use server' directive - Form handling with useFormState - Validation with Zod - Revalidation patterns ### auth-patterns Authentication patterns for Next.js applications. **Topics covered:** - NextAuth.js v5 setup - Middleware-based route protection - Session management - Role-based access control ## Commands ### /nextjs-expert:scaffold Scaffold Next.js components following best practices. ``` /nextjs-expert:scaffold ``` Scaffolds pages, components, API routes, and more following App Router conventions. ### /nextjs-expert:add-auth Add authentication to a Next.js application. ``` /nextjs-expert:add-auth ``` Sets up NextAuth.js with providers, middleware, and protected routes. ### /nextjs-expert:optimize Analyze and optimize Next.js application performance. ``` /nextjs-expert:optimize ``` Reviews component boundaries, data fetching, caching, and provides recommendations. ## Directory Structure ``` nextjs-expert/ ├── .claude-plugin/ │ └── plugin.json ├── skills/ │ ├── app-router/ │ │ ├── SKILL.md │ │ ├── references/ │ │ │ ├── routing-conventions.md │ │ │ ├── layouts-templates.md │ │ │ └── loading-error-states.md │ │ └── examples/ │ │ ├── dynamic-routes.md │ │ └── parallel-routes.md │ ├── server-components/ │ │ ├── SKILL.md │ │ ├── references/ │ │ │ ├── server-vs-client.md │ │ │ └── composition-patterns.md │ │ └── examples/ │ │ └── data-fetching-patterns.md │ ├── route-handlers/ │ │ ├── SKILL.md │ │ ├── references/ │ │ │ ├── http-methods.md │ │ │ └── streaming-responses.md │ │ └── examples/ │ │ └── crud-api.md │ ├── server-actions/ │ │ ├── SKILL.md │ │ ├── references/ │ │ │ ├── form-handling.md │ │ │ └── revalidation.md │ │ └── examples/ │ │ └── mutation-patterns.md │ └── auth-patterns/ │ ├── SKILL.md │ ├── references/ │ │ ├── middleware-auth.md │ │ └── session-management.md │ └── examples/ │ └── nextauth-setup.md ├── commands/ │ ├── scaffold.md │ ├── add-auth.md │ └── optimize.md └── README.md ``` ## Usage Examples ### Building a new page Ask Claude: > "Create a blog post page with dynamic routing" Claude will use the `app-router` and `server-components` skills to generate: - `app/blog/[slug]/page.tsx` with proper async params - Loading and error states - Metadata generation ### Adding authentication Ask Claude: > "Add GitHub and Google authentication to my app" Or use the command: > "/nextjs-expert:add-auth" Claude will use the `auth-patterns` skill to set up: - NextAuth.js configuration - Middleware protection - Login/logout components ### Optimizing performance Ask Claude: > "Review my app for performance issues" Or use the command: > "/nextjs-expert:optimize" Claude will analyze: - Client/server component boundaries - Data fetching patterns - Caching strategies - Bundle size ## Contributing Contributions welcome! Please follow the existing skill structure and include: - SKILL.md with frontmatter and core content - References for detailed documentation - Examples with working code patterns ## License MIT

价格

免费

  • 安装：免费

在组织开通时一次性收取；再次读取清单或下载不重复收费。

以上为公开标价。你的组织可能有协议价，以控制台显示的价格为准。

如何使用

  1. 为组织安装

    开通即安装：组织固定使用开通时的版本（当前为 1.0.1），它包含的商品会一并开通。

  2. 创建凭证

    客户端使用组织凭证读取；绑定到数字人后，数字人使用绑定凭证按需加载。请求中携带：

    Authorization: Bearer $ZGI_MARKET_KEY

  3. 读取清单与安装包

    清单列出版本、文件和校验值；安装包是一个 zip 文件。

    读取清单
    curl "https://market-api.zgi.im/v1/market/plugins/nextjs-expert/manifest" \
  -H "Authorization: Bearer $ZGI_MARKET_KEY"
    下载安装包
    curl "https://market-api.zgi.im/v1/market/plugins/nextjs-expert/package" \
  -H "Authorization: Bearer $ZGI_MARKET_KEY" \
  -o nextjs-expert.zip

    读取清单和下载安装包不计入用量。下载后请用响应头中的 SHA-256 校验文件。

插件清单

名称
nextjs-expert
版本
1.0.0
作者
BuildWithClaude Community
说明
Next.js development expertise with skills for App Router, Server Components, Route Handlers, Server Actions, and authentication patterns
格式
Claude CodeAgent Plugins（Codex 等）
安装包
附带可安装的插件包

插件包内容

技能
5
命令
0
智能体
0
MCP 服务
0
钩子
0

包含的商品

安装插件时会同时为你的组织开通它包含的商品，每个商品按各自的价格和用量计费。

来源与审核

审核状态
尚未审核，内容来自上游来源
来源文档
https://github.com/davepoon/buildwithclaude
源代码仓库
https://github.com/davepoon/buildwithclaude
许可证
MIT

审核状态是平台对上架信息的记录，不构成对上游服务质量或可用性的担保。

相关商品