nextjs-提示词#

Data: 2026-02-22 21:32:01

Next.js AI 开发者提示词实例#

项目初始化与配置#

1. 创建 Next.js 项目

使用 create-next-app 创建一个新的 Next.js 14 项目，使用 TypeScript、Tailwind CSS、App Router，不使用 src 目录

• 快速启动标准 Next.js 项目

2. 配置项目基础设置

为这个 Next.js 项目配置 ESLint、Prettier 和 Husky git hooks，确保代码规范

• 配置代码质量工具链

3. 环境变量配置

创建 .env.example 文件，列出 Next.js 项目常用的环境变量，包括数据库连接、API密钥等，并说明哪些需要 NEXT_PUBLIC_ 前缀

• 管理敏感配置信息

4. 自定义 App 配置

配置 next.config.ts，设置图片域名、重写规则、压缩选项、实验性功能开关

• 自定义 Next.js 核心配置

5. TypeScript 路径别名

配置 tsconfig.json 的 paths 别名，使用 @/ 指向 src 目录，简化导入路径

• 简化模块导入路径

App Router 与页面路由#

6. 创建页面路由

在 app 目录下创建一个 /dashboard 路由页面，使用 React Server Component，并获取并展示用户数据

• 创建服务器组件页面

7. 动态路由

创建一个动态路由 [slug] 页面，用于展示博客文章内容，使用 generateStaticParams 预生成静态页面

• 实现动态内容页面

8. 嵌套路由与布局

创建一个带有侧边栏布局的后台管理系统，使用 layout.tsx 实现共享布局，包含 /dashboard/posts 和 /dashboard/settings 子路由

• 创建共享布局结构

9. 路由组 (Route Groups)

使用路由组 (Route Groups) 将营销页面和后台页面分开，各自有独立的布局，但不影响 URL 结构

• 组织路由而不改 URL

10. 并行路由与插槽

使用 Parallel Routes 实现一个带有通知面板和用户面板的仪表板页面

• 同时渲染多个页面组件

11. 拦截路由

使用 Intercepting Routes 实现一个模态框图片预览功能，点击图片时显示模态框，刷新时显示独立页面

• 拦截路由显示模态框

12. 可选段路由

创建可选段 [[...slug]] 路由，实现可匹配多层级或空路径的灵活路由

• 灵活匹配多级路径

13. 路由处理程序重定向

创建 app/api/old-route/route.ts，实现 301 永久重定向到新地址

• API 路由实现重定向

14. useRouter 客户端导航

在客户端组件中使用 useRouter hook 实现编程式导航、刷新、后退等操作

• 客户端控制页面跳转

15. usePathname 获取当前路径

使用 usePathname 获取当前 URL 路径，实现导航栏高亮当前选中项

• 获取并使用当前路径

16. not-found 页面

创建 app/not-found.tsx 自定义 404 页面，包含友好提示和返回首页按钮

• 自定义 404 错误页面

17. error 边界页面

创建 app/error.tsx 错误边界页面，捕获子组件错误并显示友好提示

• 处理渲染错误页面

18. loading 加载状态

创建 app/loading.tsx 加载页面，在内容加载时显示骨架屏动画

• 显示加载状态界面

19. 模板模板 (Template)

使用 template.tsx 创建可重置状态的布局，适用于动画或页面进入效果

• 可重置的布局模板

数据获取#

20. Server Component 获取数据

编写一个 React Server Component，使用 async/await 直接在组件中获取数据库数据并展示

• 服务器组件直接取数

21. 使用 fetch API 缓存策略

使用 Next.js 14 的 fetch API 从外部 API 获取数据，分别演示：

- 强制缓存 (force-cache)

- 重新验证 (revalidate)

- 无缓存 (no-store)

三种策略

• 配置数据缓存策略

22. 路由处理程序 (Route Handlers)

创建一个 app/api/posts/route.ts API 路由，实现 GET 和 POST 方法来处理博客文章的列表和创建

