本文是本系列最后一篇，部署项目的生产环境。
添加元数据
目前我们的项目未对搜索引擎优化，比如每个页面的标题都是“Create Next App”。我们应该给每个页面设置恰当的标题和描述。
首先是首页 app/page.tsx，在该页最后添加metadata，注意不能拼错这是约定的。
......
export const metadata: Metadata = {
title: "Issue Tracker - Dashboard",
description: "View a summary of project issues",
};再在app/issues/page.tsx也添加同样的metadata。
然后在 /app/issues/[id]/page.tsx添加，这个页面使用generateMetadata动态添加，同样的，这也是约定的，函数名不能拼错。
查看网页，打开开发者工具能看到相应的metadata。这里只设置了基本的title和description信息的metadata，实际可以设置更多的信息，比如社交媒体信息，这样可以很方便分享。
提交Git。命名：Add metadata.
使用 React Cache 优化性能
IssueDetailPage有两个地方都从数据库获取具体的Issue, 这是没必要的重复连接数据库的操作，可以使用React Cache优化。
连接数据获取具体Issue的操作传给cache, 第一次使用真实的连接数据库来获得Issue, 第二次则使用缓存的数据。缓存只在同一请求中生效，如果发起另外的HTTP Request时，也是需要连接数据库的。
为了证明确实只有一次连接数据库，我们可以在prisma的client中添加 log属性，这样就在控制台能看到相关查询语句。
提交Git。命名：Optimize performance using react cache。
删除 .env 文件
之前我们有个疏忽，未将 .env 排除在git 跟踪之外，因为 .env文件有敏感信息，其他人访问git存储库就会看到敏感信息。
先将 .env 加进 .gitignore文件，后续 .env不会被 git 跟踪，但已存在的存储库还是有 .env的信息的。要删除之前存储库已存在的文件，需要借用工具，git-filter-repo或BFG repo-cleaner。这里就使用git-filter-repo.
在使用git-filter-repo删除历史文件之前，我们先创建一个 .env.sample文件，内容复制于.env，但去掉所有敏感信息，这样后面看到该存储库的人就知道需要设置哪些信息。
DATABASE_URL=""
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET=""
GITHUB_ID=""
GITHUB_SECRET=""现在开始删除git历史文件 .env , 下载git-filter-repo文件。
https://github.com/newren/git-filter-repo/blob/main/git-filter-repo
将该文件改名为git-filter-repo.py并放置在根目录下。
很明显，这是一个python文件，需要python环境。然后到根目录，执行以下命令清除历史版本的 .env文件。
python3 git-filter-repo.py –path .env –invert-path –force
提交Git。命名：Add an example env file。
设置错误跟踪
实际生产环境中，用户使用可能会产生各种各样的问题，需要进行错误跟踪，有不少选择，比如sentry, BugSang, LockRocket等。
本节使用sentry，官网是：
sentry.io
如果没有账户，需要花几分钟注册一个。再进行Project的创建：选择项目平台为Next.js；警报频率为”Alert me on every new issue”；项目名称为”issue-tracker”。
根据提示，回到控制台执行：
npx @sentry/wizard@latest -i nextjs
sentry会自动为我们的项目创建更新相关文件配置好sentry的SDK。
我们无需碰sentry创建的文件，有趣的是，我们看到sentry自动为我们创建了一个端点 ” /api/sentry-example-api “和一个页面” /sentry-example-page”，我们可以访问,并产生一个error。
再查看sentry网站，就能看到错误的详细信息。
实际我们不需要这两个 sentry-example-api 和 sentry-example-page，在提交Git之前删除掉。
提交Git。命名：Set up error tracking。
设置生产数据库
Mysql平台很多，这里选择planetscale.com。作为测试，免费的计划足够了。
需要开通一个账户并绑定信用卡，然后进行创建，数据库名设置issue-tracker，类型是prisma。记下数据库用户名和密码，后面需要配置。
部署到 Vercel
由于Planetscale.com的Mysql不支持外键约束，需要在prisma添加relationMode属性，设置为”prisma”。
原有的迁移有外键约束，需要重新迁移。删除migrations文件夹，再运行：npx prisma migrate dev
提交Git，命名：Change relationMode to prisma.
再同步到Github
登录github，新建Repository命名issue-tracker，并将本地的Git库同步到github。
再登录vercel.com，导入github的项目。
进行相关设置，重写Build Command (prisma generate && prisma migrate deploy && next build)以及设置环境变量，注意其中的DATABASE_URL替换成之前在planetscale创建的数据库。具体可以参见文档。
https://www.prisma.io/docs/guides/deployment/serverless/deploy-to-vercel
设置完成后，点“Deploy”开始部署。因目前vercel的URL尚未生成，暂保持http://localhost:3000，一会儿回来修改。
等待一段时间，部署完成。如果有错误，根据提示进行修复。
部署成功后，修正环境变量设置正确的URL，注意不加斜杠。
再设置正确的Github回调地址。
访问网页，测试功能都正常。
小结
本文将issue-tracker项目部署到vercel，介绍了生产环境的部署过程。
Next.js项目实践系列已完结，希望有帮助到您。