概览

创建项目初始化项目

Next.js

npx create-next-app@latest --no-install

选项：

• TypeScript
• ESLint
• Tailwind CSS
• in src/ directory
• App Router
• use Turbopack
• customize import alias
  • @/*

Create T3 App

pnpm create t3-app@latest

Create better t stack

create better t stack 是一个比较新的前端脚手架，很适合作为创建全栈项目的脚手架使用，目前比较常用的一个组件集成如下。

pnpm create better-t-stack@latest my-better-t-app --yes --frontend next --runtime node --database postgres --db-setup supabase --package-manager pnpm

• 前端： Next.js
• 后端： hono，也可以采用 Next.js
• orm: drizzle （默认）
• auth: better-auth （默认）
• api: tRPC （默认）
• 运行时： 官网默认的运行时是 bun，不过兼容性考虑可以仍然使用 node，这里还是看发展趋势
• 数据库：postgres
• db 设置：supabase
• 包管理：pnpm
• 附加：turborepo，这也是我第一次接触 turborepo

基本上来说，和下面的组件集成类似，比较大的区别是通过上面的脚手架创建的项目严格区分前后端，前端代码位于 apps/web 目录下，后端代码位于 apps/server 目录下，我认为有助于减少心智负担，前端的运行时就是 browser 和 edge runtime，后端的运行时就是 node.js。

组件集成

• 编程语言
  • Typescript
• 前端框架
  • Next.js & React
    • 使用 App Router
  • UI 相关
    • Tailwind CSS UI 组件库的基础
    • clsx
      • 动态生成 className，一般用于配合 Tailwind CSS 的样式
      • 比如基于状态的样式，pending className 为 bg-gray-100 text-gray-500，success className 为 bg-green-500 text-white
    • shadcn/ui UI 组件库
    • DaisyUI UI 组件库
    • tweakcn shancn/ui 主题
    • 图标库 lucide
    • 品牌图标 Simple Icons
  • 状态管理 nanostore
    • 因为 better-auth 的 session 用 nanostore 存取

    • Better Auth provides a useSession hook to easily access session data on the client side. This hook is implemented using nanostore and has support for each supported framework and vanilla client, ensuring that any changes to the session (such as signing out) are immediately reflected in your UI.

  • 状态管理 zustand
• 后端框架
  • tRPC 拆分前后端
  • drizzle-orm 数据库连接，orm 框架
• 前后端共享
  • zod 格式验证
• 依赖管理
  • pnpm
• 代码编辑，调试
  • VS Code
  • .vscode/launch.json 用于编写调试文件
• auth 集成
  • better-auth
    • client 使用 authClient
    • server 使用 auth.api
• 测试验证
  • vitest

学习路线

• JavaScript / TypeScript

  • TypeScript 是 JavaScript 的超集（Super Set），所以需要先学习 js，再学 ts。
  • Learn JavaScript in Y Minutes
  • Learn TypeScript in Y Minutes

• React & Next.js

  • Next.js 的 React 教程
  • Next.js 的 App Router 教程
  • 之后更多就是查看文档