project_next_14_ai_prompt_sharing
project_next_14_ai_prompt_sharing 是一个基于 Next.js 14 构建的全栈开源项目,旨在打造一个现代化的 AI 提示词(Prompt)分享社区。它解决了开发者在学习和实践最新 React 框架时缺乏完整实战案例的痛点,同时为 AI 爱好者提供了一个发现、创建和管理高质量提示词的协作平台。
该项目非常适合希望掌握 Next.js 14 新特性的前端开发者、全栈工程师以及计算机专业学生。通过跟随配套的详细教程,用户不仅能理解理论概念,还能亲手搭建一个具备完整功能的现代 Web 应用。普通 AI 用户也可从中获益,利用平台浏览和复用社区分享的创意提示词。
在技术亮点方面,项目深度整合了 MongoDB 数据库进行数据存储,采用 NextAuth 实现安全的 Google 账号登录,并利用 TailwindCSS 打造了符合当下流行的“玻璃拟态”风格的响应式界面。功能上涵盖了提示词的增删改查、个人主页展示、标签搜索以及一键复制等核心特性。无论是作为学习全栈开发的入门教材,还是作为构建 AI 社区产品的参考模板,它都提供了极具价值的代码架构与实践思路。
使用场景
某小型 AI 创业团队希望快速构建一个内部知识库,让成员能高效分享和复用针对不同业务场景的优质 AI 提示词(Prompts),以避免重复造轮子。
没有 project_next_14_ai_prompt_sharing 时
- 团队成员将提示词散落在 Slack 聊天记录或个人笔记中,检索困难,知识资产极易流失。
- 缺乏统一的权限管理,无法区分谁创建了内容,也难以追踪提示词的来源和修改历史。
- 手动复制粘贴容易出错,且没有“一键复制”功能,降低了日常调用的效率。
- 无法按标签分类搜索,新人入职时难以快速找到特定领域(如“文案生成”或“代码调试”)的成熟方案。
- 从零开发需耗费数周时间处理 Next.js 路由、MongoDB 数据库连接及 Google 登录认证等底层架构。
使用 project_next_14_ai_prompt_sharing 后
- 建立了集中的提示词共享平台,所有成员均可浏览社区内容并贡献自己的独家技巧,知识沉淀有序。
- 集成 NextAuth Google 认证,自动展示用户个人主页及其创建的所有提示词,权责清晰且便于追溯。
- 内置“复制到剪贴板”功能,配合玻璃拟态的现代 UI 设计,让获取和使用提示词变得流畅且愉悦。
- 支持通过特定标签精准搜索,团队成员能秒级定位所需领域的优质提示词,大幅提升协作效率。
- 基于成熟的 Next.js 14 全栈架构,团队仅需关注业务逻辑,几天内即可部署上线具备增删改查功能的应用。
project_next_14_ai_prompt_sharing 将原本繁琐的全栈开发工作转化为即插即用的解决方案,帮助团队以最低成本快速搭建起高价值的 AI 知识协作生态。
运行环境要求
- Linux
- macOS
- Windows
未说明
未说明

