Twitter Clone 🐦

一个基于 Next.js 16 构建的全栈 Twitter 克隆项目,实现了社交媒体的核心功能。

📋 目录

技术栈
功能特性
项目结构
快速开始
环境变量配置
部署
核心文件说明

🛠️ 技术栈

核心框架

Next.js 16 - React 全栈框架
TypeScript - 类型安全
React 18 - UI 库

数据库 & 认证

Prisma - ORM 数据库工具
NextAuth.js - 身份认证
MongoDB / PostgreSQL - 数据库

UI 组件

Tailwind CSS - 样式框架
Radix UI - 无头组件库
React Icons - 图标库
Sonner - Toast 通知
React Dropzone - 文件上传

数据获取

SWR - React Hooks 数据获取库
Axios - HTTP 客户端

✨ 功能特性

👤 用户功能

✅ 用户注册/登录/登出
✅ 个人资料编辑 (头像、封面、个人简介)
✅ 用户关注/取消关注
✅ 用户主页展示

📝 帖子功能

✅ 发布推文(支持图片上传)
✅ 点赞/取消点赞推文
✅ 评论推文
✅ 推文详情页
✅ 推文时间线展示

🔔 通知系统

✅ 关注通知
✅ 点赞通知
✅ 评论通知
✅ 通知未读标记

🎨 UI/UX

✅ 响应式设计
✅ 模态框交互
✅ Toast 提示
✅ 加载状态
✅ 错误处理

📁 项目结构

