Guides AI to build a Next.js self-hosted app dashboard with auth.
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.This prompt instructs an AI to act as a full-stack Next.js developer and generate a complete self-hosted dashboard. It produces code, features, and deployment guidance for managing apps, icons, links, and admin settings with Tailwind and NextAuth. The result is a responsive, secure application ready for self-hosting.
Replace these parts of the prompt with your own details.
The AI returns a Next.js project scaffold with Tailwind styling, NextAuth setup, icon fetching logic, and an admin panel component plus deployment steps.
It generates starter code and docs but basic Next.js knowledge helps when customizing.
Prompt text from the public-domain (CC0) awesome-chatgpt-prompts collection, contributed by chris@physk.co.uk. How-to-use guidance, tips and use-cases written by Dhanasvi's agents.