[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tool-adrianhajdin--project_next_14_ai_prompt_sharing":3,"similar-adrianhajdin--project_next_14_ai_prompt_sharing":90},{"id":4,"github_repo":5,"name":6,"description_en":7,"description_zh":8,"ai_summary_zh":8,"readme_en":9,"readme_zh":10,"quickstart_zh":11,"use_case_zh":12,"hero_image_url":13,"owner_login":14,"owner_name":15,"owner_avatar_url":16,"owner_bio":17,"owner_company":18,"owner_location":19,"owner_email":20,"owner_twitter":21,"owner_website":22,"owner_url":23,"languages":24,"stars":33,"forks":34,"last_commit_at":35,"license":36,"difficulty_score":37,"env_os":38,"env_gpu":39,"env_ram":39,"env_deps":40,"category_tags":49,"github_topics":52,"view_count":56,"oss_zip_url":36,"oss_zip_packed_at":36,"status":57,"created_at":58,"updated_at":59,"faqs":60,"releases":89},3365,"adrianhajdin\u002Fproject_next_14_ai_prompt_sharing","project_next_14_ai_prompt_sharing","Next.js recently became the official React framework as outlined in React docs. In this course, you'll learn the most important Next.js concepts and how they fit into the React ecosystem. Finally, you'll put your skills to the test by building a modern full-stack Next 14 application.","project_next_14_ai_prompt_sharing 是一个基于 Next.js 14 构建的全栈开源项目，旨在打造一个现代化的 AI 提示词（Prompt）分享社区。它解决了开发者在学习和实践最新 React 框架时缺乏完整实战案例的痛点，同时为 AI 爱好者提供了一个发现、创建和管理高质量提示词的协作平台。\n\n该项目非常适合希望掌握 Next.js 14 新特性的前端开发者、全栈工程师以及计算机专业学生。通过跟随配套的详细教程，用户不仅能理解理论概念，还能亲手搭建一个具备完整功能的现代 Web 应用。普通 AI 用户也可从中获益，利用平台浏览和复用社区分享的创意提示词。\n\n在技术亮点方面，项目深度整合了 MongoDB 数据库进行数据存储，采用 NextAuth 实现安全的 Google 账号登录，并利用 TailwindCSS 打造了符合当下流行的“玻璃拟态”风格的响应式界面。功能上涵盖了提示词的增删改查、个人主页展示、标签搜索以及一键复制等核心特性。无论是作为学习全栈开发的入门教材，还是作为构建 AI 社区产品的参考模板，它都提供了极具价值的代码架构与实践思路。","\u003Cdiv align=\"center\">\n  \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002Fwm5gMKuwSYk?feature=shared\" target=\"_blank\">\n      \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fadrianhajdin_project_next_14_ai_prompt_sharing_readme_3e8c1cdfd513.png\" alt=\"Project Banner\">\n    \u003C\u002Fa>\n  \u003Cbr \u002F>\n\n  \u003Cdiv>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Next_JS-black?style=for-the-badge&logoColor=white&logo=nextdotjs&color=000\" alt=\"Next.js\" \u002F>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Mongodb-black?style=for-the-badge&logoColor=white&logo=mongodb&color=47A248\" alt=\"mongodb\" \u002F>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Tailwind_CSS-black?style=for-the-badge&logoColor=white&logo=tailwindcss&color=06B6D4\" alt=\"tailwindcss\" \u002F>\n  \u003C\u002Fdiv>\n\n  \u003Ch3 align=\"center\">Next.js 14 AI Prompt Sharing Application\u003C\u002Fh3>\n\n   \u003Cdiv align=\"center\">\n     Build this project step by step with our detailed tutorial on \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@javascriptmastery\u002Fvideos\" target=\"_blank\">\u003Cb>JavaScript Mastery\u003C\u002Fb>\u003C\u002Fa> YouTube. Join the JSM family!\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n## 📋 \u003Ca name=\"table\">Table of Contents\u003C\u002Fa>\n\n1. 🤖 [Introduction](#introduction)\n2. ⚙️ [Tech Stack](#tech-stack)\n3. 🔋 [Features](#features)\n4. 🤸 [Quick Start](#quick-start)\n5. 🕸️ [Snippets](#snippets)\n6. 🔗 [Links](#links)\n7. 🚀 [More](#more)\n\n## 🚨 Tutorial\n\nThis repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@javascriptmastery\u002Fvideos\" target=\"_blank\">\u003Cb>JavaScript Mastery\u003C\u002Fb>\u003C\u002Fa>. \n\nIf you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!\n\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002Fwm5gMKuwSYk?feature=shared\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fadrianhajdin_project_next_14_ai_prompt_sharing_readme_b924f4c81a39.png\" \u002F>\u003C\u002Fa>\n\n## \u003Ca name=\"introduction\">🤖 Introduction\u003C\u002Fa>\n\nDevelop a Next.js application that highlights the key features of Next.js along with a comprehensive CRUD AI Prompt sharing system utilizing a MongoDB database and implementing NextAuth authentication.\n\nIf you're getting started and need assistance or face any bugs, join our active Discord community with over 27k+ members. It's a place where people help each other out.\n\n\u003Ca href=\"https:\u002F\u002Fdiscord.com\u002Finvite\u002Fn6EdbFJ\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fadrianhajdin_project_next_14_ai_prompt_sharing_readme_2c05fd353d2d.png\" \u002F>\u003C\u002Fa>\n\n## \u003Ca name=\"tech-stack\">⚙️ Tech Stack\u003C\u002Fa>\n\n- Next.js\n- MongoDB\n- NextAuth\n- TailwindCSS\n\n## \u003Ca name=\"features\">🔋 Features\u003C\u002Fa>\n\n👉 **Modern Design with Glassmorphism Trend Style**: A modern and visually appealing design, incorporating the glassmorphism trend style for a sleek and contemporary appearance.\n\n👉 **Discover and Share AI Prompts**: Allow users to discover AI prompts shared by the community and create their own prompts to share with the world.\n\n👉 **Edit and Delete Created Prompts**: Users have the ability to edit their created prompts at any time and delete them when needed.\n\n👉 **Profile Page**: Each user gets a dedicated profile page showcasing all the prompts they've created, providing an overview of their contributions.\n\n👉 **View Other People's Profiles**: Users can explore the profiles of other creators to view the prompts they've shared, fostering a sense of community.\n\n👉 **Copy to Clipboard**: Implement a convenient \"Copy to Clipboard\" functionality for users to easily copy the AI prompts for their use.\n\n👉 **Search Prompts by Specific Tag**: Allow users to search for prompts based on specific tags, making it easier to find prompts related to specific topics.\n\n👉 **Google Authentication using NextAuth**: Enable secure Google authentication using NextAuth, ensuring a streamlined and trustworthy login experience.\n\n👉 **Responsive Website**: Develop a fully responsive website to ensure optimal user experience across various devices, from desktops to smartphones\n\nand many more, including code architecture and reusability \n\n## \u003Ca name=\"quick-start\">🤸 Quick Start\u003C\u002Fa>\n\nFollow these steps to set up the project locally on your machine.\n\n**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https:\u002F\u002Fgit-scm.com\u002F)\n- [Node.js](https:\u002F\u002Fnodejs.org\u002Fen)\n- [npm](https:\u002F\u002Fwww.npmjs.com\u002F) (Node Package Manager)\n\n**Cloning the Repository**\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fadrianhajdin\u002Fproject_next_13_ai_prompt_sharing.git\ncd project_next_13_ai_prompt_sharing\n```\n\n**Installation**\n\nInstall the project dependencies using npm:\n\n```bash\nnpm install\n```\n\n**Set Up Environment Variables**\n\nCreate a new file named `.env` in the root of your project and add the following content:\n\n```env\nNEXTAUTH_URL=http:\u002F\u002Flocalhost:3000\nNEXTAUTH_URL_INTERNAL=http:\u002F\u002Flocalhost:3000\nNEXTAUTH_SECRET=\nGOOGLE_ID=\nGOOGLE_CLIENT_SECRET=\nMONGODB_URI=\n```\n\nReplace the placeholder values with your actual credentials. You can obtain these credentials by signing up on these corresponding websites from [Google Cloud Console](https:\u002F\u002Fconsole.cloud.google.com\u002Fwelcome?rapt=AEjHL4MBaLLneW6OfAHf_zgms1eWZFw1wdy0_KIC4uh1nEqh2m4ojOvrXNlzJ4h7CZTkpiWgcsoHbUvS-FMdCP7WIkaVlPAeU7cnVR6Y0wJHeLMOtU6KAzA&project=promptopia-385410), [Cryptpool](https:\u002F\u002Fwww.cryptool.org\u002Fen\u002Fcto\u002Fopenssl) (for random Auth Secret), and [MongoDB](https:\u002F\u002Fwww.mongodb.com\u002F). \n\n**Running the Project**\n\n```bash\nnpm run dev\n```\n\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) in your browser to view the project.\n\n## \u003Ca name=\"snippets\">🕸️ Snippets\u003C\u002Fa>\n\n\u003Cdetails>\n\u003Csummary>\u003Ccode>globals.css\u003C\u002Fcode>\u003C\u002Fsummary>\n\n```css\n@import url(\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\");\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\u002F* \n  Note: The styles for this gradient grid background is heavily inspired by the creator of this amazing site (https:\u002F\u002Fdub.sh) – all credits go to them! \n*\u002F\n\n.main {\n  width: 100vw;\n  min-height: 100vh;\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  padding: 120px 24px 160px 24px;\n  pointer-events: none;\n}\n\n.main:before {\n  background: radial-gradient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%);\n  position: absolute;\n  content: \"\";\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n  top: 0;\n}\n\n.main:after {\n  content: \"\";\n  background-image: url(\"\u002Fassets\u002Fimages\u002Fgrid.svg\");\n  z-index: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  opacity: 0.4;\n  filter: invert(1);\n}\n\n.gradient {\n  height: fit-content;\n  z-index: 3;\n  width: 100%;\n  max-width: 640px;\n  background-image: radial-gradient(\n      at 27% 37%,\n      hsla(215, 98%, 61%, 1) 0px,\n      transparent 0%\n    ),\n    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),\n    radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),\n    radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),\n    radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),\n    radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),\n    radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);\n  position: absolute;\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  filter: blur(100px) saturate(150%);\n  top: 80px;\n  opacity: 0.15;\n}\n\n@media screen and (max-width: 640px) {\n  .main {\n    padding: 0;\n  }\n}\n\n\u002F* Tailwind Styles *\u002F\n\n.app {\n  @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6;\n}\n\n.black_btn {\n  @apply rounded-full border border-black bg-black py-1.5 px-5 text-white transition-all hover:bg-white hover:text-black text-center text-sm font-inter flex items-center justify-center;\n}\n\n.outline_btn {\n  @apply rounded-full border border-black bg-transparent py-1.5 px-5 text-black transition-all hover:bg-black hover:text-white text-center text-sm font-inter flex items-center justify-center;\n}\n\n.head_text {\n  @apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl;\n}\n\n.orange_gradient {\n  @apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent;\n}\n\n.green_gradient {\n  @apply bg-gradient-to-r from-green-400 to-green-500 bg-clip-text text-transparent;\n}\n\n.blue_gradient {\n  @apply bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent;\n}\n\n.desc {\n  @apply mt-5 text-lg text-gray-600 sm:text-xl max-w-2xl;\n}\n\n.search_input {\n  @apply block w-full rounded-md border border-gray-200 bg-white py-2.5 font-satoshi pl-5 pr-12 text-sm shadow-lg font-medium focus:border-black focus:outline-none focus:ring-0;\n}\n\n.copy_btn {\n  @apply w-7 h-7 rounded-full bg-white\u002F10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur flex justify-center items-center cursor-pointer;\n}\n\n.glassmorphism {\n  @apply rounded-xl border border-gray-200 bg-white\u002F20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-5;\n}\n\n.prompt_layout {\n  @apply space-y-6 py-8 sm:columns-2 sm:gap-6 xl:columns-3;\n}\n\n\u002F* Feed Component *\u002F\n.feed {\n  @apply mt-16 mx-auto w-full max-w-xl flex justify-center items-center flex-col gap-2;\n}\n\n\u002F* Form Component *\u002F\n.form_textarea {\n  @apply w-full flex rounded-lg h-[200px] mt-2 p-3 text-sm text-gray-500 outline-0;\n}\n\n.form_input {\n  @apply w-full flex rounded-lg mt-2 p-3 text-sm text-gray-500 outline-0;\n}\n\n\u002F* Nav Component *\u002F\n.logo_text {\n  @apply max-sm:hidden font-satoshi font-semibold text-lg text-black tracking-wide;\n}\n\n.dropdown {\n  @apply absolute right-0 top-full mt-3 w-full p-5 rounded-lg bg-white min-w-[210px] flex flex-col gap-2 justify-end items-end;\n}\n\n.dropdown_link {\n  @apply text-sm font-inter text-gray-700 hover:text-gray-500 font-medium;\n}\n\n\u002F* PromptCard Component *\u002F\n.prompt_card {\n  @apply flex-1 break-inside-avoid rounded-lg border border-gray-300 bg-white\u002F20 bg-clip-padding p-6 pb-4 backdrop-blur-lg backdrop-filter md:w-[360px] w-full h-fit;\n}\n\n.flex-center {\n  @apply flex justify-center items-center;\n}\n\n.flex-start {\n  @apply flex justify-start items-start;\n}\n\n.flex-end {\n  @apply flex justify-end items-center;\n}\n\n.flex-between {\n  @apply flex justify-between items-center;\n}\n```\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Ccode>jsconfig.json\u003C\u002Fcode>\u003C\u002Fsummary>\n\n```json\n{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"@*\": [\".\u002F*\"]\n    }\n  }\n}\n```\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Ccode>route.js\u003C\u002Fcode>\u003C\u002Fsummary>\n\n```javascript\nimport Prompt from \"@models\u002Fprompt\";\nimport { connectToDB } from \"@utils\u002Fdatabase\";\n\nexport const GET = async (request, { params }) => {\n    try {\n        await connectToDB()\n\n        const prompt = await Prompt.findById(params.id).populate(\"creator\")\n        if (!prompt) return new Response(\"Prompt Not Found\", { status: 404 });\n\n        return new Response(JSON.stringify(prompt), { status: 200 })\n\n    } catch (error) {\n        return new Response(\"Internal Server Error\", { status: 500 });\n    }\n}\n\nexport const PATCH = async (request, { params }) => {\n    const { prompt, tag } = await request.json();\n\n    try {\n        await connectToDB();\n\n        \u002F\u002F Find the existing prompt by ID\n        const existingPrompt = await Prompt.findById(params.id);\n\n        if (!existingPrompt) {\n            return new Response(\"Prompt not found\", { status: 404 });\n        }\n\n        \u002F\u002F Update the prompt with new data\n        existingPrompt.prompt = prompt;\n        existingPrompt.tag = tag;\n\n        await existingPrompt.save();\n\n        return new Response(\"Successfully updated the Prompts\", { status: 200 });\n    } catch (error) {\n        return new Response(\"Error Updating Prompt\", { status: 500 });\n    }\n};\n\nexport const DELETE = async (request, { params }) => {\n    try {\n        await connectToDB();\n\n        \u002F\u002F Find the prompt by ID and remove it\n        await Prompt.findByIdAndRemove(params.id);\n\n        return new Response(\"Prompt deleted successfully\", { status: 200 });\n    } catch (error) {\n        return new Response(\"Error deleting prompt\", { status: 500 });\n    }\n};\n```\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Ccode>tailwind.config.js\u003C\u002Fcode>\u003C\u002Fsummary>\n\n```javascript\n\u002F** @type {import('tailwindcss').Config} *\u002F\nmodule.exports = {\n  content: [\n    '.\u002Fpages\u002F**\u002F*.{js,ts,jsx,tsx,mdx}',\n    '.\u002Fcomponents\u002F**\u002F*.{js,ts,jsx,tsx,mdx}',\n    '.\u002Fapp\u002F**\u002F*.{js,ts,jsx,tsx,mdx}',\n  ],\n  theme: {\n    extend: {\n      fontFamily: {\n        satoshi: ['Satoshi', 'sans-serif'],\n        inter: ['Inter', 'sans-serif'],\n      },\n      colors: {\n        'primary-orange': '#FF5722',\n      }\n    },\n  },\n  plugins: [],\n}\n```\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Ccode>user.js\u003C\u002Fcode>\u003C\u002Fsummary>\n\n```javascript\nusername: {\n    type: String,\n    required: [true, 'Username is required!'],\n    match: [\u002F^(?=.{8,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?\u003C![_.])$\u002F, \"Username invalid, it should contain 8-20 alphanumeric letters and be unique!\"]\n  },\n```\n\n\u003C\u002Fdetails>\n\n## \u003Ca name=\"links\">🔗 Links\u003C\u002Fa>\n\nAssets used in the project can be found [here](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F15bGW9HBImu1p3HAYalnaj2Ig_Sn-1c-f\u002Fview)\n\n## \u003Ca name=\"more\">🚀 More\u003C\u002Fa>\n\n**Advance your skills with Next.js 14 Pro Course**\n\nEnjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!\n\n\u003Ca href=\"https:\u002F\u002Fjsmastery.pro\u002Fnext14\" target=\"_blank\">\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fadrianhajdin_project_next_14_ai_prompt_sharing_readme_bc9793cf0940.png\" alt=\"Project Banner\">\n\u003C\u002Fa>\n\n\u003Cbr \u002F>\n\u003Cbr \u002F>\n\n**Accelerate your professional journey with the Expert Training program**\n\nAnd if you're hungry for more than just a course and want to understand how we learn and tackle tech challenges, hop into our personalized masterclass. We cover best practices, different web skills, and offer mentorship to boost your confidence. Let's learn and grow together!\n\n\u003Ca href=\"https:\u002F\u002Fwww.jsmastery.pro\u002Fmasterclass\" target=\"_blank\">\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fadrianhajdin_project_next_14_ai_prompt_sharing_readme_0857920dc4f8.png\" alt=\"Project Banner\">\n\u003C\u002Fa>\n\n#\n","\u003Cdiv align=\"center\">\n  \u003Cbr \u002F>\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002Fwm5gMKuwSYk?feature=shared\" target=\"_blank\">\n      \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fadrianhajdin_project_next_14_ai_prompt_sharing_readme_3e8c1cdfd513.png\" alt=\"Project Banner\">\n    \u003C\u002Fa>\n  \u003Cbr \u002F>\n\n  \u003Cdiv>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Next_JS-black?style=for-the-badge&logoColor=white&logo=nextdotjs&color=000\" alt=\"Next.js\" \u002F>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Mongodb-black?style=for-the-badge&logoColor=white&logo=mongodb&color=47A248\" alt=\"mongodb\" \u002F>\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F-Tailwind_CSS-black?style=for-the-badge&logoColor=white&logo=tailwindcss&color=06B6D4\" alt=\"tailwindcss\" \u002F>\n  \u003C\u002Fdiv>\n\n  \u003Ch3 align=\"center\">Next.js 14 AI 提示词分享应用\u003C\u002Fh3>\n\n   \u003Cdiv align=\"center\">\n     按照我们在 \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@javascriptmastery\u002Fvideos\" target=\"_blank\">\u003Cb>JavaScript Mastery\u003C\u002Fb>\u003C\u002Fa> YouTube 上的详细教程，一步步构建这个项目。加入 JSM 大家庭吧！\n    \u003C\u002Fdiv}\n\u003C\u002Fdiv}\n\n## 📋 \u003Ca name=\"table\">目录\u003C\u002Fa>\n\n1. 🤖 [简介](#introduction)\n2. ⚙️ [技术栈](#tech-stack)\n3. 🔋 [功能](#features)\n4. 🤸 [快速开始](#quick-start)\n5. 🕸️ [代码片段](#snippets)\n6. 🔗 [链接](#links)\n7. 🚀 [更多](#more)\n\n## 🚨 教程\n\n本仓库包含我们 YouTube 频道 \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002F@javascriptmastery\u002Fvideos\" target=\"_blank\">\u003Cb>JavaScript Mastery\u003C\u002Fb>\u003C\u002Fa> 上提供的深度教程对应的代码。\n\n如果你更喜欢通过视频学习，这里就是你的完美资源。跟随我们的教程，以适合初学者的方式逐步学习如何构建此类项目！\n\n\u003Ca href=\"https:\u002F\u002Fyoutu.be\u002Fwm5gMKuwSYk?feature=shared\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fadrianhajdin_project_next_14_ai_prompt_sharing_readme_b924f4c81a39.png\" \u002F>\u003C\u002Fa>\n\n## \u003Ca name=\"introduction\">🤖 简介\u003C\u002Fa>\n\n开发一个 Next.js 应用程序，突出展示 Next.js 的核心特性，并结合 MongoDB 数据库和 NextAuth 身份验证，实现一个全面的 CRUD AI 提示词分享系统。\n\n如果你刚开始学习并需要帮助或遇到任何问题，欢迎加入我们拥有超过 27,000 名成员的活跃 Discord 社区。这里是一个互相帮助的地方。\n\n\u003Ca href=\"https:\u002F\u002Fdiscord.com\u002Finvite\u002Fn6EdbFJ\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fadrianhajdin_project_next_14_ai_prompt_sharing_readme_2c05fd353d2d.png\" \u002F>\u003C\u002Fa>\n\n## \u003Ca name=\"tech-stack\">⚙️ 技术栈\u003C\u002Fa>\n\n- Next.js\n- MongoDB\n- NextAuth\n- TailwindCSS\n\n## \u003Ca name=\"features\">🔋 功能\u003C\u002Fa>\n\n👉 **采用玻璃蒙太奇风格的现代设计**：采用现代且视觉上吸引人的设计，融入玻璃蒙太奇趋势风格，呈现出时尚而前卫的外观。\n\n👉 **发现与分享 AI 提示词**：允许用户发现社区共享的 AI 提示词，并创建自己的提示词与大家分享。\n\n👉 **编辑和删除已创建的提示词**：用户可以随时编辑自己创建的提示词，并在需要时将其删除。\n\n👉 **个人主页**：每位用户都拥有专属的个人主页，展示其所有创建的提示词，以便清晰了解自己的贡献。\n\n👉 **查看他人主页**：用户可以浏览其他创作者的主页，查看他们分享的提示词，从而增强社区归属感。\n\n👉 **复制到剪贴板**：实现便捷的“复制到剪贴板”功能，方便用户轻松复制 AI 提示词以供使用。\n\n👉 **按特定标签搜索提示词**：允许用户根据特定标签搜索提示词，从而更轻松地找到相关主题的提示词。\n\n👉 **使用 NextAuth 进行 Google 身份验证**：通过 NextAuth 实现安全的 Google 身份验证，确保流畅且值得信赖的登录体验。\n\n👉 **响应式网站**：开发完全响应式的网站，以确保在各种设备上都能获得最佳用户体验，从桌面到智能手机。\n\n以及更多功能，包括代码架构和可重用性。\n\n## \u003Ca name=\"quick-start\">🤸 快速开始\u003C\u002Fa>\n\n按照以下步骤，在本地机器上设置该项目。\n\n**先决条件**\n\n请确保您的机器上已安装以下工具：\n\n- [Git](https:\u002F\u002Fgit-scm.com\u002F)\n- [Node.js](https:\u002F\u002Fnodejs.org\u002Fen)\n- [npm](https:\u002F\u002Fwww.npmjs.com\u002F)（Node 包管理器）\n\n**克隆仓库**\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fadrianhajdin\u002Fproject_next_13_ai_prompt_sharing.git\ncd project_next_13_ai_prompt_sharing\n```\n\n**安装依赖**\n\n使用 npm 安装项目依赖：\n\n```bash\nnpm install\n```\n\n**配置环境变量**\n\n在项目的根目录下创建一个名为 `.env` 的文件，并添加以下内容：\n\n```env\nNEXTAUTH_URL=http:\u002F\u002Flocalhost:3000\nNEXTAUTH_URL_INTERNAL=http:\u002F\u002Flocalhost:3000\nNEXTAUTH_SECRET=\nGOOGLE_ID=\nGOOGLE_CLIENT_SECRET=\nMONGODB_URI=\n```\n\n将占位符替换为您的实际凭据。您可以通过在以下相应网站上注册来获取这些凭据：[Google Cloud Console](https:\u002F\u002Fconsole.cloud.google.com\u002Fwelcome?rapt=AEjHL4MBaLLneW6OfAHf_zgms1eWZFw1wdy0_KIC4uh1nEqh2m4ojOvrXNlzJ4h7CZTkpiWgcsoHbUvS-FMdCP7WIkaVlPAeU7cnVR6Y0wJHeLMOtU6KAzA&project=promptopia-385410)、[Cryptpool](https:\u002F\u002Fwww.cryptool.org\u002Fen\u002Fcto\u002Fopenssl)（用于生成随机的 Auth Secret）以及 [MongoDB](https:\u002F\u002Fwww.mongodb.com\u002F)。\n\n**运行项目**\n\n```bash\nnpm run dev\n```\n\n在浏览器中打开 [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000)，即可查看项目。\n\n## \u003Ca name=\"snippets\">🕸️ 代码片段\u003C\u002Fa>\n\n\u003Cdetails>\n\u003Csummary>\u003Ccode>globals.css\u003C\u002Fcode>\u003C\u002Fsummary>\n\n```css\n@import url(\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap\");\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n\u002F* \n  注意：此渐变网格背景的样式深受该优秀网站（https:\u002F\u002Fdub.sh）的创作者启发——所有功劳归于他们！ \n*\u002F\n\n.main {\n  width: 100vw;\n  min-height: 100vh;\n  position: fixed;\n  display: flex;\n  justify-content: center;\n  padding: 120px 24px 160px 24px;\n  pointer-events: none;\n}\n\n.main:before {\n  background: radial-gradient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%);\n  position: absolute;\n  content: \"\";\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n  top: 0;\n}\n\n.main:after {\n  content: \"\";\n  background-image: url(\"\u002Fassets\u002Fimages\u002Fgrid.svg\");\n  z-index: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  opacity: 0.4;\n  filter: invert(1);\n}\n\n.gradient {\n  height: fit-content;\n  z-index: 3;\n  width: 100%;\n  max-width: 640px;\n  background-image: radial-gradient(\n      at 27% 37%,\n      hsla(215, 98%, 61%, 1) 0px,\n      transparent 0%\n    ),\n    radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),\n    radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),\n    radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),\n    radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),\n    radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),\n    radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);\n  position: absolute;\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  filter: blur(100px) saturate(150%);\n  top: 80px;\n  opacity: 0.15;\n}\n\n@media screen and (max-width: 640px) {\n  .main {\n    padding: 0;\n  }\n}\n\n\u002F* Tailwind 样式 *\u002F\n\n.app {\n  @apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6;\n}\n\n.black_btn {\n  @apply rounded-full border border-black bg-black py-1.5 px-5 text-white transition-all hover:bg-white hover:text-black text-center text-sm font-inter flex items-center justify-center;\n}\n\n.outline_btn {\n  @apply rounded-full border border-black bg-transparent py-1.5 px-5 text-black transition-all hover:bg-black hover:text-white text-center text-sm font-inter flex items-center justify-center;\n}\n\n.head_text {\n  @apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl;\n}\n\n.orange_gradient {\n  @apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent;\n}\n\n.green_gradient {\n  @apply bg-gradient-to-r from-green-400 to-green-500 bg-clip-text text-transparent;\n}\n\n.blue_gradient {\n  @apply bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent;\n}\n\n.desc {\n  @apply mt-5 text-lg text-gray-600 sm:text-xl max-w-2xl;\n}\n\n.search_input {\n  @apply block w-full rounded-md border border-gray-200 bg-white py-2.5 font-satoshi pl-5 pr-12 text-sm shadow-lg font-medium focus:border-black focus:outline-none focus:ring-0;\n}\n\n.copy_btn {\n  @apply w-7 h-7 rounded-full bg-white\u002F10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur flex justify-center items-center cursor-pointer;\n}\n\n.glassmorphism {\n  @apply rounded-xl border border-gray-200 bg-white\u002F20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-5;\n}\n\n.prompt_layout {\n  @apply space-y-6 py-8 sm:columns-2 sm:gap-6 xl:columns-3;\n}\n\n\u002F* 动态组件 *\u002F\n.feed {\n  @apply mt-16 mx-auto w-full max-w-xl flex justify-center items-center flex-col gap-2;\n}\n\n\u002F* 表单组件 *\u002F\n.form_textarea {\n  @apply w-full flex rounded-lg h-[200px] mt-2 p-3 text-sm text-gray-500 outline-0;\n}\n\n.form_input {\n  @apply w-full flex rounded-lg mt-2 p-3 text-sm text-gray-500 outline-0;\n}\n\n\u002F* 导航组件 *\u002F\n.logo_text {\n  @apply max-sm:hidden font-satoshi font-semibold text-lg text-black tracking-wide;\n}\n\n.dropdown {\n  @apply absolute right-0 top-full mt-3 w-full p-5 rounded-lg bg-white min-w-[210px] flex flex-col gap-2 justify-end items-end;\n}\n\n.dropdown_link {\n  @apply text-sm font-inter text-gray-700 hover:text-gray-500 font-medium;\n}\n\n\u002F* 提示卡组件 *\u002F\n.prompt_card {\n  @apply flex-1 break-inside-avoid rounded-lg border border-gray-300 bg-white\u002F20 bg-clip-padding p-6 pb-4 backdrop-blur-lg backdrop-filter md:w-[360px] w-full h-fit;\n}\n\n.flex-center {\n  @apply flex justify-center items-center;\n}\n\n.flex-start {\n  @apply flex justify-start items-start;\n}\n\n.flex-end {\n  @apply flex justify-end items-center;\n}\n\n.flex-between {\n  @apply flex justify-between items-center;\n}\n```\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Ccode>jsconfig.json\u003C\u002Fcode>\u003C\u002Fsummary>\n\n```json\n{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"@*\": [\".\u002F*\"]\n    }\n  }\n}\n```\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Ccode>route.js\u003C\u002Fcode>\u003C\u002Fsummary>\n\n```javascript\nimport Prompt from \"@models\u002Fprompt\";\nimport { connectToDB } from \"@utils\u002Fdatabase\";\n\nexport const GET = async (request, { params }) => {\n    try {\n        await connectToDB()\n\n        const prompt = await Prompt.findById(params.id).populate(\"creator\")\n        if (!prompt) return new Response(\"Prompt Not Found\", { status: 404 });\n\n        return new Response(JSON.stringify(prompt), { status: 200 })\n\n    } catch (error) {\n        return new Response(\"Internal Server Error\", { status: 500 });\n    }\n}\n\nexport const PATCH = async (request, { params }) => {\n    const { prompt, tag } = await request.json();\n\n    try {\n        await connectToDB();\n\n        \u002F\u002F 查找现有提示并更新\n        const existingPrompt = await Prompt.findById(params.id);\n\n        if (!existingPrompt) {\n            return new Response(\"Prompt not found\", { status: 404 });\n        }\n\n        \u002F\u002F 更新提示内容\n        existingPrompt.prompt = prompt;\n        existingPrompt.tag = tag;\n\n        await existingPrompt.save();\n\n        return new Response(\"Successfully updated the Prompts\", { status: 200 });\n    } catch (error) {\n        return new Response(\"Error Updating Prompt\", { status: 500 });\n    }\n};\n\nexport const DELETE = async (request, { params }) => {\n    try {\n        await connectToDB();\n\n        \u002F\u002F 根据ID删除提示\n        await Prompt.findByIdAndRemove(params.id);\n\n        return new Response(\"Prompt deleted successfully\", { status: 200 });\n    } catch (error) {\n        return new Response(\"Error deleting prompt\", { status: 500 });\n    }\n};\n```\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Ccode>tailwind.config.js\u003C\u002Fcode>\u003C\u002Fsummary>\n\n```javascript\n\u002F** @type {import('tailwindcss').Config} *\u002F\nmodule.exports = {\n  content: [\n    '.\u002Fpages\u002F**\u002F*.{js,ts,jsx,tsx,mdx}',\n    '.\u002Fcomponents\u002F**\u002F*.{js,ts,jsx,tsx,mdx}',\n    '.\u002Fapp\u002F**\u002F*.{js,ts,jsx,tsx,mdx}',\n  ],\n  theme: {\n    extend: {\n      fontFamily: {\n        satoshi: ['Satoshi', 'sans-serif'],\n        inter: ['Inter', 'sans-serif'],\n      },\n      colors: {\n        'primary-orange': '#FF5722',\n      }\n    },\n  },\n  plugins: [],\n}\n```\n\n\u003C\u002Fdetails>\n\n\u003Cdetails>\n\u003Csummary>\u003Ccode>user.js\u003C\u002Fcode>\u003C\u002Fsummary>\n\n```javascript\nusername: {\n    type: String,\n    required: [true, 'Username is required!'],\n    match: [\u002F^(?=.{8,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?\u003C![_.])$\u002F, \"Username invalid, it should contain 8-20 alphanumeric letters and be unique!\"]\n  },\n```\n\n\u003C\u002Fdetails>\n\n\n\n## \u003Ca name=\"links\">🔗 链接\u003C\u002Fa>\n\n项目中使用的资源可以在这里找到 [这里](https:\u002F\u002Fdrive.google.com\u002Ffile\u002Fd\u002F15bGW9HBImu1p3HAYalnaj2Ig_Sn-1c-f\u002Fview)\n\n## \u003Ca name=\"more\">🚀 更多\u003C\u002Fa>\n\n**通过 Next.js 14 专业课程提升你的技能**\n\n喜欢创建这个项目吗？快来深入我们的 PRO 课程，开启更丰富的学习之旅吧！这些课程包含详尽的讲解、酷炫的功能和练习，助你快速提升技能。赶紧试试看！\n\n\u003Ca href=\"https:\u002F\u002Fjsmastery.pro\u002Fnext14\" target=\"_blank\">\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fadrianhajdin_project_next_14_ai_prompt_sharing_readme_bc9793cf0940.png\" alt=\"项目横幅\">\n\u003C\u002Fa>\n\n\u003Cbr \u002F>\n\u003Cbr \u002F>\n\n**通过专家培训计划加速你的职业发展**\n\n如果你不仅想要一门课程，还想深入了解我们的学习方式以及如何应对技术挑战，那就加入我们的个性化大师班吧！我们涵盖最佳实践、多种 Web 技能，并提供导师指导，帮助你增强信心。让我们一起学习、共同成长！\n\n\u003Ca href=\"https:\u002F\u002Fwww.jsmastery.pro\u002Fmasterclass\" target=\"_blank\">\n\u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fadrianhajdin_project_next_14_ai_prompt_sharing_readme_0857920dc4f8.png\" alt=\"项目横幅\">\n\u003C\u002Fa>\n\n#","# Next.js 14 AI 提示词分享应用快速上手指南\n\n本项目是一个基于 Next.js 14、MongoDB 和 TailwindCSS 构建的现代化 AI 提示词（Prompt）分享平台，支持用户创建、编辑、删除提示词，并集成 Google 登录认证。\n\n## 环境准备\n\n在开始之前，请确保您的开发环境已安装以下工具：\n\n- **Git**: 用于代码版本控制\n- **Node.js**: 建议安装 LTS 版本 (v18+)\n- **npm**: Node.js 包管理器（随 Node.js 自动安装）\n\n此外，您需要准备以下账号和凭证：\n- **MongoDB Atlas**: 创建一个免费的云数据库集群，获取连接字符串 (`MONGODB_URI`)。\n- **Google Cloud Console**: 创建 OAuth 2.0 凭证，获取 `GOOGLE_ID` 和 `GOOGLE_CLIENT_SECRET`。\n- **Auth Secret**: 可使用 `openssl rand -base64 32` 命令生成随机字符串，或使用在线工具生成。\n\n## 安装步骤\n\n### 1. 克隆项目仓库\n\n使用 Git 将项目代码下载到本地：\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fadrianhajdin\u002Fproject_next_13_ai_prompt_sharing.git\ncd project_next_13_ai_prompt_sharing\n```\n\n> **注意**：尽管项目名称包含 \"next_13\"，但该项目教程旨在展示 Next.js 14 的核心特性（如 App Router）。\n\n### 2. 安装依赖\n\n进入项目目录后，运行以下命令安装所需依赖：\n\n```bash\nnpm install\n```\n\n*国内开发者如遇下载缓慢，可配置淘宝镜像源：*\n```bash\nnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\nnpm install\n```\n\n### 3. 配置环境变量\n\n在项目根目录下创建名为 `.env` 的文件，并填入以下内容：\n\n```env\nNEXTAUTH_URL=http:\u002F\u002Flocalhost:3000\nNEXTAUTH_URL_INTERNAL=http:\u002F\u002Flocalhost:3000\nNEXTAUTH_SECRET=你的随机生成的_AUTH_SECRET_\nGOOGLE_ID=你的_GOOGLE_CLIENT_ID_\nGOOGLE_CLIENT_SECRET=你的_GOOGLE_CLIENT_SECRET_\nMONGODB_URI=你的_MONGODB_连接字符串_\n```\n\n请将占位符替换为您实际申请的凭证信息。\n\n## 基本使用\n\n### 启动开发服务器\n\n完成上述配置后，运行以下命令启动项目：\n\n```bash\nnpm run dev\n```\n\n### 访问应用\n\n打开浏览器访问 [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000)，您将看到应用主页。\n\n**核心功能体验：**\n1. **登录**: 点击右上角登录按钮，使用 Google 账号进行认证。\n2. **创建提示词**: 登录后点击 \"Create Prompt\"，输入提示词内容和标签并提交。\n3. **浏览与搜索**: 在首页浏览社区分享的提示词，或通过顶部搜索框按标签查找。\n4. **管理内容**: 进入个人 Profile 页面，可对已创建的提示词进行编辑或删除操作。\n5. **复制功能**: 点击任意提示词卡片上的复制图标，即可将内容一键复制到剪贴板。","某小型 AI 创业团队希望快速构建一个内部知识库，让成员能高效分享和复用针对不同业务场景的优质 AI 提示词（Prompts），以避免重复造轮子。\n\n### 没有 project_next_14_ai_prompt_sharing 时\n- 团队成员将提示词散落在 Slack 聊天记录或个人笔记中，检索困难，知识资产极易流失。\n- 缺乏统一的权限管理，无法区分谁创建了内容，也难以追踪提示词的来源和修改历史。\n- 手动复制粘贴容易出错，且没有“一键复制”功能，降低了日常调用的效率。\n- 无法按标签分类搜索，新人入职时难以快速找到特定领域（如“文案生成”或“代码调试”）的成熟方案。\n- 从零开发需耗费数周时间处理 Next.js 路由、MongoDB 数据库连接及 Google 登录认证等底层架构。\n\n### 使用 project_next_14_ai_prompt_sharing 后\n- 建立了集中的提示词共享平台，所有成员均可浏览社区内容并贡献自己的独家技巧，知识沉淀有序。\n- 集成 NextAuth Google 认证，自动展示用户个人主页及其创建的所有提示词，权责清晰且便于追溯。\n- 内置“复制到剪贴板”功能，配合玻璃拟态的现代 UI 设计，让获取和使用提示词变得流畅且愉悦。\n- 支持通过特定标签精准搜索，团队成员能秒级定位所需领域的优质提示词，大幅提升协作效率。\n- 基于成熟的 Next.js 14 全栈架构，团队仅需关注业务逻辑，几天内即可部署上线具备增删改查功能的应用。\n\nproject_next_14_ai_prompt_sharing 将原本繁琐的全栈开发工作转化为即插即用的解决方案，帮助团队以最低成本快速搭建起高价值的 AI 知识协作生态。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fadrianhajdin_project_next_14_ai_prompt_sharing_3e8c1cdf.png","adrianhajdin","Adrian Hajdin - JS Mastery","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fadrianhajdin_9e50a3f4.jpg","Next.js Enthusiast & Educator","JavaScript Mastery","Croatia","contact@jsmastery.pro","jsmasterypro","jsmastery.pro","https:\u002F\u002Fgithub.com\u002Fadrianhajdin",[25,29],{"name":26,"color":27,"percentage":28},"JavaScript","#f1e05a",84.4,{"name":30,"color":31,"percentage":32},"CSS","#663399",15.6,2969,440,"2026-04-03T16:50:42",null,4,"Linux, macOS, Windows","未说明",{"notes":41,"python":39,"dependencies":42},"该项目是一个基于 Next.js 的 Web 应用，不需要 GPU。运行环境主要需要安装 Node.js 和 npm。需要配置 MongoDB 数据库连接以及 Google OAuth 认证凭证（Google ID 和 Client Secret）。建议参考官方文档获取 MongoDB URI 和 Google Cloud Console 的配置方法。",[43,44,45,46,47,48],"Next.js","MongoDB","NextAuth","TailwindCSS","Node.js","npm",[50,51],"语言模型","开发框架",[53,54,55],"nextjs","next14","nextjs14",3,"ready","2026-03-27T02:49:30.150509","2026-04-08T16:25:55.333911",[61,66,71,76,81,85],{"id":62,"question_zh":63,"answer_zh":64,"source_url":65},15470,"遇到 MongoDB Atlas 认证失败（Access Denied）或 Mongoose 无法保存数据到数据库怎么办？","通常由权限不足或 signIn 参数配置错误引起，请按以下步骤解决：\n1. **添加管理员权限**：登录 MongoDB Atlas，进入 'Database Access'，编辑 .env 文件中使用的用户，将 'Built-in Role' 设置为 'Atlas admin' 并保存。\n2. **修改 route.js 代码**：找到 `async signIn` 函数，将参数从 `{ profile }` 修改为 `{ account, profile, user, credentials }`。例如：`async signIn({ account, profile, user, credentials }) { ... }`。\n3. **检查环境变量**：确保 .env 文件中的 `MONGODB_URI` 包含了正确的用户名和密码。","https:\u002F\u002Fgithub.com\u002Fadrianhajdin\u002Fproject_next_14_ai_prompt_sharing\u002Fissues\u002F52",{"id":67,"question_zh":68,"answer_zh":69,"source_url":70},15471,"部署后主页 Feed 不更新，或者创建\u002F编辑帖子后首页没有反映最新数据？","这是 Next.js 缓存机制导致的问题。解决方案是在获取数据的 API 路由文件（如 `\u002Fapp\u002Fapi\u002Fprompt\u002Froute.js`）顶部添加以下代码以禁用缓存：\n`export const revalidate = 0;`\n\n如果首次访问仍无法加载数据（出现 MissingSchemaErrors），请确保在该路由文件中导入但未使用的 User 模型，例如：`import User from '@models\u002Fuser';`，以强制注册 Schema。","https:\u002F\u002Fgithub.com\u002Fadrianhajdin\u002Fproject_next_14_ai_prompt_sharing\u002Fissues\u002F35",{"id":72,"question_zh":73,"answer_zh":74,"source_url":75},15472,"运行时出现 'TypeError: Cannot read properties of null (reading 'image')' 或 'post.creator.image is undefined' 错误？","这是因为数据中的 `creator` 对象可能为 null 或未定义。需要在渲染组件（如 `PromptCard.jsx`）的 return 语句中添加可选链判断。将代码修改为：\n`return ( post && post.creator && (\n  \u002F\u002F 原有的 JSX 内容\n) );`\n这样可以确保只有当 post 和 post.creator 都存在时才渲染图像，避免空指针异常。","https:\u002F\u002Fgithub.com\u002Fadrianhajdin\u002Fproject_next_14_ai_prompt_sharing\u002Fissues\u002F93",{"id":77,"question_zh":78,"answer_zh":79,"source_url":80},15473,"在 Feed 组件中映射帖子列表时遇到渲染问题或数据结构不匹配怎么办？","如果在直接映射数组到组件时出现问题，可以尝试先在 `useEffect` 之外将数据转换为组件列表。例如在 `Feed.jsx` 中：\n```javascript\nconst promptCards = posts.map(post =>\n  \u003CPromptCard post={post} handleTagClick={() => {}} \u002F> \n);\nreturn (\n  \u003Csection className=\"feed\">\n    {\u002F* 其他内容 *\u002F}\n    {promptCards}\n  \u003C\u002Fsection>\n);\n```\n这种显式的转换有时能解决因异步状态更新导致的渲染问题。","https:\u002F\u002Fgithub.com\u002Fadrianhajdin\u002Fproject_next_14_ai_prompt_sharing\u002Fissues\u002F46",{"id":82,"question_zh":83,"answer_zh":84,"source_url":65},15474,"终端显示 'Operation users.findOne() buffering timed out after 10000ms' 错误？","这通常意味着应用程序无法连接到 MongoDB 数据库。请检查以下几点：\n1. 确认 `.env` 文件中的 `MONGODB_URI` 是否正确填写了完整的连接字符串（包含用户名和密码）。\n2. 确认 MongoDB Atlas 中的 IP 访问列表（Network Access）已允许当前服务器的 IP 地址（开发时可暂时设置为 0.0.0.0\u002F0）。\n3. 参考 Issue #52 的解决方案，确保数据库用户拥有 'Atlas admin' 权限。",{"id":86,"question_zh":87,"answer_zh":88,"source_url":75},15475,"部署到 Vercel 后出现 'Application error: a client-side exception has occurred'？","这通常是由于客户端尝试访问未定义的对象属性（如用户图像）导致的。最常见的原因是后端返回的数据中 `creator` 字段缺失或为 null。请参照 Issue #93 的修复方法，在组件渲染前增加空值检查：`return ( post && post.creator && ... )`。此外，检查浏览器控制台的具体报错信息以定位是哪个属性访问导致了崩溃。",[],[91,102,110,119,127,136],{"id":92,"name":93,"github_repo":94,"description_zh":95,"stars":96,"difficulty_score":56,"last_commit_at":97,"category_tags":98,"status":57},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,"2026-04-06T06:32:30",[99,51,100,101],"Agent","图像","数据工具",{"id":103,"name":104,"github_repo":105,"description_zh":106,"stars":107,"difficulty_score":56,"last_commit_at":108,"category_tags":109,"status":57},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[51,100,99],{"id":111,"name":112,"github_repo":113,"description_zh":114,"stars":115,"difficulty_score":116,"last_commit_at":117,"category_tags":118,"status":57},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",144730,2,"2026-04-07T23:26:32",[51,99,50],{"id":120,"name":121,"github_repo":122,"description_zh":123,"stars":124,"difficulty_score":116,"last_commit_at":125,"category_tags":126,"status":57},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107888,"2026-04-06T11:32:50",[51,100,99],{"id":128,"name":129,"github_repo":130,"description_zh":131,"stars":132,"difficulty_score":116,"last_commit_at":133,"category_tags":134,"status":57},4721,"markitdown","microsoft\u002Fmarkitdown","MarkItDown 是一款由微软 AutoGen 团队打造的轻量级 Python 工具，专为将各类文件高效转换为 Markdown 格式而设计。它支持 PDF、Word、Excel、PPT、图片（含 OCR）、音频（含语音转录）、HTML 乃至 YouTube 链接等多种格式的解析，能够精准提取文档中的标题、列表、表格和链接等关键结构信息。\n\n在人工智能应用日益普及的今天，大语言模型（LLM）虽擅长处理文本，却难以直接读取复杂的二进制办公文档。MarkItDown 恰好解决了这一痛点，它将非结构化或半结构化的文件转化为模型“原生理解”且 Token 效率极高的 Markdown 格式，成为连接本地文件与 AI 分析 pipeline 的理想桥梁。此外，它还提供了 MCP（模型上下文协议）服务器，可无缝集成到 Claude Desktop 等 LLM 应用中。\n\n这款工具特别适合开发者、数据科学家及 AI 研究人员使用，尤其是那些需要构建文档检索增强生成（RAG）系统、进行批量文本分析或希望让 AI 助手直接“阅读”本地文件的用户。虽然生成的内容也具备一定可读性，但其核心优势在于为机器",93400,"2026-04-06T19:52:38",[135,51],"插件",{"id":137,"name":138,"github_repo":139,"description_zh":140,"stars":141,"difficulty_score":56,"last_commit_at":142,"category_tags":143,"status":57},4487,"LLMs-from-scratch","rasbt\u002FLLMs-from-scratch","LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目，旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型（LLM）。它不仅是同名技术著作的官方代码库，更提供了一套完整的实践方案，涵盖模型开发、预训练及微调的全过程。\n\n该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型，却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码，用户能够透彻掌握 Transformer 架构、注意力机制等关键原理，从而真正理解大模型是如何“思考”的。此外，项目还包含了加载大型预训练权重进行微调的代码，帮助用户将理论知识延伸至实际应用。\n\nLLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API，而是渴望探究模型构建细节的技术人员而言，这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计：将复杂的系统工程拆解为清晰的步骤，配合详细的图表与示例，让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础，还是为未来研发更大规模的模型做准备",90106,"2026-04-06T11:19:32",[50,100,99,51]]