Next.js 全栈技术栈

Q: Next.js 全栈技术栈 的最佳实践有哪些？

Next.js 全栈技术栈 的最佳实践包括：开发中用 Prisma Studio — npx prisma studio 可视化编辑数据库；tRPC 路由模块化 — 拆分为 user.ts、post.ts，用 t.mergeRouters 合并；所有输入用 Zod — 运行时验证 + TypeScript 推断一步到位。其中首条「开发中用 Prisma Studio — npx prisma studio 可视化编辑数据库」应在项目初始化时就落地，避免后期返工。

Next.js 15 + tRPC + Prisma + PostgreSQL + Auth.js + TailwindCSS，用于生产 SaaS 应用。

全栈中等

技术栈组成

FrameworkNext.js 15 (App Router)

APItRPC + Zod

ORMPrisma 5

DatabasePostgreSQL 16

AuthAuth.js v5

StylingTailwindCSS 4

DeployVercel

为什么

此技术栈提供端到端类型安全（客户端到数据库）、SSR 支持 SEO，tRPC 零 API 样板。Prisma 提供迁移和类型安全查询。Vercel 部署只需一次 git push。

何时使用

选择此栈用于 SaaS 仪表板、管理面板和需要认证 + 数据库 + API 的 B2B 应用。内容密集型站点用 Astro，高吞吐 API 用 Go/Rust。

如何做

1. 脚手架 — npx create-next-app@latest myapp --typescript --tailwind --app 2. 安装依赖 — npm i @trpc/server @trpc/client @prisma/client @auth/core 3. 设置 Prisma — npx prisma init，定义 schema.prisma，npx prisma migrate dev 4. 创建 tRPC 路由 — server/trpc/router.ts 含 query + mutation 过程 5. 添加 Auth.js — app/api/auth/[...nextauth]/route.ts 配 GitHub/Google 6. 构建 UI — app/ 目录含布局、页面和服务端组件 7. 部署 — 推送到 GitHub，导入 Vercel，添加 DATABASE_URL 环境变量 8. 监控 — Vercel Analytics + Sentry 错误 + PostHog 产品分析

示例

// server/trpc/router.ts — 类型安全 API import { z } from "zod"; import { publicProcedure, router } from "./trpc"; export const appRouter = router({ getUser: publicProcedure .input(z.object({ id: z.string() })) .query(async ({ input, ctx }) => { return ctx.prisma.user.findUnique({ where: { id: input.id } }); }), createUser: publicProcedure .input(z.object({ email: z.string().email(), name: z.string() })) .mutation(async ({ input, ctx }) => { return ctx.prisma.user.create({ data: input }); }), }); // app/page.tsx — 带 tRPC 的服务端组件 import { api } from "@/trpc/server"; export default async function HomePage() { const users = await api.getUser.query({ id: "1" }); return <div>你好 {users.name}</div>; } // prisma/schema.prisma model User { id String @id @default(cuid()) email String @unique name String posts Post[] } model Post { id String @id @default(cuid()) title String author User @relation(fields: [authorId], references: [id]) authorId String }

常见问题

⚠tRPC context 类型断裂 — 缺少 ctx.prisma 类型导致推断失败
⚠Prisma client 未生成 — schema 变更后运行 npx prisma generate
⚠RSC 中 Auth.js session — 服务端组件用 auth() 辅助函数，非 useSession()
⚠Vercel 函数大小限制 — Prisma 增加 15MB，启用边缘运行时或拆分函数

最佳实践

✓开发中用 Prisma Studio — npx prisma studio 可视化编辑数据库
✓tRPC 路由模块化 — 拆分为 user.ts、post.ts，用 t.mergeRouters 合并
✓所有输入用 Zod — 运行时验证 + TypeScript 推断一步到位
✓启用 Prisma 连接池 — Vercel 上用 pgbouncer 避免连接耗尽

常见问题解答

什么是Next.js 全栈技术栈？适合做什么项目？

Next.js 15 + tRPC + Prisma + PostgreSQL + Auth.js + TailwindCSS，用于生产 SaaS 应用。它通过分层组合提供端到端类型安全与开箱即用的部署体验，适合从 MVP 到生产 SaaS 的快速迭代。

如何用Next.js 全栈技术栈在 10 分钟内跑通一个 demo？

两步起步：① 脚手架 — npx create-next-app@latest myapp --typescript --tailwind --app；② 安装依赖 — npm i @trpc/server @trpc/client @prisma/client @auth/core。先跑通本地 dev server，再接一个真实数据源验证端到端链路。