#Next.js
43 条目
向 Next.js 与 PostgreSQL 添加 Better Auth 的提示
一个可复制粘贴的提示,用于为 Next.js App Router 项目添加 Better Auth 和 PostgreSQL 会话处理。
添加Cloudflare R2文件上传的提示
复制粘贴AI提示,为Next.js App Router项目添加Cloudflare R2预签名上传URL,并包含服务器端验证。
添加 Tailwind CSS v4 暗色模式的提示
AI 代理提示:使用 Tailwind CSS v4 CSS 变量和 next-themes 为 Next.js 应用添加系统感知的暗色模式,加载时无闪烁。
添加 PostgreSQL 全文搜索的提示
复制粘贴 AI 提示,为现有 Next.js 应用添加原生 PostgreSQL 全文搜索,使用 tsvector、GIN 索引和排序结果。
添加站点地图和robots.txt的提示词
AI代理提示词:为Next.js或Astro项目动态生成sitemap.xml和正确的robots.txt以改善搜索引擎索引。
在 Next.js 应用中添加 Stripe Checkout 的提示
AI 代理提示:为 Next.js App Router 项目添加 Stripe Checkout,包括 webhook 处理、客户门户和订阅状态。
构建Next.js AI工具目录的提示词
用于构建可搜索的Next.js AI工具目录的AI智能体提示词,支持MDX数据文件、分类筛选和静态生成。
使用 Next.js 构建 SaaS 定价页面的提示
复制粘贴 AI 提示,使用 Next.js 与 Tailwind 构建 SaaS 定价页面,包含账单切换和 Stripe 就绪的计划数据。
创建GitHub Actions部署工作流的提示词
AI代理提示词,用于生成一个包含类型检查、测试、构建和部署步骤的Next.js生产级GitHub Actions CI/CD工作流。
在 Next.js 中创建管理后台的提示词
AI 代理提示词,用于构建受保护的 Next.js 管理后台,包含数据表格、服务端认证守卫和使用 Tailwind 的侧边栏布局。
构建时生成 OG 图像的提示
AI 代理提示:在 Astro 或 Next.js 中使用 Satori 和 sharp 在构建时为每个页面生成 Open Graph 图像,无需外部服务。
将 Next.js 14 应用迁移到 Next.js 16 的提示
结构化 AI 代理提示,用于将 Next.js 14 App Router 项目迁移到 Next.js 16,处理破坏性变更并分步进行。
安全重构 React 组件的提示词
结构化 AI 代理提示词,用于通过阅读-审计-重构-验证循环安全地重构复杂 React 组件,防止回归问题。
Next.js SaaS 应用的 AGENTS.md 规则
一个即插即用的 AGENTS.md,让 AI 编码代理在 Next.js SaaS 代码库中保持栈和约定。
身份验证与安全的人工智能编码规则
AGENTS.md 中关于身份验证和安全的规则,可防止智能体使用自定义加密、泄露秘密或绕过授权检查。
PostgreSQL应用的AI编码规则
AGENTS.md规则,适用于PostgreSQL后端应用,涵盖查询安全、迁移规范、索引约定,以及防止代理编写N+1查询。
AI编码规则针对SEO内容网站
AGENTS.md规则针对以SEO为重点的内容网站,防止重复元数据,强制执行结构化数据,并防止代理破坏可爬取性。
静态网站性能的AI编码规则
用于静态网站性能的AGENTS.md规则,强制执行核心网页指标、图片优化、字体加载,并防止代理发送阻塞渲染的资源。
TypeScript严格模式项目的AI编码规则
适用于TypeScript严格模式项目的AGENTS.md规则,用于消除any类型、强制窄化模式,并防止代理生成编译通过但语义错误的代码。
Prisma 项目的 Claude Code 规则
适用于 Prisma ORM 项目的 Claude Code 规则,涵盖迁移安全性、查询模式、关联加载以及防止智能体破坏模式。
Tailwind CSS 和 shadcn/ui 的 Cursor 规则
强制遵循 Tailwind v4 约定和 shadcn/ui 组件模式的 Cursor 规则,防止代理重复发明已有的基础组件。
Prompt-to-PR: 添加定价页面
在Next.js Tailwind项目中生成包含月/年切换、功能矩阵和Stripe Checkout链接的生产级定价页面的标准操作流程。
Prompt-to-PR:为网站添加站点地图和robots.txt
为Next.js或Astro项目添加动态XML站点地图和robots.txt的标准操作流程——确保正确的lastmod、优先级以及生产环境SEO的爬取规则。
Prompt-to-PR:添加管理数据表
用于在Next.js中使用TanStack Table和PostgreSQL查询添加服务器端分页、可排序、可搜索的管理数据表的SOP——无ORM魔术。
Prompt-to-PR:为 Next.js 应用添加 Better Auth
完整的 SOP,用于将 Better Auth 接入 Next.js App Router 项目——一次性完成会话、邮箱/密码登录、OAuth 和中间件保护。
Prompt-to-PR: 添加Cloudflare R2文件上传
将预签名R2上传集成到Next.js或Cloudflare Workers应用中的端到端标准操作程序——存储桶绑定、预签名URL和客户端上传流程。
Prompt-to-PR: 添加深色模式
端到端标准操作流程,使用 next-themes 在 Next.js Tailwind 应用中实现无闪烁深色模式——采用 class 策略、系统偏好和持久化切换。
Prompt-to-PR:添加 PostgreSQL 全文搜索
SOP 用于添加原生 PostgreSQL 全文搜索,使用 tsvector、GIN 索引、ts_rank 和 Next.js 搜索 API — 无需第三方搜索服务。
Prompt-to-PR:将 Next.js 14 迁移至 16
分步 SOP,用于将 Next.js 14 App Router 项目迁移至 Next.js 16 — 涵盖 Turbopack、React 19、异步 API 和缓存变更。
审查AI生成的API路由清单
一份关于AI编码助手编写的REST和RPC API路由的人工审查清单——包括认证、输入验证、速率限制和错误处理。
AI生成认证代码审查清单
针对AI编码代理编写的认证代码的人工审查清单——涵盖会话、JWT、OAuth流程以及Web应用的授权逻辑。
审查AI生成的Next.js代码的检查清单
针对AI编码代理编写的Next.js代码的人工审查清单 — App Router、Server Components、数据获取和部署正确性。
审查AI生成的SEO页面的清单
针对由AI编码代理编写的SEO目标页面的人工审查清单——包括元数据、结构化数据、规范URL以及Astro和Next.js的核心网页指标。
AI生成的Stripe代码审核清单
针对AI编程助手所编写的Stripe集成代码的人工审核清单——涵盖webhook安全、幂等性、竞态条件和支付流程。
AI生成的Tailwind UI审查清单
由AI编程工具生成的Tailwind CSS UI组件的人工审查清单——包括无障碍、响应式、深色模式和清除安全。
如何修复AI导致的React水合不匹配
AI代理生成的React组件在服务器端和客户端渲染出不同的HTML,导致首次加载时出现水合错误和界面损坏。
如何修复AI忘记环境变量验证
AI代理直接读取process.env值而不进行验证,在环境变量缺失时导致静默的undefined错误,并且缺少启动时的错误提示。
如何修复AI忽略SEO元数据
AI代理在构建Next.js和Astro页面时,缺少标题标签、Open Graph元数据或规范URL,导致页面在搜索引擎和社交爬虫中不可见。
如何修复AI过度使用useEffect的问题
AI代理经常使用useEffect来处理派生状态、事件转换和数据获取,而这些本应使用useMemo、事件处理器或Server Components。
如何修复AI将服务器代码放入客户端组件
AI代理将数据库查询、秘密环境变量和Node.js API泄露到'use client'组件中,将仅服务器端逻辑暴露给浏览器包。
如何修复 AI 编码代理使用过时的 Next.js API
AI 代理经常生成使用已弃用的 Pages Router 模式、getServerSideProps 和已在 App Router 项目中删除的 API 的 Next.js 代码。
Next.js SaaS 启动器 — 上下文包
可复制的上下文包,适用于使用 App Router、Better Auth、Stripe 计费和 Postgres 的 Next.js SaaS 应用,确保你的 AI 代理从第一个提示开始就能正确工作。
PostgreSQL 搜索应用 — 上下文包
可复制的上下文包,用于基于 PostgreSQL 和 pgvector 的全文与向量搜索应用,让您的 AI 代理从一开始就能编写正确的 SQL 和迁移代码。