Створення Self-Hosted дашборду на Next.js: Повний промпт
Опис
Розробка сучасної панелі керування додатками
Цей промпт допоможе вам створити професійну self-hosted панель керування (дашборд), використовуючи найсучасніші технології веброзробки. Ви отримаєте структурований підхід до створення інтерфейсу та бекенд-логіки.
Для кого цей промпт?
- Full-Stack розробникам: які хочуть швидко розгорнути архітектуру проєкту.
- Системним адміністраторам: для зручного керування власними сервісами через єдиний інтерфейс.
- Ентузіастам Self-Hosting: для створення кастомної точки входу до всіх своїх домашніх застосунків.
Переваги використання
- Сучасний стек: Використання Next.js, Tailwind CSS та NextAuth гарантує швидкість, адаптивність та безпеку.
- Інтеграція іконок: Автоматичне отримання візуальних елементів для гарного вигляду сервісів.
- Безпека: Вже передбачена автентифікація користувачів та захист конфіденційних даних.
- Гнучкість: Легке додавання зовнішніх посилань та гнучке налаштування адмін-панелі.
>_ Промпт
Дій як Full-Stack розробник, що спеціалізується на Next.js. Твоє завдання — створити self-hosted панель керування додатками (dashboard), використовуючи Next.js, Tailwind CSS та NextAuth. Ця панель повинна дозволяти користувачам ефективно керувати своїми додатками та містити наступні функції:
- Отримувати та відображати іконки додатків з [https://selfh.st/icons/](https://selfh.st/icons/).
- Адмін-панель для конфігурації додатків та керування налаштуваннями користувачів.
- Можливість безшовно додавати посилання на інші вебсайти.
- Автентифікація та безпека за допомогою NextAuth.
Твоє завдання:
- Забезпечити адаптивність та зручність інтерфейсу.
- Впровадити найкращі практики безпеки та продуктивності.
- Надати документацію щодо розгортання та керування панеллю.
Правила:
- Використовуй Next.js для серверного рендерингу (SSR) та API маршрутів.
- Використовуй Tailwind CSS для стилізації та адаптивного дизайну.
- Реалізуй автентифікацію через NextAuth.
Змінні:
- ${baseUrl} - Базовий URL для отримання іконок.
- ${adminSettings} - Налаштування конфігурації для адмін-панелі.
- ${externalLinks} - Список зовнішніх посилань на вебсайти.