create-t3-app 新项目初始化指南数据库同步与 NextAuth Discord 登录配置【免费下载链接】create-t3-appThe best way to start a full-stack, typesafe Next.js app项目地址: https://gitcode.com/gh_mirrors/cr/create-t3-app本文是 create-t3-app 的“第一步”实战指南。当你使用 T3 StackNext.js TypeScript tRPC Tailwind CSS可选 Prisma/Drizzle 与 NextAuth.js脚手架创建完一个新项目后还有几项强制性的初始化工作必须完成否则项目无法正常运行。读完本文你将掌握如何用npx prisma db push同步数据库并恢复 Prisma Client 的类型安全、如何启动本地 Docker 数据库容器以及如何从零配置 NextAuth.js 的 Discord Provider让应用具备真实可用的登录能力。项目创建完成后的“强制性”步骤在 create-t3-app 中脚手架只是生成了代码骨架。根据你在交互式 CLI 中选择的技术栈项目里可能包含数据库Prisma 或 Drizzle和认证NextAuth.js而这两者都依赖外部服务与环境变量才能真正运行。本文依据文档 www/src/pages/ar/usage/first-steps.md同主题英文版见 www/src/pages/en/usage/first-steps.md展开核心结论是在运行npm run dev之前先完成数据库同步和认证环境变量配置。数据库让 Schema 与数据库保持同步使用本地 Docker 数据库MySQL / PostgreSQL如果你在创建项目时选择了 MySQL 或 PostgreSQL 作为数据库脚手架会生成一个名为start-database.sh的 Bash 脚本用于在本地创建一个 Docker 容器作为开发数据库。该脚本由安装器 dbContainer.ts 在项目初始化时生成其中project1占位符会被替换为你项目的 sanitize 后名称非法字符替换为下划线并转小写以符合 Docker 容器命名规范。脚本的核心逻辑见 postgres.sh从.env中的DATABASE_URL解析出密码、端口与数据库名依次用awk按:、、/分隔提取自动检测并优先使用docker其次podman并要求 daemon 处于运行状态若指定端口已被占用通过nc检测则中止容器已存在但停止时会直接docker start复用若密码还是默认值password脚本会提示是否用openssl rand -base64 12生成随机密码并写回.envmacOS 上sed -i 与其他平台略有差异最终以-p $DB_PORT:5432映射端口启动docker.io/postgres镜像。用法很简单./start-database.sh如果你已经有现成的数据库可以直接删除该文件把数据库连接凭据写进.env即可macOS 用户不想用 Docker 也可以借助 DBngin 这类工具。注意脚本依赖.env文件中的DATABASE_URL因此请先确认环境变量已配置。Prismanpx prisma db push如果项目包含 Prisma必须在项目根目录运行npx prisma db push该命令会做两件事将prisma/schema.prisma中的 Schema 与数据库结构同步建表/改表基于当前 Schema 重新生成 Prisma Client 的 TypeScript 类型保证数据库访问层类型安全。重要提示执行完这条命令后需要重启 TypeScript 服务在 VS Code 中可通过Ctrl/Cmd Shift P执行 “TypeScript: Restart TS Server”否则 IDE 无法识别新生成的类型。从实现上看Prisma 安装器 prisma.ts 会在项目里注册如下 npm scriptsScript等价命令用途postinstallprisma generate安装依赖后自动生成 Clientdb:pushprisma db push推送 Schema 到数据库db:studioprisma studio打开可视化数据库管理界面db:generateprisma migrate dev开发环境生成迁移db:migrateprisma migrate deploy生产环境应用迁移因此你完全可以运行pnpm db:push或对应包管理器命令替代npx prisma db push。若你同时选择了 NextAuth.js生成的 Schema见 with-auth.prisma会额外包含Account、Session、User、VerificationToken四个 NextAuth 必需的模型Post模型则通过createdBy外键关联到User。注意 MySQL/Planetscale 下需要取消db.Text注释以容纳长 token。另外脚手架还注册了postinstall: prisma generate即npm install之后 Client 类型会自动就位。Drizzledb:push如果项目选择的是 Drizzle请先打开.env按注释说明构造DATABASE_URL不同数据库对应不同驱动例如 postgres 用postgres包、mysql 用mysql2、sqlite 用libsql/client见 drizzle.ts。环境变量就绪后运行pnpm db:push对应实现是drizzle-kit push。脚手架同样注册了db:generatedrizzle-kit generate、db:migratedrizzle-kit migrate、db:studiodrizzle-kit studio脚本。drizzle 的配置见 drizzle-config-postgres.ts其tablesFilter使用${scopedAppName}_*前缀过滤表schema 指向./src/server/db/schema.tsURL 从env.DATABASE_URL读取。认证配置 NextAuth.js 的 Discord Provider如果你的应用包含 NextAuth.js脚手架默认内置了DiscordProvider——这是 NextAuth.js 支持的、配置成本最低的 Provider 之一但依然需要你手动完成一些初始设置。如果你倾向其他服务商GitHub、Google 等也可以使用 NextAuth.js 提供的众多 Provider配置思路与此一致。从源码看认证相关的文件由 nextAuth.ts 安装App Router 项目会生成 API 路由 route.ts导出GET、POSThandlers认证配置则写入src/server/auth/config.ts。默认配置 base.ts 已经预置了DiscordProvider与一个把token.sub注入 session 用户id的 callback因此你只需要提供三个环境变量即可完成登录闭环。第 1 步创建 Discord 应用你需要一个 Discord 账号没有就先去注册。登录后访问 Discord 开发者平台点击右上角的New Application创建应用填写应用名称并同意服务条款。第 2 步进入 OAuth2 设置页应用创建成功后进入Settings → OAuth2 → General页面。第 3 步填入 Client ID复制页面上的Client ID添加到项目根目录.env文件中AUTH_DISCORD_ID你的Discord应用ClientID第 4 步重置并复制 Secret点击Reset Secret出于安全考虑Discord 不再直接展示原始 Secret需重置后复制把新生成的 Secret 填入.envAUTH_DISCORD_SECRET你的Discord应用ClientSecret第 5 步添加重定向回调地址点击Add Redirect填入本地开发回调地址http://localhost:3000/api/auth/callback/discord这个地址必须与脚手架生成的 API 路由路径src/app/api/auth/[...nextauth]/route.tsPages Router 为src/pages/api/auth/[...nextauth].ts保持一致。最后点击Save Changes保存。第 6 步配置 AUTH_SECRET在.env中添加AUTH_SECRET一个任意字符串AUTH_SECRET随意但足够长的字符串生产环境务必使用强随机密钥例如openssl rand -base64 32生成的值。它用于加密 session cookie泄露意味着认证体系被攻破。同时注意.gitignore已默认忽略.env模板中的_gitignore会处理不要把密钥提交进版本库。生产部署的差异本地开发回调是http://localhost:3000/...部署到生产环境时需要按同样步骤再创建一个 Discord 应用或修改现有应用把回调地址中的localhost:3000替换为你实际的部署域名如https://your-app.com/api/auth/callback/discord并同步更新AUTH_DISCORD_ID、AUTH_DISCORD_SECRET与AUTH_SECRET。环境变量的运行时校验create-t3-app 使用t3-oss/env-nextjs zod 在启动时校验环境变量基础模板见 env.js服务端变量缺失或类型不合法会导致构建失败从而把“配置错误”挡在运行之前。两个实用开关值得注意SKIP_ENV_VALIDATION构建或启动时设置该环境变量可跳过校验对 Docker 等无法提供完整 env 的场景很有用emptyStringAsUndefined: true空字符串会被当作未定义处理避免SOME_VAR侥幸通过校验。配置完成后重新启动开发服务器npm run dev/pnpm dev你应该就能在页面上看到 Discord 登录入口并完成登录。验证登录与编辑器环境登录流程打通后可以确认 session 中包含由 callback 注入的user.id类型层面已在 base.ts 的模块扩展中声明。若使用 Prisma登录数据会写入前面提到的Account/Session/User表。为了获得更顺畅的开发体验官方推荐安装以下编辑器扩展Prisma ExtensionPrisma Schema 的语法高亮与格式化支持Tailwind CSS IntelliSense ExtensionTailwind 类名的智能补全Prettier Extension配合项目内置的格式化配置prettier.config.mjs保持代码风格统一。下一步可以做什么完成上述初始化后你的 T3 App 已经具备运行条件。接下来可以若项目包含 tRPC阅读src/server/api/routers/post.ts与对应页面了解 tRPC query 是如何串联服务端与客户端的浏览 create-t3-app 文档站的其他使用指南环境变量、tRPC、Tailwind、Prisma 等均在 www/src/pages 下按语言组织以及你所用包自身的官方文档参考 folder-structure-app.mdx 理解 App Router 下的目录职责划分方便后续扩展业务代码。一句话总结本文要点先跑npx prisma db push或pnpm db:push同步数据库并重启 TS 服务再按“创建 Discord 应用 → 填写 ID/Secret → 添加回调地址 → 配置 AUTH_SECRET”的顺序完成认证初始化你的 T3 项目就能立即进入开发状态。【免费下载链接】create-t3-appThe best way to start a full-stack, typesafe Next.js app项目地址: https://gitcode.com/gh_mirrors/cr/create-t3-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
create-t3-app 新项目初始化指南：数据库同步与 NextAuth Discord 登录配置
create-t3-app 新项目初始化指南数据库同步与 NextAuth Discord 登录配置【免费下载链接】create-t3-appThe best way to start a full-stack, typesafe Next.js app项目地址: https://gitcode.com/gh_mirrors/cr/create-t3-app本文是 create-t3-app 的“第一步”实战指南。当你使用 T3 StackNext.js TypeScript tRPC Tailwind CSS可选 Prisma/Drizzle 与 NextAuth.js脚手架创建完一个新项目后还有几项强制性的初始化工作必须完成否则项目无法正常运行。读完本文你将掌握如何用npx prisma db push同步数据库并恢复 Prisma Client 的类型安全、如何启动本地 Docker 数据库容器以及如何从零配置 NextAuth.js 的 Discord Provider让应用具备真实可用的登录能力。项目创建完成后的“强制性”步骤在 create-t3-app 中脚手架只是生成了代码骨架。根据你在交互式 CLI 中选择的技术栈项目里可能包含数据库Prisma 或 Drizzle和认证NextAuth.js而这两者都依赖外部服务与环境变量才能真正运行。本文依据文档 www/src/pages/ar/usage/first-steps.md同主题英文版见 www/src/pages/en/usage/first-steps.md展开核心结论是在运行npm run dev之前先完成数据库同步和认证环境变量配置。数据库让 Schema 与数据库保持同步使用本地 Docker 数据库MySQL / PostgreSQL如果你在创建项目时选择了 MySQL 或 PostgreSQL 作为数据库脚手架会生成一个名为start-database.sh的 Bash 脚本用于在本地创建一个 Docker 容器作为开发数据库。该脚本由安装器 dbContainer.ts 在项目初始化时生成其中project1占位符会被替换为你项目的 sanitize 后名称非法字符替换为下划线并转小写以符合 Docker 容器命名规范。脚本的核心逻辑见 postgres.sh从.env中的DATABASE_URL解析出密码、端口与数据库名依次用awk按:、、/分隔提取自动检测并优先使用docker其次podman并要求 daemon 处于运行状态若指定端口已被占用通过nc检测则中止容器已存在但停止时会直接docker start复用若密码还是默认值password脚本会提示是否用openssl rand -base64 12生成随机密码并写回.envmacOS 上sed -i 与其他平台略有差异最终以-p $DB_PORT:5432映射端口启动docker.io/postgres镜像。用法很简单./start-database.sh如果你已经有现成的数据库可以直接删除该文件把数据库连接凭据写进.env即可macOS 用户不想用 Docker 也可以借助 DBngin 这类工具。注意脚本依赖.env文件中的DATABASE_URL因此请先确认环境变量已配置。Prismanpx prisma db push如果项目包含 Prisma必须在项目根目录运行npx prisma db push该命令会做两件事将prisma/schema.prisma中的 Schema 与数据库结构同步建表/改表基于当前 Schema 重新生成 Prisma Client 的 TypeScript 类型保证数据库访问层类型安全。重要提示执行完这条命令后需要重启 TypeScript 服务在 VS Code 中可通过Ctrl/Cmd Shift P执行 “TypeScript: Restart TS Server”否则 IDE 无法识别新生成的类型。从实现上看Prisma 安装器 prisma.ts 会在项目里注册如下 npm scriptsScript等价命令用途postinstallprisma generate安装依赖后自动生成 Clientdb:pushprisma db push推送 Schema 到数据库db:studioprisma studio打开可视化数据库管理界面db:generateprisma migrate dev开发环境生成迁移db:migrateprisma migrate deploy生产环境应用迁移因此你完全可以运行pnpm db:push或对应包管理器命令替代npx prisma db push。若你同时选择了 NextAuth.js生成的 Schema见 with-auth.prisma会额外包含Account、Session、User、VerificationToken四个 NextAuth 必需的模型Post模型则通过createdBy外键关联到User。注意 MySQL/Planetscale 下需要取消db.Text注释以容纳长 token。另外脚手架还注册了postinstall: prisma generate即npm install之后 Client 类型会自动就位。Drizzledb:push如果项目选择的是 Drizzle请先打开.env按注释说明构造DATABASE_URL不同数据库对应不同驱动例如 postgres 用postgres包、mysql 用mysql2、sqlite 用libsql/client见 drizzle.ts。环境变量就绪后运行pnpm db:push对应实现是drizzle-kit push。脚手架同样注册了db:generatedrizzle-kit generate、db:migratedrizzle-kit migrate、db:studiodrizzle-kit studio脚本。drizzle 的配置见 drizzle-config-postgres.ts其tablesFilter使用${scopedAppName}_*前缀过滤表schema 指向./src/server/db/schema.tsURL 从env.DATABASE_URL读取。认证配置 NextAuth.js 的 Discord Provider如果你的应用包含 NextAuth.js脚手架默认内置了DiscordProvider——这是 NextAuth.js 支持的、配置成本最低的 Provider 之一但依然需要你手动完成一些初始设置。如果你倾向其他服务商GitHub、Google 等也可以使用 NextAuth.js 提供的众多 Provider配置思路与此一致。从源码看认证相关的文件由 nextAuth.ts 安装App Router 项目会生成 API 路由 route.ts导出GET、POSThandlers认证配置则写入src/server/auth/config.ts。默认配置 base.ts 已经预置了DiscordProvider与一个把token.sub注入 session 用户id的 callback因此你只需要提供三个环境变量即可完成登录闭环。第 1 步创建 Discord 应用你需要一个 Discord 账号没有就先去注册。登录后访问 Discord 开发者平台点击右上角的New Application创建应用填写应用名称并同意服务条款。第 2 步进入 OAuth2 设置页应用创建成功后进入Settings → OAuth2 → General页面。第 3 步填入 Client ID复制页面上的Client ID添加到项目根目录.env文件中AUTH_DISCORD_ID你的Discord应用ClientID第 4 步重置并复制 Secret点击Reset Secret出于安全考虑Discord 不再直接展示原始 Secret需重置后复制把新生成的 Secret 填入.envAUTH_DISCORD_SECRET你的Discord应用ClientSecret第 5 步添加重定向回调地址点击Add Redirect填入本地开发回调地址http://localhost:3000/api/auth/callback/discord这个地址必须与脚手架生成的 API 路由路径src/app/api/auth/[...nextauth]/route.tsPages Router 为src/pages/api/auth/[...nextauth].ts保持一致。最后点击Save Changes保存。第 6 步配置 AUTH_SECRET在.env中添加AUTH_SECRET一个任意字符串AUTH_SECRET随意但足够长的字符串生产环境务必使用强随机密钥例如openssl rand -base64 32生成的值。它用于加密 session cookie泄露意味着认证体系被攻破。同时注意.gitignore已默认忽略.env模板中的_gitignore会处理不要把密钥提交进版本库。生产部署的差异本地开发回调是http://localhost:3000/...部署到生产环境时需要按同样步骤再创建一个 Discord 应用或修改现有应用把回调地址中的localhost:3000替换为你实际的部署域名如https://your-app.com/api/auth/callback/discord并同步更新AUTH_DISCORD_ID、AUTH_DISCORD_SECRET与AUTH_SECRET。环境变量的运行时校验create-t3-app 使用t3-oss/env-nextjs zod 在启动时校验环境变量基础模板见 env.js服务端变量缺失或类型不合法会导致构建失败从而把“配置错误”挡在运行之前。两个实用开关值得注意SKIP_ENV_VALIDATION构建或启动时设置该环境变量可跳过校验对 Docker 等无法提供完整 env 的场景很有用emptyStringAsUndefined: true空字符串会被当作未定义处理避免SOME_VAR侥幸通过校验。配置完成后重新启动开发服务器npm run dev/pnpm dev你应该就能在页面上看到 Discord 登录入口并完成登录。验证登录与编辑器环境登录流程打通后可以确认 session 中包含由 callback 注入的user.id类型层面已在 base.ts 的模块扩展中声明。若使用 Prisma登录数据会写入前面提到的Account/Session/User表。为了获得更顺畅的开发体验官方推荐安装以下编辑器扩展Prisma ExtensionPrisma Schema 的语法高亮与格式化支持Tailwind CSS IntelliSense ExtensionTailwind 类名的智能补全Prettier Extension配合项目内置的格式化配置prettier.config.mjs保持代码风格统一。下一步可以做什么完成上述初始化后你的 T3 App 已经具备运行条件。接下来可以若项目包含 tRPC阅读src/server/api/routers/post.ts与对应页面了解 tRPC query 是如何串联服务端与客户端的浏览 create-t3-app 文档站的其他使用指南环境变量、tRPC、Tailwind、Prisma 等均在 www/src/pages 下按语言组织以及你所用包自身的官方文档参考 folder-structure-app.mdx 理解 App Router 下的目录职责划分方便后续扩展业务代码。一句话总结本文要点先跑npx prisma db push或pnpm db:push同步数据库并重启 TS 服务再按“创建 Discord 应用 → 填写 ID/Secret → 添加回调地址 → 配置 AUTH_SECRET”的顺序完成认证初始化你的 T3 项目就能立即进入开发状态。【免费下载链接】create-t3-appThe best way to start a full-stack, typesafe Next.js app项目地址: https://gitcode.com/gh_mirrors/cr/create-t3-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