twitter-clone/
├── 📱 app/                          # Next.js App Router
│   ├── api/                        # API 路由
│   │   ├── auth/[...nextauth]/    # NextAuth 认证端点
│   │   │   └── route.ts           # 🔑 认证配置 (CredentialsProvider)
│   │   ├── comments/              # 💬 评论 API
│   │   │   └── route.ts           # 创建评论,触发通知
│   │   ├── current/               # 👤 获取当前用户
│   │   │   └── route.ts           # 返回会话用户信息
│   │   ├── edit/                  # ✏️ 编辑用户资料
│   │   │   └── route.ts           # 更新用户名/简介/头像/封面
│   │   ├── follow/                # 🤝 关注/取消关注
│   │   │   └── route.ts           # 处理关注逻辑,创建通知
│   │   ├── like/                  # ❤️ 点赞/取消点赞
│   │   │   └── route.ts           # 处理点赞逻辑,创建通知
│   │   ├── notifications/         # 🔔 通知 API
│   │   │   └── [userId]/
│   │   │       └── route.ts       # 获取用户通知列表
│   │   ├── posts/                 # 📝 推文 API
│   │   │   ├── route.ts           # 创建推文,获取推文列表
│   │   │   └── [postId]/
│   │   │       └── route.ts       # 获取单条推文详情
│   │   ├── register/              # 📋 用户注册
│   │   │   └── route.ts           # 创建新用户 (bcrypt 加密)
│   │   └── users/                 # 👥 用户信息
│   │       ├── route.ts           # 获取用户列表
│   │       └── [userId]/
│   │           └── route.ts       # 获取指定用户信息
│   ├── notifications/             # 🔔 通知页面
│   │   └── page.tsx               # 显示通知列表
│   ├── posts/[postId]/           # 📄 推文详情页
│   │   └── page.tsx               # 推文详情 + 评论
│   ├── users/[userid]/           # 👤 用户主页
│   │   └── page.tsx               # 用户资料 + 推文列表
│   ├── layout.tsx                 # 🏗️ 根布局 (侧边栏+内容+关注栏)
│   ├── page.tsx                   # 🏠 首页 (推文流)
│   └── globals.css                # 🎨 全局样式
│
├── 🎨 components/                   # React 组件
│   ├── layout/                    # 布局组件
│   │   ├── Sidebar.tsx           # 📍 侧边栏导航 (首页/通知/个人)
│   │   ├── SidebarItem.tsx       # 🔘 侧边栏单项 (高亮/路由)
│   │   ├── SidebarLogo.tsx       # 🐦 Twitter Logo
│   │   ├── SidebarTwitterButton.tsx # ✍️ 发推按钮 (打开登录)
│   │   └── FollowBar.tsx         # 👥 推荐关注栏 (用户列表)
│   ├── modals/                    # 弹窗组件
│   │   ├── LoginModal.tsx        # 🔐 登录弹窗 (邮箱/密码)
│   │   ├── RegisterModal.tsx     # 📝 注册弹窗 (邮箱/密码/用户名)
│   │   └── EditModal.tsx         # ✏️ 编辑资料弹窗 (上传图片)
│   ├── posts/                     # 推文相关组件
│   │   ├── PostFeed.tsx          # 📰 推文流 (无限加载)
│   │   ├── PostItem.tsx          # 📄 单条推文卡片 (点赞/评论)
│   │   ├── CommentFeed.tsx       # 💬 评论流
│   │   └── CommendItem.tsx       # 💬 单条评论
│   ├── users/                     # 用户相关组件
│   │   ├── UserBio.tsx           # 📋 用户简介 (关注按钮/统计)
│   │   └── UserHero.tsx          # 🖼️ 用户封面 (编辑按钮)
│   ├── Avatar.tsx                 # 👤 头像组件 (点击跳转)
│   ├── Button.tsx                 # 🔘 按钮组件 (多种样式)
│   ├── Form.tsx                   # ✍️ 发推表单 (文本+图片)
│   ├── Header.tsx                 # 📌 页面头部 (返回按钮+标题)
│   ├── ImageUpload.tsx            # 📸 图片上传 (Cloudinary)
│   ├── Input.tsx                  # 📝 输入框组件
│   ├── Modal.tsx                  # 🪟 模态框基础组件
│   └── NotificationsFeed.tsx      # 🔔 通知流
│
├── 🪝 hooks/                        # 自定义 Hooks
│   ├── useCurrentUser.ts         # 👤 获取当前用户 (SWR)
│   ├── useUser.ts                # 👤 获取指定用户 (SWR)
│   ├── useUsers.ts               # 👥 获取用户列表 (SWR)
│   ├── usePost.ts                # 📄 获取单条推文 (SWR)
│   ├── usePosts.ts               # 📰 获取推文列表 (SWR)
│   ├── useLike.ts                # ❤️ 点赞逻辑 (乐观更新)
│   ├── useFollow.ts              # 🤝 关注逻辑 (乐观更新)
│   ├── useNotifications.ts       # 🔔 通知逻辑 (SWR)
│   ├── useLoginModal.ts          # 🔐 登录弹窗状态 (Zustand)
│   ├── useRegisterModal.ts       # 📝 注册弹窗状态 (Zustand)
│   └── useEditModal.ts           # ✏️ 编辑弹窗状态 (Zustand)
│
├── 🔧 lib/                          # 工具库
│   ├── prismadb.ts               # 💾 Prisma 客户端单例
│   ├── serverAuth.ts             # 🔑 服务端认证工具
│   ├── fetcher.ts                # 🔄 SWR fetcher (Axios)
│   └── utils.ts                  # 🛠️ 工具函数 (cn, clsx)
│
├── 🗄️ prisma/                      # Prisma 配置
│   └── schema.prisma             # 📊 数据库模型定义
│                                 # - User (用户)
│                                 # - Post (推文)
│                                 # - Comment (评论)
│                                 # - Notification (通知)
│
├── 📝 配置文件
│   ├── .env                      # 🔐 环境变量
│   ├── next.config.ts            # ⚙️ Next.js 配置
│   ├── tailwind.config.ts        # 🎨 Tailwind 配置
│   ├── tsconfig.json             # 📘 TypeScript 配置
│   ├── prisma.config.ts          # 💾 Prisma 配置
│   ├── components.json           # 🎨 Shadcn UI 配置
│   └── package.json              # 📦 依赖管理
│
└── 🖼️ public/                      # 静态资源
    └── images/
        └── placeholder.png       # 占位图

🚀 快速开始

1️⃣ 克隆项目

git clone <repository-url>
cd twitter-clone

2️⃣ 安装依赖

