【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
里面
使用:
import { Button } from "@/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}