快速开始
Next.js 14 AI 提示词分享应用
🚨 教程
本仓库包含我们 YouTube 频道 JavaScript Mastery 上提供的深度教程对应的代码。
如果你更喜欢通过视频学习,这里就是你的完美资源。跟随我们的教程,以适合初学者的方式逐步学习如何构建此类项目!
🤖 简介
开发一个 Next.js 应用程序,突出展示 Next.js 的核心特性,并结合 MongoDB 数据库和 NextAuth 身份验证,实现一个全面的 CRUD AI 提示词分享系统。
如果你刚开始学习并需要帮助或遇到任何问题,欢迎加入我们拥有超过 27,000 名成员的活跃 Discord 社区。这里是一个互相帮助的地方。
⚙️ 技术栈
- Next.js
- MongoDB
- NextAuth
- TailwindCSS
🔋 功能
👉 采用玻璃蒙太奇风格的现代设计:采用现代且视觉上吸引人的设计,融入玻璃蒙太奇趋势风格,呈现出时尚而前卫的外观。
👉 发现与分享 AI 提示词:允许用户发现社区共享的 AI 提示词,并创建自己的提示词与大家分享。
👉 编辑和删除已创建的提示词:用户可以随时编辑自己创建的提示词,并在需要时将其删除。
👉 个人主页:每位用户都拥有专属的个人主页,展示其所有创建的提示词,以便清晰了解自己的贡献。
👉 查看他人主页:用户可以浏览其他创作者的主页,查看他们分享的提示词,从而增强社区归属感。
👉 复制到剪贴板:实现便捷的“复制到剪贴板”功能,方便用户轻松复制 AI 提示词以供使用。
👉 按特定标签搜索提示词:允许用户根据特定标签搜索提示词,从而更轻松地找到相关主题的提示词。
👉 使用 NextAuth 进行 Google 身份验证:通过 NextAuth 实现安全的 Google 身份验证,确保流畅且值得信赖的登录体验。
👉 响应式网站:开发完全响应式的网站,以确保在各种设备上都能获得最佳用户体验,从桌面到智能手机。
以及更多功能,包括代码架构和可重用性。
🤸 快速开始
按照以下步骤,在本地机器上设置该项目。
先决条件
请确保您的机器上已安装以下工具:
克隆仓库
git clone https://github.com/adrianhajdin/project_next_13_ai_prompt_sharing.git
cd project_next_13_ai_prompt_sharing
安装依赖
使用 npm 安装项目依赖:
npm install
配置环境变量
在项目的根目录下创建一个名为 .env 的文件,并添加以下内容:
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_URL_INTERNAL=http://localhost:3000
NEXTAUTH_SECRET=
GOOGLE_ID=
GOOGLE_CLIENT_SECRET=
MONGODB_URI=
将占位符替换为您的实际凭据。您可以通过在以下相应网站上注册来获取这些凭据:Google Cloud Console、Cryptpool(用于生成随机的 Auth Secret)以及 MongoDB。
运行项目
npm run dev
在浏览器中打开 http://localhost:3000,即可查看项目。
🕸️ 代码片段
globals.css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
注意:此渐变网格背景的样式深受该优秀网站(https://dub.sh)的创作者启发——所有功劳归于他们!
*/
.main {
width: 100vw;
min-height: 100vh;
position: fixed;
display: flex;
justify-content: center;
padding: 120px 24px 160px 24px;
pointer-events: none;
}
.main:before {
background: radial-gradient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%);
position: absolute;
content: "";
z-index: 2;
width: 100%;
height: 100%;
top: 0;
}
.main:after {
content: "";
background-image: url("/assets/images/grid.svg");
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
opacity: 0.4;
filter: invert(1);
}
.gradient {
height: fit-content;
z-index: 3;
width: 100%;
max-width: 640px;
background-image: radial-gradient(
at 27% 37%,
hsla(215, 98%, 61%, 1) 0px,
transparent 0%
),
radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),
radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),
radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),
radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),
radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%);
position: absolute;
content: "";
width: 100%;
height: 100%;
filter: blur(100px) saturate(150%);
top: 80px;
opacity: 0.15;
}
@media screen and (max-width: 640px) {
.main {
padding: 0;
}
}
/* Tailwind 样式 */
.app {
@apply relative z-10 flex justify-center items-center flex-col max-w-7xl mx-auto sm:px-16 px-6;
}
.black_btn {
@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;
}
.outline_btn {
@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;
}
.head_text {
@apply mt-5 text-5xl font-extrabold leading-[1.15] text-black sm:text-6xl;
}
.orange_gradient {
@apply bg-gradient-to-r from-amber-500 via-orange-600 to-yellow-500 bg-clip-text text-transparent;
}
.green_gradient {
@apply bg-gradient-to-r from-green-400 to-green-500 bg-clip-text text-transparent;
}
.blue_gradient {
@apply bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent;
}
.desc {
@apply mt-5 text-lg text-gray-600 sm:text-xl max-w-2xl;
}
.search_input {
@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;
}
.copy_btn {
@apply w-7 h-7 rounded-full bg-white/10 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur flex justify-center items-center cursor-pointer;
}
.glassmorphism {
@apply rounded-xl border border-gray-200 bg-white/20 shadow-[inset_10px_-50px_94px_0_rgb(199,199,199,0.2)] backdrop-blur p-5;
}
.prompt_layout {
@apply space-y-6 py-8 sm:columns-2 sm:gap-6 xl:columns-3;
}
/* 动态组件 */
.feed {
@apply mt-16 mx-auto w-full max-w-xl flex justify-center items-center flex-col gap-2;
}
/* 表单组件 */
.form_textarea {
@apply w-full flex rounded-lg h-[200px] mt-2 p-3 text-sm text-gray-500 outline-0;
}
.form_input {
@apply w-full flex rounded-lg mt-2 p-3 text-sm text-gray-500 outline-0;
}
/* 导航组件 */
.logo_text {
@apply max-sm:hidden font-satoshi font-semibold text-lg text-black tracking-wide;
}
.dropdown {
@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;
}
.dropdown_link {
@apply text-sm font-inter text-gray-700 hover:text-gray-500 font-medium;
}
/* 提示卡组件 */
.prompt_card {
@apply flex-1 break-inside-avoid rounded-lg border border-gray-300 bg-white/20 bg-clip-padding p-6 pb-4 backdrop-blur-lg backdrop-filter md:w-[360px] w-full h-fit;
}
.flex-center {
@apply flex justify-center items-center;
}
.flex-start {
@apply flex justify-start items-start;
}
.flex-end {
@apply flex justify-end items-center;
}
.flex-between {
@apply flex justify-between items-center;
}
jsconfig.json
{
"compilerOptions": {
"paths": {
"@*": ["./*"]
}
}
}
route.js
import Prompt from "@models/prompt";
import { connectToDB } from "@utils/database";
export const GET = async (request, { params }) => {
try {
await connectToDB()
const prompt = await Prompt.findById(params.id).populate("creator")
if (!prompt) return new Response("Prompt Not Found", { status: 404 });
return new Response(JSON.stringify(prompt), { status: 200 })
} catch (error) {
return new Response("Internal Server Error", { status: 500 });
}
}
export const PATCH = async (request, { params }) => {
const { prompt, tag } = await request.json();
try {
await connectToDB();
// 查找现有提示并更新
const existingPrompt = await Prompt.findById(params.id);
if (!existingPrompt) {
return new Response("Prompt not found", { status: 404 });
}
// 更新提示内容
existingPrompt.prompt = prompt;
existingPrompt.tag = tag;
await existingPrompt.save();
return new Response("Successfully updated the Prompts", { status: 200 });
} catch (error) {
return new Response("Error Updating Prompt", { status: 500 });
}
};
export const DELETE = async (request, { params }) => {
try {
await connectToDB();
// 根据ID删除提示
await Prompt.findByIdAndRemove(params.id);
return new Response("Prompt deleted successfully", { status: 200 });
} catch (error) {
return new Response("Error deleting prompt", { status: 500 });
}
};
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
fontFamily: {
satoshi: ['Satoshi', 'sans-serif'],
inter: ['Inter', 'sans-serif'],
},
colors: {
'primary-orange': '#FF5722',
}
},
},
plugins: [],
}
user.js
username: {
type: String,
required: [true, 'Username is required!'],
match: [/^(?=.{8,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/, "Username invalid, it should contain 8-20 alphanumeric letters and be unique!"]
},
🔗 链接
项目中使用的资源可以在这里找到 这里
🚀 更多
通过 Next.js 14 专业课程提升你的技能
喜欢创建这个项目吗?快来深入我们的 PRO 课程,开启更丰富的学习之旅吧!这些课程包含详尽的讲解、酷炫的功能和练习,助你快速提升技能。赶紧试试看!
通过专家培训计划加速你的职业发展
如果你不仅想要一门课程,还想深入了解我们的学习方式以及如何应对技术挑战,那就加入我们的个性化大师班吧!我们涵盖最佳实践、多种 Web 技能,并提供导师指导,帮助你增强信心。让我们一起学习、共同成长!
常见问题
相似工具推荐
stable-diffusion-webui
stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面,旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点,将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。 无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师,还是想要深入探索模型潜力的开发者与研究人员,都能从中获益。其核心亮点在于极高的功能丰富度:不仅支持文生图、图生图、局部重绘(Inpainting)和外绘(Outpainting)等基础模式,还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外,它内置了 GFPGAN 和 CodeFormer 等人脸修复工具,支持多种神经网络放大算法,并允许用户通过插件系统无限扩展能力。即使是显存有限的设备,stable-diffusion-webui 也提供了相应的优化选项,让高质量的 AI 艺术创作变得触手可及。
everything-claude-code
everything-claude-code 是一套专为 AI 编程助手(如 Claude Code、Codex、Cursor 等)打造的高性能优化系统。它不仅仅是一组配置文件,而是一个经过长期实战打磨的完整框架,旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。 通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能,everything-claude-code 能显著提升 AI 在复杂任务中的表现,帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略,使得模型响应更快、成本更低,同时有效防御潜在的攻击向量。 这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库,还是需要 AI 协助进行安全审计与自动化测试,everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目,它融合了多语言支持与丰富的实战钩子(hooks),让 AI 真正成长为懂上
ComfyUI
ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎,专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式,采用直观的节点式流程图界面,让用户通过连接不同的功能模块即可构建个性化的生成管线。 这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景,也能自由组合模型、调整参数并实时预览效果,轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性,不仅支持 Windows、macOS 和 Linux 全平台,还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构,并率先支持 SDXL、Flux、SD3 等前沿模型。 无论是希望深入探索算法潜力的研究人员和开发者,还是追求极致创作自由度的设计师与资深 AI 绘画爱好者,ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能,使其成为当前最灵活、生态最丰富的开源扩散模型工具之一,帮助用户将创意高效转化为现实。
NextChat
NextChat 是一款轻量且极速的 AI 助手,旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性,以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发,NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。 这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言,它也提供了便捷的自托管方案,支持一键部署到 Vercel 或 Zeabur 等平台。 NextChat 的核心亮点在于其广泛的模型兼容性,原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型,让用户在一个界面即可自由切换不同 AI 能力。此外,它还率先支持 MCP(Model Context Protocol)协议,增强了上下文处理能力。针对企业用户,NextChat 提供专业版解决方案,具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能,满足公司对数据隐私和个性化管理的高标准要求。
ML-For-Beginners
ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程,旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周,包含 26 节精炼课程和 52 道配套测验,内容涵盖从基础概念到实际应用的完整流程,有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。 无论是希望转型的开发者、需要补充算法背景的研究人员,还是对人工智能充满好奇的普通爱好者,都能从中受益。课程不仅提供了清晰的理论讲解,还强调动手实践,让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持,通过自动化机制提供了包括简体中文在内的 50 多种语言版本,极大地降低了全球不同背景用户的学习门槛。此外,项目采用开源协作模式,社区活跃且内容持续更新,确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路,ML-For-Beginners 将是理想的起点。
ragflow
RAGFlow 是一款领先的开源检索增强生成(RAG)引擎,旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体(Agent)能力相结合,不仅支持从各类文档中高效提取知识,还能让模型基于这些知识进行逻辑推理和任务执行。 在大模型应用中,幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构(如表格、图表及混合排版),显著提升了信息检索的准确度,从而有效减少模型“胡编乱造”的现象,确保回答既有据可依又具备时效性。其内置的智能体机制更进一步,使系统不仅能回答问题,还能自主规划步骤解决复杂问题。 这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统,还是致力于探索大模型在垂直领域落地的创新者,都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口,既降低了非算法背景用户的上手门槛,也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目,它正成为连接通用大模型与行业专有知识之间的重要桥梁。

