【01】从0到1构建AI生成思维导图应用 -- 技术栈选择以及项目构建

【01】从0到1构建AI生成思维导图应用 – 技术栈选择以及项目构建

大家好！最近自己做了一个完全免费的AI生成思维导图的网站，支持下载，编辑和对接微信公众号，可以在这里体验：https://lt2mind.zeabur.app/

技术栈选择

作为独立开发，要想快速构建一个应用，我会推荐下面的几个技术栈：

前端+后端： nextjs
UI库 (css)：tailwindcss+shadcn
纯 AI 后端：flask 或者 fastapi
身份验证：clerk, next-auth
agent搭建：coze, dify
数据库：mongodb
部署：vercel（海外），zeabur（国内）
支付：stripe

本项目主要是使用nextjs，clerk，coze，mongodb 和 zeabur搭建的应用；只需要三天就能完成从开发到上线的全过程，且完全免费！

nextjs 项目构建

安装 Node.js 和 npm
确保已经安装了 Node.js 和 npm（Node 包管理器）。你可以通过以下命令检查是否安装（推荐也使用yarn或pnpm）：

node -v
npm -v

创建新的 Next.js 项目
使用 npm 或 Yarn 来创建一个新的 Next.js 项目：

npx create-next-app@latest my-nextjs-app
//or
yarn create next-app my-nextjs-app

在配置页面，一定要选择 ts, app router 和 tailwindcss，这样nextjs会自动帮你配置这些东西。
3. 启动开发服务器
完成安装后，启动项目服务器：

npm run dev

开发服务器启动后，你可以在浏览器中打开 http://localhost:3000 看到你的 Next.js 应用。目前你可以直接在项目中使用tailwindcss

此外，app router 使用 pages 文件夹来处理路由。你可以在 pages 文件夹中创建新的文件来定义新的页面。例如，创建一个 about.js 文件：

// pages/about.js
export default function About() {
    
    
  return <h1>About Page</h1>;
}

添加shadcn-ui

ShadCN UI 是一个用于构建 React 应用程序的用户界面组件库。它提供了一组预构建的、可定制的组件，使开发者可以快速构建具有一致风格和行为的用户界面。

组件丰富：提供了丰富的 UI 组件，包括按钮、表单控件、导航栏、卡片、模态框等，满足大多数常见的 UI 需求。
高度可定制：组件样式可以通过各种方式进行定制，适应不同项目的设计需求。
响应式设计：内置的组件具有良好的响应式设计，确保在不同设备和屏幕尺寸上的良好显示效果。
易于集成：与主流的前端框架（如 React）无缝集成，提供了友好的 API，降低了学习成本和集成难度。
开源和社区驱动：shadcn有一个活跃的社区支持，开发者可以提交问题、贡献代码，并从社区获得帮助。

在next项目中，配置shadcn：

npx shadcn-ui@latest init

选择风格：

Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? › no / yes

添加组件：
例如，要添加button：

npx shadcn-ui@latest add button

这样 shadcn 会自动在你的代码文件夹中中添加button组件，通常在 /component/ui 里面

扫描二维码关注公众号，回复： 17457746 查看本文章

使用：

import {
    
     Button } from "@/components/ui/button"

export default function Home() {
    
    
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}