后端开发教程 - Java、Spring Boot 实战 - msg200.com
Next.js Starter 带身份验证 + React 17 + TypeScript + Tailwind CSS 2 + ESLint
你好，世界👋
Next.js 几乎成了我所有项目的首选框架。因此，我制作了一个入门模板，方便直接使用，轻松上手。
在本文中，我将向您展示如何使用我制作的入门模板并将其与 Vercel 一起部署。我还将连接我在 Heroku 上创建的 Postgres 数据库。
这个入门模板都有什么？
- Next.js/React 17
- TypeScript
- Tailwind CSS 2
- 反应查询
- React 查询开发工具
- Prisma 2
- GitHub 身份验证
- 电子邮件+无密码认证
- Postgres
- ESLint
- Prettier
- 沙哑
如果这是您感兴趣的技术栈，请继续关注。
1. 使用模板
转到pbteja1998/nextjs-starter repo 并单击Use this template按钮。
2. 创建 Repo
按照说明创建你的 repo
3.部署到Vercel
3.1. 导入项目
登录vercel并点击Import Project。
3.2. 导入 Git 仓库
我们从 Git 存储库导入
3.3.
输入您之前创建的 repo 的 URL，然后Continue。
3.4. 创建Vercel项目
选择项目名称和Deploy。我们稍后将添加所需的环境变量。
3.5. 成功部署
部署后您应该会看到此信息。部署成功后打开仪表板。
3.6. 仪表板
就这样。你的 Next.js 启动应用程序已部署到 Vercel。你可以点击Visit打开网站。
3.7. Web 应用程序演示
你应该看到类似这样的内容。此主页模板取自tailwindcss.com上的一个示例。
4.创建数据库
我们需要一个数据库来存储用户和用户会话。我将使用 Postgres 数据库。但您可以使用任何您想要的数据库。如果您已经有数据库的 URL，则可以跳过此步骤。我将使用 Heroku 创建一个 Postgres 数据库。
4.1. 创建一个新的 Heroku 应用
4.2. 进入资源选项卡并添加Heroku Postgres插件
4.3.
Heroku Postgres有一个免费套餐可用。我将用它来进行演示。
4.4. 现在您已创建一个新的 Postgres 数据库。点击插件打开数据库仪表板
4.5. 查看凭证
单击Settings，然后View Credentials。
4.6. 复制数据库 URI
您现在应该可以看到数据库 URI。复制它，我们稍后会用到它。
另外，请注意，免费版 Heroku 数据库凭证不是永久的，而是会定期更改。因此，在部署生产环境时，请使用其他稳定的数据库，或者将 Heroku 数据库升级到付费版。
5.设置环境变量
5.1. 在新创建的 Vercel 项目中打开 Env Vars 仪表板
5.2. 添加 DATABASE_URL
创建新机密
保存环境变量
创建NEXTAUTH_URL变量
这是部署的 URL。
类似地，创建您可以在repo 的.env.example文件中看到的所有变量。
SECRET- 一些随机字符串
- SMTP 主机
- 用于发送电子邮件的 SMTP 主机。例如：
smtp.zoho.com
- 用于发送电子邮件的 SMTP 主机。例如：
- SMTP_端口
- 您的 SMTP 端口。例如：
465
- 您的 SMTP 端口。例如：
- SMTP_用户
- 您的 SMTP 用户。例如：
bhanuteja@mycompany.org
- 您的 SMTP 用户。例如：
- SMTP 密码
- 您的电子邮件/SMTP 密码。
- SMTP_FROM
- 您希望电子邮件发自的电子邮件地址。
- GITHUB_ID
- 您的 Github OAuth 应用 ID
- GITHUB_SECRET
- 您的 Github OAuth 应用程序密钥
您可以按照此处描述的步骤创建 GitHub OAuth 应用程序。创建该 OAuth 应用程序时，请添加https://<vercel-deployment-url>/api/auth。Authorization callback URL例如，在我的例子中，我将添加 。https://nextjs-starter-kit-psi.vercel.app/api/auth其余字段，您可以随意填写。
添加所有环境变量后，您需要重新部署应用程序以使更改生效。
现在，您的新部署将具有 GitHub 身份验证和通过电子邮件的无密码登录。
我将来还会制作入门套件的精简版，它不需要任何数据库设置。
如果您有任何建议或在设置过程中遇到任何问题，请在代码库中创建一个新问题。我非常乐意帮助您解决问题。如果您喜欢这个入门套件，请为pbteja1998/nextjs-starter代码库点个星。
下次再见👋
如果您喜欢这篇文章，请查看
如果您有任何意见，请在下面留言，也可以在 Twitter 上@我（@pbteja1998），或者随时关注我。