• 创建 REST API 端点

23. 服务器动作 (Server Actions)

使用 Server Actions 实现一个表单提交功能，在服务器端处理数据并返回结果，同时实现表单验证

• 服务器端处理表单

24. useOptimistic 乐观更新

使用 useOptimistic hook 配合 Server Actions 实现乐观更新，立即更新 UI 无需等待服务器响应

• 立即更新提升体验

25. useFormState 表单状态

使用 useFormState 处理 Server Actions 返回的表单验证错误和成功消息

• 管理表单提交状态

26. 动态数据缓存

使用 generateStaticParams 和动态渲染策略混合，实现部分静态生成部分动态的页面

• 混合静动态渲染

27. Streaming 流式渲染

使用 Suspense 实现 Streaming 流式渲染，将页面分成多个部分依次加载

• 分块流式加载内容

28. revalidateTag 标签重验证

使用 revalidateTag 通过标签手动触发数据重新验证，更新缓存数据

• 按标签清除缓存

29. revalidatePath 路径重验证

使用 revalidatePath 重新验证指定路径的所有数据缓存

• 按路径刷新缓存

30. cookies 读取与设置

在 Server Component 和 Route Handler 中使用 cookies() 函数读取和设置 cookie

• 操作 cookie 数据

31. headers 读取请求头

使用 headers() 函数获取请求头信息，如 user-agent、x-forwarded-for 等

• 获取 HTTP 请求头

认证与授权#

32. NextAuth.js 集成

集成 next-auth 到 Next.js 项目中，配置 Google OAuth 登录，实现受保护的路由和获取 session

• 添加用户认证功能

33. 中间件认证

使用 Next.js Middleware 实现路由保护，未登录用户自动重定向到登录页，并排除静态资源路由

• 中间件层保护路由

34. Supabase Auth 集成

集成 Supabase 认证到 Next.js 项目，创建登录、注册、登出功能，并创建一个受保护的页面

• Supabase 用户认证

35. Clerk 认证集成

集成 Clerk 认证服务，配置社交登录、邮箱验证码登录，实现用户资料管理

• 使用 Clerk 认证服务

36. ** Lucia Auth 集成**

使用 Lucia Auth 库实现自定义认证系统，支持多种登录方式

• 自建认证系统

37. Server Component 获取 Session

在 React Server Component 中获取当前用户 session，根据登录状态渲染不同内容

• 服务端获取用户信息

38. Client Component 获取 Session

在客户端组件中使用 useSession hook 获取 session，响应式更新登录状态

• 客户端使用 session

39. 角色权限控制

实现基于角色的权限控制 (RBAC)，区分管理员和普通用户权限

• 管理用户权限级别

40. JWT 令牌验证

在 API Route 中验证 JWT 令牌，确保 API 调用安全

• 验证 API 请求安全

数据库与 ORM#

41. Prisma 配置与使用

配置 Prisma ORM 连接 PostgreSQL 数据库，创建 User 和 Post 模型，并编写 CRUD 操作示例

• 使用 Prisma 操作数据库

42. Drizzle ORM 配置

使用 Drizzle ORM 配置数据库，创建 schema 和查询示例，包含类型安全的 SQL 查询

• 轻量级 ORM 方案

43. Supabase 数据操作

使用 Supabase JavaScript 客户端进行数据操作，包含：

- 查询数据 (select)

- 插入数据 (insert)

- 更新数据 (update)

- 删除数据 (delete)

- 实时订阅

• Supabase 客户端操作

44. Prisma 关系查询

使用 Prisma 进行关联查询，包含一对一、一对多、多对多关系示例

• 查询关联数据模型

45. Prisma 事务处理

使用 Prisma $transaction 执行数据库事务，确保数据一致性

• 执行原子性事务操作

46. Prisma 分页查询

使用 Prisma 实现游标分页和偏移分页两种分页方式

• 大数据分页查询

47. PostgreSQL 全文搜索

