Next.js 管理画面構築 - ChatGPTプロンプト

Next.js・Tailwind CSS・NextAuth を使ったセルフホスト型ダッシュボード設計を支援する ChatGPT プロンプト。要件整理から実装方針、セキュリティと運用ドキュメントまでまとめて指示できます。

1 閲覧0 コピー
共有:

プロンプト

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で試す

「ChatGPTで試す」ボタンを押すと、入力欄にプロンプトが自動入力された状態でChatGPTが開きます。

🚀 ここで試す

このプロンプトをサイト内で実行できます。

実行 1 回 = 1 ポイント
使用モデル: Gemini 2.5 Flash

※ 実行にはサインインが必要です(Google または メールリンク、初回 15 ポイント無料プレゼント)

使い方

  1. 1「ChatGPTで試す」ボタンを押すと、ChatGPTが自動で開き入力欄にプロンプトが貼り付けられます。
  2. 2または「プロンプトをコピー」ボタンで内容をコピーし、お好みのAIツールに貼り付けてください。
  3. 3必要に応じて、{ }で囲まれた部分を自分の内容に置き換えてください。
  4. 4送信して結果を確認します。

タグ

関連ガイド