使用Next.js开发一个类似于领英的全栈应用程序 | Full Stack LinkedIn Prototype With Next.js

构建专业社交网络应用

构建并部署一个使用 NextJS、Drizzle ORM、PostgreSQL、TailwindCSS、NextAuth 和 Vercel 的专业社交网络应用。

你将会学到的

• 构建一个精良、全栈且现代化的商业网络应用
• 实施现代应用中常见的特性，如分页、排序、身份验证等
• 充分利用 NextJS 的特性，包括应用路由、路由组、服务器组件、客户端组件、服务器动作和缓存
• 从零开始构建推荐系统
• 将应用部署到 Vercel 并解决部署中可能遇到的问题

要求

• 建议具备基本的 Web 开发和命令行操作知识
• 建议具备基本的 JavaScript 和 React 知识
• 建议具备基本的 Git 和 GitHub 使用知识

说明

在这门全面的课程——“全栈 Next.js：领英原型”中，你将踏上一场变革之旅，获得开发尖端全栈网络应用所需的知识与技能。本课程旨在使你熟练掌握 Next.js，这是一个构建现代网络应用的强大框架。

让我们一窥你将学到的内容：

• 使用 Next.js 开发：掌握使用 Next.js 构建全栈网络应用的艺术，利用其无缝的服务器端渲染能力。
• 数据库交互：利用 TablePlus 与 PostgreSQL 数据库无缝互动，亲自动手管理与检索数据。
• 设计与 TailwindCSS：运用 TailwindCSS 提升应用的视觉吸引力，这是一个以其灵活性和响应性著称的实用优先 CSS 框架。
• 缓存策略：探索 Next.js 中的各种缓存机制，优化性能，提升用户体验。
• 使用 NextAuth 的身份验证：无缝设置 OAuth 认证，确保安全友好的登录流程。
• Drizzle ORM 与数据库更新：深入研究 Drizzle ORM 架构，高效管理数据库更新，并使用 Drizzle Kit 轻松推送架构变更。
• 仪表板构建：使用 Mantine AppShell 构建动态、功能丰富的仪表板，提高应用的可用性。
• 响应式设计：运用 Mantine AppShell 和 TailwindCSS 断点实现响应式设计原则，确保跨设备的无缝体验。
• Web 开发模式：实施如分页、排序和过滤等常见 Web 开发模式，创造直观的用户体验。
• 高级数据库功能：实现 pg_trgm 的模糊搜索。
• 脚本编写：编写 TypeScript 脚本来填充数据库，生成逼真的假数据。
• 表单构建：使用 React 的 useFormState 钩子和服务器动作构造稳健的表单，同时利用 zod 在服务器端验证数据。
• 富文本编辑：利用 Mantine 的 TipTap 富文本编辑器增强应用内的内容创作。
• 数据可视化：使用 Mantine 图表构建引人注目的图表，为应用洞察力增添深度与清晰度。
• 深色模式切换器：实现基于本地存储的深色模式切换器，为用户提供个性化且视觉舒适体验。
• 推荐系统构建：使用余弦相似性和 K 最近邻算法构建推荐系统，并使用 Vitest 进行单元测试以验证其功能。
• 部署与调试：无缝将应用部署至 Vercel，同时学习像专业人士一样调试意外的部署挑战。

此课程面向哪些人

面向希望使用 NextJS 探索全栈开发的初级至中级 Web 开发者；面向寻求利用现代技术栈构建商业仪表板应用的初级至中级 Web 开发者。