使用 PostgreSQL 全文搜索功能，结合 Prisma 实现高效的关键词搜索

• 实现全文搜索功能

48. Redis 缓存集成

集成 Redis 缓存热点数据，减少数据库查询压力

• 使用 Redis 加速查询

49. PlanetScale 数据库

配置 PlanetScale MySQL 数据库，使用 Prisma 连接和操作数据

• 使用 PlanetScale 服务

50. Vercel Postgres 配置

配置 Vercel Postgres 数据库，连接 Next.js 项目进行数据操作

• Vercel 官方数据库

UI 组件与样式#

51. Tailwind CSS 组件

使用 Tailwind CSS 创建一个可复用的 Card 组件，包含标题、内容、图片和操作按钮

• 创建可复用 UI 组件

52. shadcn/ui 集成

集成 shadcn/ui 组件库到项目中，并安装 Button、Input、Dialog 组件，创建一个示例表单

• 使用 shadcn/ui 组件

53. 客户端组件与状态管理

创建一个带有表单状态的客户端组件 ('use client')，使用 useState 和 useEffect 管理状态和副作用

• 管理客户端状态

54. 动画与过渡效果

使用 Framer Motion 为 Next.js 页面切换和组件显隐添加动画效果

• 添加交互动画效果

55. 组合组件 Compound Components

使用 Compound Components 模式创建灵活的组合组件，如 Tabs、Accordion

• 灵活的组合组件

56. Context 跨组件状态

使用 React Context 创建主题切换功能，在全局切换深色/浅色模式

• 管理全局状态

57. Zod 表单验证

使用 Zod 库定义表单验证 schema，配合 react-hook-form 实现类型安全的表单验证

• 表单数据验证

58. React Hook Form 使用

使用 react-hook-form 管理表单状态，实现高性能的表单处理

• 高性能表单管理

59. Radix UI 组件

使用 Radix UI 无样式组件库创建可访问的 Dialog、Dropdown、Tooltip 组件

• 无障碍 UI 组件

60. 主题切换功能

实现深色/浅色模式切换，使用 next-themes 库持久化用户选择

• 切换深色浅色主题

61. 响应式布局

使用 Tailwind CSS 创建响应式布局，适配移动端、平板和桌面端

• 多设备适配布局

62. 图片懒加载

实现图片懒加载，使用 Intersection Observer API 或 next/image 原生支持

• 优化图片加载

63. 无限滚动

使用 Intersection Observer 实现无限滚动加载更多内容

• 无限加载内容列表

64. 拖放功能

使用 @dnd-kit 库实现拖拽排序功能，如任务列表排序

• 拖拽排序交互

65. Markdown 渲染

使用 react-markdown 或 next-mdx-remote 渲染 Markdown 内容

• 渲染 Markdown 内容

66. 富文本编辑器

集成 TipTap 或 Slate 富文本编辑器，支持文本格式化

• 富文本编辑功能

67. 图标库集成

集成 lucide-react 或 heroicons 图标库，使用 SVG 图标

• 使用现代图标库

68. 日期选择器

使用 react-day-picker 或 shadcn/ui calendar 实现日期选择功能

• 日期选择交互

69. 数据表格

使用 TanStack Table 创建功能强大的数据表格，支持排序、筛选、分页

• 数据展示表格组件

70. 图表可视化

使用 Recharts 或 Chart.js 创建数据可视化图表

• 数据图表展示

性能优化#

71. 图片优化

使用 next/image 组件优化图片加载，配置远程图片域名，设置响应式图片和占位符

• 优化图片加载性能

72. 代码分割与动态导入

使用动态导入 (dynamic import) 按需加载组件，减小首屏 bundle 大小，示例加载一个重型图表组件

• 按需加载组件

73. ISR 增量静态再生成

配置 Incremental Static Regeneration (ISR)，实现页面在后台自动重新生成，设置 revalidate 时间为 60 秒

• 增量更新静态页面

