技能 react-nextjs-development
📦

react-nextjs-development

安全

构建 React 和 Next.js 应用程序

此技能提供结构化的工作流，用于使用 App Router、服务器组件和 TypeScript 开发现代 React 和 Next.js 应用程序。它指导您完成项目设置、组件架构、样式设计、数据获取、路由、表单、测试和部署。

支持: Claude Codex Code(CC)
🥉 73 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“react-nextjs-development”。 使用 App Router 和 TypeScript 创建 Next.js 14 项目

预期结果:

  • 使用 app/ 目录创建 App Router 的项目结构
  • 使用严格模式和正确的 tsconfig 路径配置 TypeScript
  • 安装 Tailwind CSS v4 并配置基础设置
  • 设置 ESLint 和 Prettier 并配置 React 专用规则
  • 生成基础布局和页面模板

正在使用“react-nextjs-development”。 构建带编辑功能的用户资料组件

预期结果:

  • 用于从 API 获取用户数据的服务器组件
  • 用于表单交互和状态管理的客户端组件
  • 带自定义错误消息的 Zod 资料验证模式
  • 带有正确类型推断的 React Hook Form 集成
  • 带编辑模态框的 Tailwind 样式响应式资料卡片

安全审计

安全
v1 • 2/24/2026

This skill is a documentation and workflow bundle containing only markdown content with usage prompts. Static analysis flagged 55 external_commands patterns and 11 cryptographic patterns, but all are FALSE POSITIVES - the backticks are markdown code formatting, not shell execution, and no cryptographic code exists. No security risks identified. Safe for publication.

1
已扫描文件
230
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

38
架构
100
可维护性
87
内容
50
社区
100
安全
83
规范符合性

你能构建什么

前端开发者构建仪表板

使用 Next.js App Router、用于数据获取的服务器组件以及用于响应式设计的 Tailwind CSS 创建现代化管理仪表板，并采用正确的组件架构。

全栈开发者启动 SaaS 项目

快速搭建带有 TypeScript 的新 SaaS 应用程序，实现认证流程，使用 Zod 设置表单验证，并部署到带有预览环境的 Vercel。

技术负责人建立开发标准

为采用 Next.js 14+ 的开发团队定义一致的 React 模式、组件架构指南、测试策略和代码质量门禁。

试试这些提示

初学者：创建新的 Next.js 项目 
Help me scaffold a new Next.js 14 project with App Router, TypeScript, and Tailwind CSS. Set up the basic folder structure with proper conventions for components, lib, and app directories.
中级：构建数据获取组件 
Create a Server Component that fetches data from an API endpoint and displays it in a list. Include proper error handling, loading states, and TypeScript types for the data structure.
高级：设置带验证的表单 
Build a multi-step form using React Hook Form with Zod schema validation. Include field-level error messages, form state persistence, and proper TypeScript integration for type-safe form data.
专家级：实现并行路由和拦截路由 
Set up Next.js App Router parallel routes for a dashboard layout with intercepting routes for modal dialogs. Include proper slot configurations and conditional rendering based on navigation context.

最佳实践

  • 默认使用服务器组件，仅在需要交互性时才切换到客户端组件
  • 为所有组件、props 和 API 响应实现正确的 TypeScript 类型，以便在编译时捕获错误
  • 遵循 colocated 原则，将组件、样式和测试一起保留在基于功能的目录中

避免

  • 当服务器组件可以更高效地处理时，避免使用 useEffect 进行数据获取
  • 不要将大型 JSON 对象作为客户端组件 props 传递 - 直接在组件中获取数据
  • 切勿跳过错误边界 - 始终为异步操作实现正确的错误处理

常见问题

Next.js 中 App Router 和 Pages Router 有什么区别？
App Router（在 Next.js 13 中引入）默认使用 app/ 目录和服务器组件，支持嵌套布局并提供更好的性能。Pages Router 使用 pages/ 目录，是较旧的路由系统。此技能专注于用于现代 Next.js 开发的 App Router。
什么时候应该使用服务器组件与客户端组件？
对于静态内容、数据获取和保持较小的 bundle 大小，默认使用服务器组件。仅在需要交互性（如 onClick 处理程序、useState、useEffect 或浏览器 API）时使用客户端组件。使用 'use client' 指令标记客户端组件。
Tailwind CSS v4 与 Next.js App Router 兼容吗？
是的，Tailwind CSS v4 与 Next.js App Router 完全兼容。v4 版本提供了改进的性能、新引擎和简化的配置。此技能包括用于 App Router 项目的 Tailwind v4 设置说明。
如何在服务器组件中处理身份验证？
认证与服务器组件无缝配合。您可以在服务器端读取会话 cookie、使用中间件保护路由以及将用户数据传递给组件。对于客户端身份验证检查，使用带有身份验证提供者 hooks 的客户端组件。
我可以在现有的 Next.js 13 项目中使用此技能吗？
是的，但某些模式可能有所不同。Next.js 13.4+ 支持 App Router，因此大多数概念适用。如果您使用的是仅带有 Pages Router 的旧版本，请考虑迁移到 App Router 以充分利用此技能的工作流。
此技能推荐什么测试框架？
此技能推荐使用 Vitest 进行单元和组件测试，因为它速度快且与 Vite 兼容。对于端到端测试，推荐使用 Playwright，因为它可靠且支持跨浏览器测试。两者都能很好地与 Next.js 项目集成。

开发者详情

作者

sickn33

许可证

MIT

仓库

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-nextjs-development

引用

main

文件结构

📄 SKILL.md