⚡

项目架构Skill project-architecture

这是一个关于现代Web项目架构与开发技术栈的文档。它详细介绍了使用Next.js、TypeScript、Tailwind CSS、Docusaurus、Better Auth、PostgreSQL和Drizzle ORM等技术构建混合应用（Web应用+文档站点）的完整方案。内容涵盖技术选型、目录结构、关键架构模式（如共享认证）和开发命令，适用于全栈开发、前端架构师和项目管理者进行技术决策和项目搭建。关键词：Next.js, TypeScript, 全栈开发, 项目架构, 技术栈, 混合应用, 认证集成, 开发流程。

架构设计 0 次安装 2 次浏览 更新于 3/1/2026

名称: 项目架构 description: 项目技术栈、目录结构和架构模式概述。

项目架构与技术栈

技术栈

  • 框架: Next.js 15 (App Router)
  • 语言: TypeScript
  • 样式: Tailwind CSS v4, CSS Modules (用于特定组件)
  • 文档/内容: Docusaurus (位于 textbook/ 目录)
  • 认证: Better Auth (better-auth)
  • 数据库: PostgreSQL (NeonDB)
  • ORM: Drizzle ORM
  • UI组件: Lucide React 图标, 自定义组件

目录结构

  • /app: Next.js App Router 页面和布局。
  • /components: 可复用的 UI 组件。
    • /auth: 与认证相关的组件 (表单等)。
  • /lib: 工具函数和共享逻辑。
    • auth-client.ts: Better Auth 客户端配置。
    • auth.ts: Better Auth 服务器配置。
  • /db: 数据库模式和连接逻辑。
  • /drizzle: 数据库迁移文件。
  • /textbook: 用于文档/内容的 Docusaurus 实例。
    • /src: Docusaurus 源文件。

关键模式

  • 混合应用: 结合了 Next.js 网络应用 (营销、认证、仪表板) 和 Docusaurus 文档站点。
  • 认证集成: 通过 Cookie/会话 (由 AuthBar 处理) 在 Next.js 和 Docusaurus 之间共享认证状态。
  • 样式: 全局 Tailwind 样式位于 app/globals.css。Docusaurus 在 textbook/src/css/custom.css 中有自己的主题。

开发

  • 运行根应用: npm run dev:root
  • 运行文档应用: npm run dev:docs
  • 同时运行两者: npm run dev