如何从代码中获取Next.js 13部署到Vercel的预览URL？

1. 手动查找路径 #

• 登录Vercel控制台，找到你的目标项目
• 进入项目的「Deployments」标签页，定位到对应的部署记录
• 点击该部署记录进入详情页，页面顶部就能看到这个唯一的预览URL

2. 代码中通过环境变量获取 #

Vercel会自动给每个部署注入系统环境变量 VERCEL_URL，这个变量的值就是当前部署的预览域名（不带https://前缀）。你可以在Next.js代码中直接调用：

// 示例：在组件或API路由中拼接完整预览URL
const previewUrl = `https://${process.env.VERCEL_URL}`;

注意：该环境变量仅在Vercel部署环境中生效，本地开发时需要手动在.env.local文件中添加模拟值。

内容的提问来源于stack exchange，提问作者DaMatt91