Platform Starter Kit 极速指南

创建项目

使用以下命令创建项目：

npx create-next-app --example https://github.com/vercel/platforms febak 
cd febak 
sudo npm i -g vercel@latest 
# pnpm setup #?? # pnpm i -g vercel@latest # 若遇到错误，可尝试运行此命令

添加存储

你可以按照以下两个快速入门指南：

Postgres: https://vercel.com/docs/storage/vercel-postgres/quickstart ↗

存储: https://vercel.com/docs/storage/blob/quickstart ↗

或者按以下步骤简化操作：

pnpm i @vercel/postgres pnpm i @vercel/blob

提交 & 推送仓库

在VS Code中提交并推送代码，选择创建一个基于项目名称的新Github仓库（例如，我的项目名为 "dyor/febak"）

在Vercel.com仪表板中，选择新项目并导入

部署 - 忽略任何错误（你只需要进入项目页面）

设置存储

进入项目 > 存储

连接存储 > Postgres

连接存储 > Blob

使用以下命令创建初始表：

npx prisma db push

获取环境变量

复制代码

vercel link # 选择正确的项目 vercel env pull .env

在本地运行时，注释掉.env文件中的 VERCEL="1"

设置Github OAuth认证

在https://github-client-generator.vercel.app/创建一个Github客户端

将AUTH_SECRET、AUTH_GITHUB_ID和AUTH_GITHUB_SECRET粘贴到你的.env文件中

将AUTH_SECRET环境变量名重命名为NEXTAUTH_SECRET（但保持其值不变）

你需要更新新创建的Github应用（在https://github.com/settings/apps）为`http://app.localhost:3000/api/auth/callback/github` ↗

还需要在.env文件中添加以下内容：

NEXTAUTH_URL=http://app.localhost:3000/

本地环境的最终设置

从https://vercel.com/account/tokens获取你的`AUTH_BEARER_TOKEN`并添加到`.env`文件中

从项目设置页面（在Vercel中）获取你的PROJECT_ID_VERCEL

从团队设置页面（在Vercel中）获取你的TEAM_ID_VERCEL（仅当你使用Vercel团队时需要）

添加NEXTAUTH_SECRET（你可以使用任何值，但推荐使用$ openssl rand -base64 32）

添加VERCEL_URL为*.febak.com

可以暂时忽略OPENAI_API_KEY

本地运行

运行以下命令，并访问app.localhost:3000/login，你应该可以使用Github登录，创建新站点，并创建帖子。

为了处理图片，我需要在next.config.js中添加一个额外的主机名：

images: { remotePatterns: [ { hostname: "*.public.blob.vercel-storage.com" } # <-- 添加此行 ] }

生产环境设置

在Vercel中，从你的本地机器批量导入.env文件到Settings > Environment Variables > Import

手动添加以下环境变量：

添加VERCEL=1

添加NEXT_PUBLIC_ROOT_DOMAIN="febak.com"（或你的自定义域名）

将NEXTAUTH_URL改为app.febak.com

将VERCEL_ENV改为生产环境

你需要再次部署以使这些环境变量生效

自定义域名

添加你的自定义域名：https://vercel.com/docs/projects/domains/add-a-domain#wildcard-domains ↗

这需要更新你的域名DNS服务器以指向Vercel，并添加一个通配符域名。

最后提示

当我最终运行起来时，仍然遇到500错误。在查看Vercel日志时，看到以下错误：

Page changed from static to dynamic at runtime /whatt.febak.com/clr2n0r5y0004nvtctvdlhgow, reason: headers see more here nextjs.org/docs/messages/app-static-to-dyna..

解决方案：在layout.tsx中添加以下行：