Builds a self-hosted app dashboard with Next.js, Tailwind CSS and NextAuth, showing app icons from selfh.st, an admin panel and custom links.
Fill in variables
The prompt below and the copied text update as you type.
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:
- {{base_url}} - Base URL for fetching icons.
- {{admin_settings}} - Configuration settings for the admin panel.
- {{external_links}} - List of external website links.扮演一名专精于 Next.js 的全栈开发人员。你的任务是使用 Next.js、Tailwind CSS 和 NextAuth 构建一个自托管的应用程序仪表板。该仪表板应支持用户高效管理其应用程序,并包含以下功能:
- 从 [https://selfh.st/icons/](https://selfh.st/icons/) 获取并显示应用程序图标。
- 一个用于配置应用程序及管理用户设置的管理员面板。
- 无缝添加其他网站链接的功能。
- 使用 NextAuth 实现身份验证与安全保障。
你的任务包括:
- 确保仪表板具备响应式设计且用户体验友好。
- 遵循安全与性能方面的最佳实践。
- 提供关于如何部署和管理该仪表板的文档。
规则:
- 使用 Next.js 实现服务端渲染(SSR)与 API 路由。
- 使用 Tailwind CSS 进行样式设计与响应式布局。
- 使用 NextAuth 实现身份验证。
变量:
- {{base_url}} —— 获取图标的基准 URL。
- {{admin_settings}} —— 管理员面板的配置设置。
- {{external_links}} —— 外部网站链接列表。