Create T3 App：构建全栈 TypeScript 应用的快速入门

Logo

在现代 Web 开发中，创建一个功能齐全且高效的全栈应用程序是一个复杂的过程，涉及多个技术栈的选择和集成。为了简化这一过程，create-t3-app 提供了一种快速启动基于 TypeScript 的全栈应用程序的方法。它集成了 Next.js、Prisma 和 tRPC 等热门工具，使开发人员能够专注于业务逻辑，而无需花费大量时间配置项目。

Create T3 App 的核心特性

create-t3-app 是一款用于快速搭建全栈 TypeScript 应用程序的工具，它预配置了多种技术和库，以确保开发人员可以立即开始编写代码。以下是其主要特性：

关键点一：内置技术栈

Next.js：一个 React 框架，提供了服务器端渲染（SSR）、静态站点生成（SSG）和增量静态再生（ISR）等功能。
Prisma：一个现代的 ORM（对象关系映射），支持多种数据库，并提供了强大的类型安全查询功能。
tRPC：一个类型安全的 API 路由器，使得前后端通信更加简单和可靠。
TypeScript：一种静态类型的 JavaScript 语言，增强了代码的可维护性和可靠性。

关键点二：自动化配置

create-t3-app 自动生成所有必要的配置文件和初始代码结构，减少了手动设置的时间。这包括环境变量配置、依赖项安装以及基本的路由和页面设置。

npx create-t3-app my-app

上述命令将创建一个名为 my-app 的新项目，并自动配置好所有必要的依赖和文件结构。

安装与初始化

安装 create-t3-app 非常简单，用户可以通过 npm 或 yarn 快速完成。安装完成后，只需几条命令即可初始化一个新的项目。

安装步骤

通过 npm 安装：
```
npx create-t3-app my-app
```
通过 yarn 安装：
```
yarn create t3-app my-app
```
进入项目目录：
```
cd my-app
```
启动开发服务器：
```
npm run dev
```

上述命令将启动 Next.js 开发服务器，默认情况下监听 http://localhost:3000。

项目结构

create-t3-app 自动生成的项目结构非常清晰，方便开发人员快速上手。以下是一个典型的项目结构示例：

my-app/
├── .env.example
├── .gitignore
├── README.md
├── package.json
├── public/
│   └── favicon.ico
├── src/
│   ├── app/
│   │   ├── api/
│   │   ├── components/
│   │   ├── pages/
│   │   └── utils/
│   ├── lib/
│   │   └── trpc.ts
│   ├── prisma/
│   │   └── schema.prisma
│   └── styles/
│       └── globals.css
└── tsconfig.json

关键文件说明

.env.example：包含环境变量的模板文件，用户可以根据需要修改并重命名为 .env。
package.json：定义项目的依赖项和脚本。
src/app/api/：存放 tRPC API 路由和处理函数。
src/app/components/：存放 React 组件。
src/app/pages/：存放 Next.js 页面组件。
src/lib/trpc.ts：配置 tRPC 客户端和服务器端连接。
src/prisma/schema.prisma：定义 Prisma 数据模型和数据库模式。
tsconfig.json：TypeScript 编译配置文件。

使用 Prisma 进行数据库操作

create-t3-app 集成了 Prisma，使得数据库操作变得简单且类型安全。Prisma 提供了一个直观的 ORM 接口，允许开发人员轻松定义数据模型和执行 CRUD 操作。

定义数据模型

在 schema.prisma 文件中定义数据模型。例如，定义一个简单的 User 模型：

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
}

迁移数据库

定义好数据模型后，使用 Prisma CLI 迁移数据库：

npx prisma migrate dev --name init

上述命令将根据 schema.prisma 中的定义创建相应的数据库表。

执行 CRUD 操作

Prisma 提供了丰富的 API 来执行各种数据库操作。例如，插入一条新记录：

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function main() {
  const user = await prisma.user.create({
    data: {
      email: 'alice@prisma.io',
      name: 'Alice',
    },
  });
  console.log(user);
}

main()
  .catch((e) => {
    console.error(e.message);
  })
  .finally(async () => {
    await prisma.$disconnect();
  });

使用 tRPC 实现 API 路由

create-t3-app 集成了 tRPC，使得前后端通信更加简单和可靠。tRPC 提供了类型安全的 API 路由器，确保前端和后端之间的数据传输是强类型的。

定义 API 路由

在 src/app/api/trpc/[trpc].ts 文件中定义 API 路由。例如，定义一个获取用户列表的 API：

import { createRouter } from '../lib/trpc';

export const appRouter = createRouter()
  .query('getUserList', {
    async resolve() {
      return [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
      ];
    },
  });

export type AppRouter = typeof appRouter;

在前端调用 API

在前端页面中调用定义好的 API。例如，在 pages/index.tsx 中获取用户列表：

import { useState, useEffect } from 'react';
import { trpc } from '../utils/trpc';

function HomePage() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const result = await trpc.appRouter.getUserList.query();
      setUsers(result);
    };

    fetchUsers();
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default HomePage;

其他实用特性

除了核心功能外，create-t3-app 还提供了一些其他实用特性，进一步增强了其在复杂开发环境下的适用性。

环境变量管理

create-t3-app 支持通过 .env 文件加载环境变量，使开发人员可以在不同的环境中轻松切换配置。

NEXT_PUBLIC_API_URL=http://localhost:3000/api
DATABASE_URL=postgresql://user:password@localhost:5432/mydb

日志输出控制

create-t3-app 提供了对日志输出的精细控制，允许用户选择性地显示或隐藏某些类型的日志信息。

npm run dev --silent

上述命令将以静默模式启动开发服务器，仅显示错误日志。

多环境支持

create-t3-app 支持多环境配置，开发人员可以通过不同的环境变量文件（如 .env.development 和 .env.production）来管理不同环境下的配置。

总结

综上所述，create-t3-app 作为一款用于快速搭建全栈 TypeScript 应用程序的工具，凭借其内置的技术栈、自动化配置和丰富的高级特性，成为了现代开发流程中不可或缺的一部分。