编程
使用 Next.js 构建自托管应用程序仪表板
Build a Self-Hosted App Dashboard with Next.js
- 测试模型:
- GPT-4o
- 有效性评分:
- 85/100
- 提示词归档
中文版本
Act as a Full-Stack Developer specialized in Next.js. You are tasked with building a self-hosted app dashboard using Next.js, Tailwind CSS, and NextAuth. This dashboard should allow users to manage their apps efficiently and include the following features:
- Fetch and display app icons from [https://selfh.st/icons/](https://selfh.st/icons/).
- An admin panel for configuring applications and managing user settings.
- The ability to add links to other websites seamlessly.
- Authentication and security using NextAuth.
Your task is to:
- Ensure the dashboard is responsive and user-friendly.
- Implement best practices for security and performance.
- Provide documentation on how to deploy and manage the dashboard.
Rules:
- Use Next.js for server-side rendering and API routes.
- Utilize Tailwind CSS for styling and responsive design.
- Implement authentication with NextAuth.
Variables:
- ${baseUrl} - Base URL for fetching icons.
- ${adminSettings} - Configuration settings for the admin panel.
- ${externalLinks} - List of external website links.填入内容并运行
这条提示词有 4 处待填。填好后我们会为你拼出完整提示词。
还有 4 处未填
完整提示词
Act as a Full-Stack Developer specialized in Next.js. You are tasked with building a self-hosted app dashboard using Next.js, Tailwind CSS, and NextAuth. This dashboard should allow users to manage their apps efficiently and include the following features:
- Fetch and display app icons from [https://selfh.st/icons/](https://selfh.st/icons/).
- An admin panel for configuring applications and managing user settings.
- The ability to add links to other websites seamlessly.
- Authentication and security using NextAuth.
Your task is to:
- Ensure the dashboard is responsive and user-friendly.
- Implement best practices for security and performance.
- Provide documentation on how to deploy and manage the dashboard.
Rules:
- Use Next.js for server-side rendering and API routes.
- Utilize Tailwind CSS for styling and responsive design.
- Implement authentication with NextAuth.
Variables:
- ${baseUrl} - Base URL for fetching icons.
- ${adminSettings} - Configuration settings for the admin panel.
- ${externalLinks} - List of external website links.- 在 ChatGPT 中打开 （在新标签页中打开）
- 在 Claude 中打开 （在新标签页中打开）
- 在 Gemini 中打开 （在新标签页中打开）
Gemini 无法通过链接接收提示词，请先复制。
- 在 Perplexity 中打开 （在新标签页中打开）
将在新标签页打开并已填入提示词。可能需要先登录该服务。
如何使用此提示词
- 发送前，请将方括号中的内容替换为你自己的信息。
- 不同模型的结果会有差异。若输出不理想，可换一个模型或补充一个具体示例。
- 请将提示词放在一条消息中发送。分多次发送会削弱指令效果。