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が開きます。
🚀 ここで試す
このプロンプトをサイト内で実行できます。
※ 実行にはサインインが必要です(Google または メールリンク、初回 15 ポイント無料プレゼント)
使い方
- 1「ChatGPTで試す」ボタンを押すと、ChatGPTが自動で開き入力欄にプロンプトが貼り付けられます。
- 2または「プロンプトをコピー」ボタンで内容をコピーし、お好みのAIツールに貼り付けてください。
- 3必要に応じて、{ }で囲まれた部分を自分の内容に置き換えてください。
- 4送信して結果を確認します。
タグ
関連ガイド
📖📖📖
プロンプトとは?意味・書き方・コツを徹底解説【AI初心者向け完全ガイド】
プロンプトの意味から書き方の5つのコツ、よくある失敗例、業務活用事例まで網羅した完全ガイド。ChatGPT・Claude・Gemini・Stable Diffusion・Midjourney・DALL-E対応の具体例つきでAIプロンプトを基礎から実践まで学べます。
ChatGPTプロンプト集|画像生成・文章作成・SEOで使える無料テンプレート
ChatGPTで使える実用プロンプトテンプレート集。画像生成、写真編集、SNS投稿、SEO記事、文章作成、プロンプト改善まで、用途別にコピペ例と変数の書き換え方を解説。
プロンプトは「コード」ではない — ヴィトゲンシュタインに学ぶAI対話の本質
なぜあなたのプロンプトは機能しないのか?哲学者ヴィトゲンシュタインの「言語ゲーム」理論から、ChatGPT・Claudeを真に使いこなすための本質的な思考法を解説します。