星颖 发表于 2026-3-3 22:03:52

使用 Next.js、React、Tailwind 和 Shadcn 构建的实时聊天应用

https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 使用 Next.js、React、Tailwind 和 Shadcn 构建的实时聊天应用
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 14. AudioVideo call
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 9. Groups
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 13. File upload
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 3. NextJS Basics (optional)
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 15. Publishing Progressive Web App
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 5. Layout and Navigation
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 15. Publishing Progressive Web App
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 2. Project Setup
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 1. Introduction
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 12. Emoji picker
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 6. Dark Mode
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 7. Adding Friends
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 10. Read receipts
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 8. Conversations
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 11. Build & Deploy
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 5. Layout and Navigation
 https://cdn.ldstatic.com/images/emoji/twemoji/file_folder.png?v=15 4. Database & Auth setup
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Rendering audiovideo calls--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Rendering audiovideo calls--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Rendering call status--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Rendering call status--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. LiveKit setup--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. LiveKit setup--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. LiveKit setup--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Rendering audiovideo calls--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Rendering call status--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Introduction to NextJS--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Routing in NextJS--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Client vs Server components--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Routing in NextJS--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Client vs Server components--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Introduction to NextJS--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Introduction to NextJS--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Routing in NextJS--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Client vs Server components--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Adding imagevideofile uploads--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Adding imagevideofile uploads--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Rendering image and video messages--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Rendering image and video messages--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Rendering file messages--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Setting up uploadthing--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Setting up uploadthing--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Rendering file messages--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Rendering file messages--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Setting up uploadthing--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Adding imagevideofile uploads--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Rendering image and video messages--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Add dialog for creating groups--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 5. Leave group--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Delete group--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Rendering groups in conversations list--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Rendering groups in conversations list--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Backend for creating groups--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 5. Leave group--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Backend for creating groups--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Delete group--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Rendering groups in conversations list--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Delete group--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Backend for creating groups--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Add dialog for creating groups--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Add dialog for creating groups--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 5. Leave group--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. shadcnui Setup--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. NextJS Project Setup--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. shadcnui Setup--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. shadcnui Setup--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. NextJS Project Setup--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. NextJS Project Setup--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Setting up frontend routes--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. PWA and manifest setup--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Build and deploy to desktop and mobile--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Metadata and Next config setup--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Metadata and Next config setup--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Metadata and Next config setup--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Build and deploy to desktop and mobile--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. PWA and manifest setup--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Build and deploy to desktop and mobile--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. PWA and manifest setup--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Adding theme switching--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Adding theme switching--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Adding theme switching--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Creating attachments popover--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Adding the emoji picker--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Connecting emoji picker to chat input--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Connecting emoji picker to chat input--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Creating attachments popover--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Connecting emoji picker to chat input--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Adding the emoji picker--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Creating attachments popover--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Adding the emoji picker--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2.1 realtime-chat-app.zip
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Introduction--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Before we begin.html
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Introduction--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Introduction--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 6. Accept friend request--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Showing pending request count--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Showing pending request count--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 6. Accept friend request--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Showing pending request count--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 5. Deny friend request--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Add dialog for sending requests--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Backend for creating friend request--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 5. Deny friend request--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Render list of requests--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Add dialog for sending requests--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Render list of requests--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 5. Deny friend request--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 6. Accept friend request--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Render list of requests--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Backend for creating friend request--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Backend for creating friend request--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Add dialog for sending requests--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Build & deploy to Vercel--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Build & deploy to Vercel--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Build & deploy to Vercel--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Adding a custom domain--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Adding a custom domain--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Adding a custom domain--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Adding read receipts to conversations--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Showing unseen messages count--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Showing unseen messages count--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Adding read receipts to conversations--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Backend for read receipts--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Adding read receipts to conversations--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Showing unseen messages count--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Backend for read receipts--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Backend for read receipts--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Chat input and sending messages--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Render active conversation--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Rendering conversation messages--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 5. Render last message in conversations list--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Render list of conversations--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Render active conversation--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 6. Removing friends--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 6. Removing friends--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Render active conversation--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 6. Removing friends--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Chat input and sending messages--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Rendering conversation messages--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Chat input and sending messages--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Render list of conversations--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Render list of conversations--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Rendering conversation messages--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 5. Render last message in conversations list--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 5. Render last message in conversations list--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Setting up frontend routes--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Items list and conversation container--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Sidebar & adding navigation--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Setting up frontend routes--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Items list and conversation container--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Sidebar & adding navigation--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Items list and conversation container--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Sidebar & adding navigation--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Clerk Auth Setup--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Storing user data in Convex DB--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Storing user data in Convex DB--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Integrating Convex with Clerk--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Clerk Auth Setup--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Integrating Convex with Clerk--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 4. Storing user data in Convex DB--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Convex DB Setup--.mp4
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Convex DB Setup--.en.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 1. Convex DB Setup--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 3. Integrating Convex with Clerk--.en_CN.srt
  https://cdn.ldstatic.com/images/emoji/twemoji/page_facing_up.png?v=15 2. Clerk Auth Setup--.en.srt
我用夸克网盘给你分享了「使用 Next.js、React、Tailwind 和 Shadcn 构建的实时聊天应用」,点击链接或复制整段内容,打开「夸克APP」即可获取。
/~f48c3LrkFA~:/

下载地址:
**** Hidden Message *****
页: [1]
查看完整版本: 使用 Next.js、React、Tailwind 和 Shadcn 构建的实时聊天应用