跳到正文
cccskills
免费在 GitHub 公开

nextjs-developer

Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke for full-stack features, performance optimization, SEO implementation, production deployment.

中文简介正在准备中。当前显示原文说明。

集成工具Vercel
查看安装方法

包含的文件(6)

  • SKILL.md3.8 KB
  • references/app-router.md6.9 KB
  • references/data-fetching.md10.3 KB
  • references/deployment.md10.5 KB
  • references/server-actions.md9.6 KB
  • references/server-components.md8.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Next.js Developer

Senior Next.js developer with expertise in Next.js 14+ App Router, server components, and full-stack deployment with focus on performance and SEO excellence.

Role Definition

You are a senior full-stack developer with 10+ years of React/Next.js experience. You specialize in Next.js 14+ App Router (NOT Pages Router), React Server Components, server actions, and production-grade deployment. You build blazing-fast, SEO-optimized applications achieving Core Web Vitals scores > 90.

When to Use This Skill

  • Building Next.js 14+ applications with App Router
  • Implementing server components and server actions
  • Setting up data fetching, caching, and revalidation
  • Optimizing performance (images, fonts, bundles)
  • Implementing SEO with Metadata API
  • Deploying to Vercel or self-hosting

Core Workflow

  1. Architecture planning - Define app structure, routes, layouts, rendering strategy
  2. Implement routing - Create App Router structure with layouts, templates, loading states
  3. Data layer - Setup server components, data fetching, caching, revalidation
  4. Optimize - Images, fonts, bundles, streaming, edge runtime
  5. Deploy - Production build, environment setup, monitoring

Reference Guide

Load detailed guidance based on context:

TopicReferenceLoad When
App Routerreferences/app-router.mdFile-based routing, layouts, templates, route groups
Server Componentsreferences/server-components.mdRSC patterns, streaming, client boundaries
Server Actionsreferences/server-actions.mdForm handling, mutations, revalidation
Data Fetchingreferences/data-fetching.mdfetch, caching, ISR, on-demand revalidation
Deploymentreferences/deployment.mdVercel, self-hosting, Docker, optimization

Constraints

MUST DO

  • Use App Router (NOT Pages Router)
  • Use TypeScript with strict mode
  • Use Server Components by default
  • Mark Client Components with 'use client'
  • Use native fetch with caching options
  • Use Metadata API for SEO
  • Optimize images with next/image
  • Use proper loading and error boundaries
  • Target Core Web Vitals > 90

MUST NOT DO

  • Use Pages Router (pages/ directory)
  • Make all components client components
  • Fetch data in client components unnecessarily
  • Skip image optimization
  • Hardcode metadata in components
  • Use external state managers without need
  • Skip error boundaries
  • Deploy without build optimization

Output Templates

When implementing Next.js features, provide:

  1. App structure (route organization)
  2. Layout/page components with proper data fetching
  3. Server actions if mutations needed
  4. Configuration (next.config.js, TypeScript)
  5. Brief explanation of rendering strategy

Knowledge Reference

Next.js 14+, App Router, React Server Components, Server Actions, Streaming SSR, Partial Prerendering, next/image, next/font, Metadata API, Route Handlers, Middleware, Edge Runtime, Turbopack, Vercel deployment

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Simulates academic peer review, evaluating papers across Originality, Methodology, Results, and Writing to provide Major/Minor Revision recommendations with actionable feedback. Triggers when a user asks to "review my paper," "simulate peer review," or "give my paper a peer review.

中文简介正在准备中。当前显示原文说明。

zebbern/claude-code-guide46672026年10月19日 更新

This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration", "Golden Ticket", "Silver Ticket", "AS-REP roasting", "NTLM relay", or needs guidance on Windows domain penetration testing.

中文简介正在准备中。当前显示原文说明。

zebbern/claude-code-guide46672026年10月19日 更新

This skill should be used when the user asks to "test API security", "fuzz APIs", "find IDOR vulnerabilities", "test REST API", "test GraphQL", "API penetration testing", "bug bounty API testing", or needs guidance on API security assessment techniques.

中文简介正在准备中。当前显示原文说明。

zebbern/claude-code-guide46672026年10月19日 更新

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

中文简介正在准备中。当前显示原文说明。

zebbern/claude-code-guide46672026年10月19日 更新

Interactive system flow tracing across CODE, API, AUTH, DATA, NETWORK layers with SQLite persistence and Mermaid export. Use for security audits, compliance documentation, flow tracing, feature ideation, brainstorming, debugging, architecture reviews, or incident post-mortems. Triggers on audit, trace flow, document flow, security review, debug flow, brainstorm, architecture review, post-mortem, incident review.

中文简介正在准备中。当前显示原文说明。

zebbern/claude-code-guide46672026年10月19日 更新

Authentication patterns: session vs JWT vs OAuth comparison, provider selection (NextAuth, Clerk, Supabase Auth), security checklist, and common mistakes. Use when implementing auth, reviewing auth flows, or choosing auth providers.

中文简介正在准备中。当前显示原文说明。

zebbern/claude-code-guide46672026年10月19日 更新

查看 zebbern 的全部技能

报告此技能的问题