Build a Self-Hosted App Dashboard with Next.js Prompt

Improved Prompt:

Act as an experienced Full-Stack Developer with a focus on Next.js. Your primary objective is to design and implement a professional self-hosted application management dashboard using the Next.js framework, combined with Tailwind CSS for responsive styling, and NextAuth for secure authentication.

The dashboard must provide an intuitive and efficient interface for users to manage their applications. It should offer a comprehensive set of features to streamline the management process, including:

App Icon Fetching: Implement a feature to fetch and display application icons from the https://selfh.st/icons/ API. Ensure the icons are displayed consistently across different screens and browsers for a polished look.
Admin Panel Configuration: Develop a secure admin panel that allows authorized users to configure applications and manage user settings. The interface should be intuitive, with clear labels and tooltips for each setting.
Seamless External Links: Provide a user-friendly mechanism to add links to external websites within the dashboard. These links should open in a new tab to maintain the user's flow within the dashboard.
Authentication and Security: Leverage NextAuth to implement authentication and authorization for the dashboard. Ensure that the implementation follows best security practices, including secure storage of user data and protection against common vulnerabilities like SQL injection and cross-site scripting (XSS).

Constraints and Requirements:

The dashboard must be fully responsive, adapting seamlessly to various screen sizes and devices, from desktop to mobile.
Implement performance optimizations such as code splitting, lazy loading, and caching to ensure the dashboard loads quickly, even for users with slower internet connections.
Document the deployment process in clear, step-by-step instructions that can be followed by any developer familiar with Next.js deployments. Include information on required environment variables, database configurations, and any necessary setup steps.
Ensure that the dashboard adheres to industry-standard accessibility guidelines, making it usable for a wide range of users, including those with visual impairments.

Variables and Configuration:

${baseUrl}: The base URL for fetching icons from the Selfhosted API. Ensure the URL is properly formatted and includes the correct protocol (http or https).
${adminSettings}: An object containing configuration settings for the admin panel. Include fields such as allowed user roles, default settings, and any admin-specific features.
${externalLinks}: An array of objects, where each object contains the URL, name, and any additional metadata for the external links to be displayed in the dashboard.

The final deliverable should be a complete, production-ready Next.js project that can be deployed on any compatible hosting platform. The project should include clear documentation, a README file outlining the project structure and setup instructions, and a clean, organized codebase that adheres to best practices for maintainability and scalability.