74. SSG 静态生成

使用 generateStaticParams 在构建时预生成所有动态页面

• 构建时预生成页面

75. SSR 服务端渲染

使用动态渲染实现服务器端渲染，确保每次请求都获取最新数据

• 服务器端实时渲染

76. SWR 数据获取

使用 SWR 库管理客户端数据请求，自动缓存、重新验证、乐观更新

• 客户端数据管理

77. React Query 数据获取

使用 TanStack Query (React Query) 管理服务器状态，实现高效的数据同步

• 强大的数据状态管理

78. 预连接 Prefetch

使用 next/link 的 prefetch 属性或 router.prefetch 预加载页面资源

• 预加载提升导航速度

79. 字体优化

使用 next/font 优化字体加载，自动子集化、减少布局偏移

• 优化字体加载

80. Bundle 分析

配置 @next/bundle-analyzer 分析 bundle 大小，找出可优化的模块

• 分析打包体积

81. 移除未使用代码

配置 Tree Shaking 和 sideEffects，移除未使用的代码

• 剔除无用代码

82. 缓存策略优化

配置 Cache-Control 头部，优化静态资源缓存

• 配置资源缓存策略

83. 虚拟化长列表

使用 react-window 或 react-virtual 虚拟化渲染长列表，只渲染可见区域

• 大数据列表优化

84. 防抖和节流

使用防抖 (debounce) 和节流 (throttle) 优化频繁触发的事件

• 优化高频事件处理

85. memo 和 useMemo 优化

使用 React.memo 和 useMemo 避免不必要的重渲染

• 避免不必要的渲染

部署与 DevOps#

86. Vercel 部署配置

为 Vercel 部署创建 vercel.json 配置文件，配置重写、重定向、头部和环境变量

• Vercel 部署配置

87. Docker 容器化

创建 Dockerfile 和 docker-compose.yml，将 Next.js 应用容器化，支持开发和生产环境

• 容器化应用

88. CI/CD 配置

使用 GitHub Actions 配置 CI/CD 流程，包含：运行测试、类型检查、ESLint 检查、自动部署到 Vercel

• 自动化部署流程

89. Netlify 部署

配置 Netlify 部署 Next.js 应用，设置环境变量和重定向规则

• Netlify 平台部署

90. 环境变量管理

配置多环境变量：开发环境、预发布环境、生产环境，使用 .env.local、.env.production

• 多环境配置管理

91. Sentry 错误监控

集成 Sentry 监控应用错误，收集错误堆栈和用户上下文

• 错误监控追踪

92. 日志管理

配置结构化日志，使用 pino 或 winston 记录应用日志

• 日志收集管理

93. 健康检查端点

创建 app/api/health/route.ts 健康检查端点，用于监控服务状态

• 服务状态监控

94. 备份策略

配置数据库自动备份策略，使用 Vercel Postgres 或 Supabase 备份功能

• 数据备份方案

95. 回滚策略

配置 Vercel 回滚机制，快速回滚到上一个稳定版本

• 版本回滚方案

测试与调试#

96. 测试配置

配置 Jest 和 React Testing Library 用于 Next.js 测试，编写组件测试和 API 路由测试示例

• 单元测试配置

97. Playwright E2E 测试

配置 Playwright 进行端到端测试，编写测试用例：用户登录流程、表单提交、导航跳转

• 端到端测试

98. Vitest 测试配置

使用 Vitest 替代 Jest 配置测试，获得更快的测试速度

• 快速测试框架

99. 测试覆盖率

配置测试覆盖率报告，使用 Istanbul 或 c8 生成覆盖率报告

• 测试覆盖率统计

100. React DevTools 使用

使用 React DevTools 调试组件树、props、state 和性能

• React 组件调试

101. Next.js Debug 模式

开启 Next.js 调试模式，输出详细的构建和渲染日志

• 详细调试信息

102. 性能分析

使用 Chrome DevTools Performance 面板分析应用性能瓶颈