npm install

3️⃣ 配置环境变量

创建 .env 文件并配置以下变量:

# 数据库
DATABASE_URL="your_database_url"

# NextAuth
NEXTAUTH_SECRET="your_nextauth_secret"
NEXTAUTH_URL="http://localhost:3000"

4️⃣ 初始化数据库

# 生成 Prisma Client
npx prisma generate

# 同步数据库结构
npx prisma db push

# (可选) 打开 Prisma Studio 查看数据
npx prisma studio

5️⃣ 启动开发服务器

npm run dev

打开 http://localhost:3000 查看应用。

🔐 环境变量配置

变量名	说明	必需	示例
`DATABASE_URL`	数据库连接 URL	✅	`mongodb+srv://...` 或 `postgresql://...`
`NEXTAUTH_SECRET`	NextAuth 密钥	✅	使用 `openssl rand -base64 32` 生成
`NEXTAUTH_URL`	应用 URL	✅	`http://localhost:3000`
`NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME`	Cloudinary 云名称	❌	用于图片上传

📦 部署

Vercel ⚡

推送代码到 GitHub
在 Vercel 导入项目
配置环境变量
部署 🚀

🎯 核心文件说明

🔑 认证相关

app/api/auth/[...nextauth]/route.ts
- NextAuth 配置
- CredentialsProvider 邮箱密码登录
- bcrypt 密码验证
lib/serverAuth.ts
- 服务端认证工具
- 验证用户会话
- 返回当前用户
hooks/useCurrentUser.ts
- 客户端获取当前用户
- 使用 SWR 缓存

💾 数据库

prisma/schema.prisma
- 数据库模型定义
- User: 用户信息、关注关系、点赞列表
- Post: 推文内容、作者、点赞数、评论
- Comment: 评论内容、作者、所属推文
- Notification: 通知类型、接收者、发送者
lib/prismadb.ts
- Prisma 客户端单例
- 防止开发环境重复实例化

🎣 核心 Hooks

hooks/useLike.ts ⭐
- 点赞功能核心逻辑
- 使用 SWR 乐观更新
- 后端返回最新数据覆盖缓存
- 未登录时打开登录弹窗
hooks/useFollow.ts
- 关注功能逻辑
- 乐观更新关注状态
- 触发通知创建
hooks/usePost.ts & hooks/usePosts.ts
- 推文数据获取
- SWR 自动缓存和重新验证
- 支持按用户 ID 筛选

🎨 UI 组件

components/Form.tsx
- 发推表单
- 支持文本和图片
- 字符计数
components/posts/PostItem.tsx
- 推文卡片
- 显示作者、内容、时间
- 点赞、评论交互
components/layout/Sidebar.tsx
- 侧边栏导航
- 响应式设计
- 高亮当前页面

📡 API 路由

app/api/like/route.ts
- POST: 点赞推文
- DELETE: 取消点赞
- 创建点赞通知
app/api/follow/route.ts
- POST: 关注用户
- DELETE: 取消关注
- 创建关注通知
app/api/posts/route.ts
- GET: 获取推文列表 (支持 userId 参数)
- POST: 创建新推文

开发流程

Fork 本仓库
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
开启 Pull Request

Made with ❤️ using Next.js

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
app		app
components		components
hooks		hooks
lib		lib
prisma		prisma
public		public
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
prisma.config.ts		prisma.config.ts
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Twitter Clone 🐦

📋 目录

🛠️ 技术栈

核心框架

数据库 & 认证

UI 组件

数据获取

✨ 功能特性

👤 用户功能

📝 帖子功能

🔔 通知系统

🎨 UI/UX

📁 项目结构

🚀 快速开始

1️⃣ 克隆项目

2️⃣ 安装依赖

3️⃣ 配置环境变量

4️⃣ 初始化数据库

5️⃣ 启动开发服务器

🔐 环境变量配置

📦 部署

Vercel ⚡

🎯 核心文件说明

🔑 认证相关

💾 数据库

🎣 核心 Hooks

🎨 UI 组件

📡 API 路由

开发流程

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages