next.js 全栈项目在vercel部署的环境管理

要在 Vercel 部署 Next.js 并实现 生产（Production）、线上测试（preview）、本地开发（Development） 三个环境的区分，我们需要使用 Vercel 平台、GitHub（或其他 Git 托管平台）、本地开发环境。以下是详细的步骤：

1. 在本地main分支 也就是要作为生产（Production）环境的分支 ****新建三个env文件

   • 三者区别

     npm run dev的时候 加载.env.development 和 .env 并且.env.development>.env 不加载.env.production

     npm run start 的时候 加载.env.production 和 .env 并且.env.production>.env

   .env.production 中的值要写入生产环境的

   更改代码后推送到github

2. vercel中导入项目 选择 Import Git Repository 直接导入项目 默认导入main分支 做生产（Production）环境的部署

   1. 这一步不需要在setting设置环境变量 在不需要在导入的时候配置环境变量，我的环境变量是空的

3. 在本地切换到develop分支 也就是要作为线上测试环境（preview）的分支 同样新建三个.env文件 只不过.env.production 中的值要填入线上测试环境的

4. 把develop分支的代码推到github vercel就会自动基于这个分支做线上测试环境（preview）的部署，

1. 以后每次推代码到github develop分支，都会触发一个新的部署,生成一个新的预览网址

附：

为验证环境生效，我在UI上显示了env中的NEXT_PUBLIC_BASE_URL变量

在生产环境中是：

NEXT_PUBLIC_BASE_URL=https://www.novery.ai:3000

在开发环境中是：

NEXT_PUBLIC_BASE_URL=https://notion-memory-test-dw8ko6hrh-boombb12138s-projects.vercel.app/

访问vercel给的production环境网址： Novery - Turn Notion Notes into Flashcards & Knowledge Graphs

访问preview环境网址：

Awesome！