• 性能瓶颈分析

103. 网络请求调试

使用 Chrome DevTools Network 面板分析 API 请求和响应

• 网络请求调试

SEO 和元数据#

104. 生成静态元数据

使用 generateMetadata 函数生成动态页面的 meta 标签、title、description

• 页面 SEO 元数据

105. Open Graph 标签

配置 Open Graph 标签，优化社交分享时的预览效果

• 社交分享优化

106. JSON-LD 结构化数据

添加 JSON-LD 结构化数据，帮助搜索引擎理解页面内容

• 搜索结果优化

107. sitemap 生成

使用 next-sitemap 生成 sitemap.xml，帮助搜索引擎爬虫

• 站点地图生成

108. robots.txt 配置

创建 app/robots.ts 配置爬虫访问规则

• 爬虫规则配置

109. Canonical URL

设置 canonical URL，避免重复内容问题

• 规范 URL 设置

110. hreflang 多语言

配置 hreflang 标签，支持多语言 SEO

• 多语言 SEO 配置

常用完整任务提示词#

111. 完整功能开发

开发一个博客系统，包含以下功能：

- 使用 App Router 创建页面

- Prisma ORM + PostgreSQL

- 文章列表、详情、创建、编辑、删除

- Markdown 渲染支持

- 图片上传

- 用户认证 (NextAuth.js)

- 受保护的管理后台

- ISR 静态生成

• 完整博客系统开发

112. 代码审查与重构

审查这个 Next.js 项目的代码，找出：

- 性能问题

- 安全隐患

- 代码规范问题

- 可以使用 Next.js 最佳实践优化的地方

并提供重构建议

• 代码质量审查

113. Bug 修复

分析这个 Next.js 应用中的错误：[错误信息]，找出可能的原因并提供修复方案。考虑：

- 客户端 vs 服务器组件问题

- 数据获取时机

- 状态管理问题

- 环境变量配置

• 排查修复错误

114. 电商产品页面

创建电商产品列表和详情页面，包含：产品筛选、排序、搜索、购物车功能

• 电商页面开发

115. 用户仪表板

创建用户仪表板页面，包含：数据统计图表、最近活动、快捷操作

• 数据看板开发

116. 文件上传功能

实现图片上传功能，使用 Server Actions 和云存储 (S3/Cloudinary/R2)

• 文件上传到云端

117. 实时聊天功能

使用 Pusher 或 Supabase Realtime 实现实时聊天功能

• 实时通讯功能

118. 邮件发送

使用 Resend 或 Nodemailer 发送邮件，如欢迎邮件、密码重置

• 邮件发送功能

119. PDF 生成

使用 react-pdf 或 puppeteer 生成 PDF 文档

• PDF 文档生成

120. Excel 导出

使用 xlsx 库导出数据到 Excel 文件

• 数据导出 Excel

121. CSV 导入导出

实现 CSV 文件的导入和导出功能

• CSV 数据交换

122. 支付集成

集成 Stripe 支付功能，实现单次支付和订阅

• 在线支付功能

123. 日历功能

创建日历组件，支持事件添加、编辑、拖拽

• 日程管理功能

124. 通知系统

实现通知系统，包含：站内通知、邮件通知、浏览器推送

• 消息通知系统

125. 多语言 i18n

使用 next-intl 或 i18next 实现多语言支持

• 国际化多语言

126. A/B 测试

使用 Vercel Edge Functions 实现 A/B 测试

• A/B 测试功能

127. 功能开关

实现功能开关系统，动态控制功能启用/禁用

• 功能开关管理

128. 审计日志

实现用户操作审计日志，记录关键操作

• 操作日志记录

129. 数据迁移

编写数据库迁移脚本，安全迁移数据结构

• 数据库迁移

130. API 集成

集成第三方 API (如 GitHub、Twitter、Notion)，实现 OAuth 登录和数据同步

• 第三方 API 对接

- end -#