project_next_14_ai_prompt_sharing

GitHub
3k 440 较难 1 次阅读 2天前语言模型开发框架
AI 解读 由 AI 自动生成,仅供参考

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
GPU

未说明

内存

未说明

依赖
notes该项目是一个基于 Next.js 的 Web 应用,不需要 GPU。运行环境主要需要安装 Node.js 和 npm。需要配置 MongoDB 数据库连接以及 Google OAuth 认证凭证(Google ID 和 Client Secret)。建议参考官方文档获取 MongoDB URI 和 Google Cloud Console 的配置方法。
python未说明
Next.js
MongoDB
NextAuth
TailwindCSS
Node.js
npm
project_next_14_ai_prompt_sharing hero image

快速开始


Project Banner
Next.js mongodb tailwindcss

Next.js 14 AI 提示词分享应用

按照我们在 JavaScript Mastery YouTube 上的详细教程,一步步构建这个项目。加入 JSM 大家庭吧! 📋 目录
  1. 🤖 简介
  2. ⚙️ 技术栈
  3. 🔋 功能
  4. 🤸 快速开始
  5. 🕸️ 代码片段
  6. 🔗 链接
  7. 🚀 更多

🚨 教程

本仓库包含我们 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 ConsoleCryptpool(用于生成随机的 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 艺术创作变得触手可及。

162.1k|★★★☆☆|今天
开发框架图像Agent

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 真正成长为懂上

139k|★★☆☆☆|今天
开发框架Agent语言模型

ComfyUI

ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎,专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式,采用直观的节点式流程图界面,让用户通过连接不同的功能模块即可构建个性化的生成管线。 这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景,也能自由组合模型、调整参数并实时预览效果,轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性,不仅支持 Windows、macOS 和 Linux 全平台,还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构,并率先支持 SDXL、Flux、SD3 等前沿模型。 无论是希望深入探索算法潜力的研究人员和开发者,还是追求极致创作自由度的设计师与资深 AI 绘画爱好者,ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能,使其成为当前最灵活、生态最丰富的开源扩散模型工具之一,帮助用户将创意高效转化为现实。

107.7k|★★☆☆☆|2天前
开发框架图像Agent

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 提供专业版解决方案,具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能,满足公司对数据隐私和个性化管理的高标准要求。

87.6k|★★☆☆☆|今天
开发框架语言模型

ML-For-Beginners

ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程,旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周,包含 26 节精炼课程和 52 道配套测验,内容涵盖从基础概念到实际应用的完整流程,有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。 无论是希望转型的开发者、需要补充算法背景的研究人员,还是对人工智能充满好奇的普通爱好者,都能从中受益。课程不仅提供了清晰的理论讲解,还强调动手实践,让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持,通过自动化机制提供了包括简体中文在内的 50 多种语言版本,极大地降低了全球不同背景用户的学习门槛。此外,项目采用开源协作模式,社区活跃且内容持续更新,确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路,ML-For-Beginners 将是理想的起点。

85k|★★☆☆☆|今天
图像数据工具视频

ragflow

RAGFlow 是一款领先的开源检索增强生成(RAG)引擎,旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体(Agent)能力相结合,不仅支持从各类文档中高效提取知识,还能让模型基于这些知识进行逻辑推理和任务执行。 在大模型应用中,幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构(如表格、图表及混合排版),显著提升了信息检索的准确度,从而有效减少模型“胡编乱造”的现象,确保回答既有据可依又具备时效性。其内置的智能体机制更进一步,使系统不仅能回答问题,还能自主规划步骤解决复杂问题。 这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统,还是致力于探索大模型在垂直领域落地的创新者,都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口,既降低了非算法背景用户的上手门槛,也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目,它正成为连接通用大模型与行业专有知识之间的重要桥梁。

77.1k|★★★☆☆|2天前
Agent图像开发框架