Start a New Project

启动模板和开源项目

T3 stack

T3 Stack 是一个全栈的 TypeScript 开发模板，包含了 Next.js、Prisma、tRPC 等现代技术栈。对于快速启动一个全栈项目来说，它是最佳选择之一。

在创建过程中，你可以选择需要的功能：

• NextAuth.js（认证）
• Prisma（数据库 ORM）
• tRPC（类型安全的 API）
• Tailwind CSS（样式）

如果你选择了 ORM 和相应数据库，它还为我们配置了快速启动本地 Docker 实例的脚本，让我们可以快速起一个本地的数据库。具体看 start-database.sh 的提示吧。

T3 Stack 的优势在于它提供了类型安全的端到端开发体验，从数据库到前端都有完整的类型支持。

具体的安装和使用方法，请参考 T3 Stack 官方文档。

Fomadocs

Fomadocs 是一个基于 Next.js 的文档站点生成器，特别适合技术博客和项目文档。它提供了现代化的 UI 和优秀的开发体验。

创建完成后，你会得到一个包含以下特性的文档站点：

• 基于 MDX 的内容管理
• 内置搜索功能
• 响应式设计
• 暗色/亮色主题切换
• 自动生成侧边栏和导航

Fomadocs 的配置文件 source.config.ts 可以自定义主题、导航和搜索等设置。

具体的安装和使用方法，请参考 Fomadocs 官方文档。

实用工具库

当启动新的项目时，你应该考虑预先配置以下的这些工具库，加速后续的开发进程。

Shadcn UI

Shadcn UI 是一个基于 Radix UI 和 Tailwind CSS 的组件库，提供了高质量的、可定制的 React 组件。它不是传统的 npm 包，而是通过 CLI 工具将组件代码直接复制到你的项目中。

主要特点：

• 基于 Radix UI 的无障碍组件
• 完全可定制的设计
• 支持暗色/亮色主题
• 与 Tailwind CSS 完美集成
• 组件代码直接在你的项目中，完全可控

具体的安装和使用方法，请参考 Shadcn UI 官方文档。

tRPC

tRPC 是一个端到端的类型安全 API 库，让你可以在 TypeScript 项目中构建类型安全的 API，无需 GraphQL 或 REST 的复杂性。

主要优势：

• 端到端类型安全，无需生成类型定义
• 自动类型推断和智能提示
• 支持多种传输协议（HTTP、WebSocket 等）
• 与 Next.js、React Query 等工具完美集成
• 优秀的开发体验和调试工具

具体的安装和使用方法，请参考 tRPC 官方文档。

但如果你不是非常想要它配置好的后端端点，而是有自己的后端路由，只是想应用预构建的 http 请求逻辑，可以考虑仅使用 Tankstack Query

Tankstack Query

Tankstack Query（原 React Query）是一个强大的数据获取和缓存库，专门为 React 应用设计。它简化了服务器状态管理，提供了强大的缓存、同步和更新功能。

核心功能：

• 自动缓存和后台更新
• 乐观更新和错误处理
• 无限滚动和分页支持
• 离线支持和数据同步
• 强大的开发工具和调试器

具体的安装和使用方法，请参考 Tankstack Query 官方文档。

静态检查

Eslint

一般启动任何项目都会推荐安装 eslint，安装和使用它吧。

ESLint 是一个强大的 JavaScript 和 TypeScript 代码检查工具，可以帮助我们：

• 发现代码中的潜在问题
• 强制执行代码风格规范
• 自动修复一些常见问题

具体的安装和配置方法，请参考 ESLint 官方文档。

Prettier

通常来说我会同时配置 prettier 和 tailwindcss 的 prettier，然后从 t3 stack 学来了这个。

首先，安装以下包到开发依赖

pnpm add -D preiiter prettier-plugin-tailwindcss

然后在项目根目录新建文件 prettier.config.js

/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
export default {
  plugins: ["prettier-plugin-tailwindcss"],
};

重启项目，然后对着你的项目文件使用 CTRL + F 吧！

或者你也可以把命令集成到 package.json 的 script 中

{
  // ...
  "scripts": {
    // ...
    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
    "format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache"
    // ...
  }
  // ...
}

运行 pnpm format:write 一键 prettier 你的所有文件！