在 Vercel 中部署 Next.js 项目后出现 500:内部服务器错误。可能与环境变量有关

将 Next.js 应用程序部署到 Vercel 后,我收到 500 个内部服务器错误。该项目在本地计算机上运行,​​但在其部署到的 URL 中不起作用。 enter image description here

Error

我在 Vercel 中使用了环境变量,这可能与问题有关。我添加了这 4 个环境变量 - NEXTAUTH_URL、NEXTAUTH_SECRET、TWITTER_CLIENT_ID、TWITTER_CLIENT_SECRET。

在我的项目中,我创建了一个单独的文件“.env.local”,其中包含我所有与项目相关的密钥和 URL。

起初,这个环境变量“NEXTAUTH_URL”指向“http://localhost:3000/

NEXTAUTH_URL = http://localhost:3000/

然后,在 Vercel 中部署我的应用程序后,我在我的项目以及 Vercel 中使用已部署的 URL 更新了该变量。

NEXTAUTH_URL = https://twitter-clone-seven-coral.vercel.app/

我还在“回调 URI/重定向 URL”部分的“OAuth 2.0”中的“Twitter 开发者门户”中添加了上述 URL:

enter image description here

在 Vercel 中部署我的应用程序之前,CALLBACK URI/REDIRECT URL 指向 https://localhost:3000/api/auth/callback/twitter
并且 WEBSITE URL 指向 https://test.com ,然后我在最初部署应用程序后对其进行了更新。

这是我第一次使用环境变量,所以我不知道如何处理这个错误。

Package.json 供参考: enter image description here

stack overflow Getting 500: Internal Server Error after deploying Next.js project in Vercel. Might be related to Environment Variables
原文答案

答案:

作者头像

经过长时间的研究,遇到了同样的问题并找到了解决方案

诀窍是您必须将环境变量设置为 vercel 或任何主机平台

how to set environment variable in vercel

how to set environment variable in heroku

作者头像

是的,必须设置 Environment Variable ,用 vercel 尝试过,但不支持或可能遗漏了一些东西,但使用 netlify 可以正常工作,只需使用环境变量从您的项目 .env.local 文件中部署,获取键和值也给出正确提供 NEXTAUTH_URL ,然后它应该运行