开发提示词生成
使用cursor开发独立站
用户
后台接口是strapi5开发的，前端开发用nextjs15，现在开始开发前端要给ai开发工具cursor写提示词，如何写才能让cursor最大程度符合要求，包括前台页面都使用服务器组件，用户中心使用客户端组件，通用错误处理，接口规范，比如strapi v5 结构已经扁平化没有.attribute了 等
AI 助手
为了让 Cursor 在开发过程中最大程度地符合你的要求，提示词需要清晰、具体，并且涵盖所有关键点。以下是一个详细的提示词模板，你可以根据需要进行调整：
---
### 项目背景
- **后台接口**：使用 Strapi v5 开发，接口结构已经扁平化，没有 `.attribute`。
- **前端框架**：使用 Next.js 15 开发，遵循最新的最佳实践。
- **组件规范**：
- **前台页面**：全部使用服务器组件（Server Components）。
- **用户中心**：使用客户端组件（Client Components）。
- **错误处理**：实现通用的错误处理机制，确保用户体验一致。
- **接口规范**：遵循 Strapi v5 的扁平化结构，确保接口调用正确。
### 开发要求
1. **服务器组件**：
- 所有前台页面（如首页、产品列表、文章详情等）必须使用服务器组件。
- 确保服务器组件的数据获取逻辑正确，使用 `fetch` 或 `axios` 调用 Strapi v5 接口。
- 遵循 Next.js 15 的服务器组件最佳实践，避免在服务器组件中使用客户端特性（如 `useState`、`useEffect` 等）。
2. **客户端组件**：
- 用户中心（如登录、注册、个人资料、订单管理等）必须使用客户端组件。
- 确保客户端组件的交互逻辑正确，使用 `useState`、`useEffect` 等 React Hooks。
- 遵循 Next.js 15 的客户端组件最佳实践，确保代码简洁高效。
3. **通用错误处理**：
- 实现统一的错误处理机制，包括网络错误、API 错误、用户输入错误等。
- 在页面或组件中展示友好的错误提示，确保用户体验一致。
- 使用 `try-catch` 或 `error boundaries` 捕获和处理错误。
4. **接口调用规范**：
- 使用 Strapi v5 的扁平化结构，直接访问字段，无需使用 `.attribute`。
- 确保接口调用的 URL 和参数正确，遵循 RESTful API 规范。
- 使用 `fetch` 或 `axios` 进行接口调用，确保代码可读性和可维护性。
5. **代码风格与规范**：
- 遵循一致的代码风格，使用 ESLint 和 Prettier 进行代码格式化。
- 确保代码注释清晰，关键逻辑有详细说明。
- 使用 TypeScript 进行类型检查，确保代码的健壮性。
### 示例代码
#### 服务器组件示例
// pages/index.tsx
import { fetchData } from '@/lib/api';
export default async function Home() {
const data = await fetchData('/api/posts');
return (
<div>
<h1>Posts</h1>
<ul>
{data.map((post: any) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
#### 客户端组件示例
// components/UserProfile.tsx
'use client';
import { useState, useEffect } from 'react';
import { fetchUser } from '@/lib/api';
export default function UserProfile() {
const [user, setUser] = useState(null);
useEffect(() => {
const loadUser = async () => {
try {
const data = await fetchUser('/api/users/me');
setUser(data);
} catch (error) {
console.error('Failed to fetch user:', error);
}
};
loadUser();
}, []);
if (!user) return <div>Loading...</div>;
return (
<div>
<h1>{user.username}</h1>
<p>{user.email}</p>
</div>
);
}
#### 通用错误处理示例
// lib/api.ts
export async function fetchData(url: string) {
try {
const response = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}${url}`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
return await response.json();
} catch (error) {
console.error('Fetch error:', error);
throw error;
}
}
### 其他注意事项
- **环境变量**：使用 `NEXT_PUBLIC_` 前缀暴露必要的环境变量，如 Strapi 的 API URL。
- **性能优化**：确保页面加载性能优化，使用 `next/image` 处理图片，避免不必要的重渲染。
- **测试**：编写单元测试和集成测试，确保代码的稳定性和可靠性。
---
### 提示词总结
- **明确技术栈**：Strapi v5 + Next.js 15。
- **组件分工**：服务器组件用于前台页面，客户端组件用于用户中心。
- **错误处理**：统一的错误处理机制。
- **接口规范**：遵循 Strapi v5 的扁平化结构。
- **代码风格**：使用 ESLint、Prettier 和 TypeScript。
- **示例代码**：提供服务器组件、客户端组件和错误处理的示例代码。