environment-variables - 在 nextjs 中， "/api"路由的代码是否会随时出现在浏览器中？如果是，有没有办法强制仅在服务器端执行？

Question

我刚刚意识到关于 nextjs 环境变量的这种行为 here ，这与通常设置 nodejs 应用程序的方式不同:

Note: .env files should be included in your repository, and .env*.local should be in .gitignore, as those files are intended to be ignored. Consider .local files as a good place for secrets, and non-local files as a good place for defaults.

所以我想限制自己使用仅在构建时可用的 secret ，在“后端”中使用 /api路线。

但是做 /api路由甚至表现得像真正的后端？由于 nextjs 只有在必须是 (?) 时才是 SSR，我认为这个/api 代码也可以在浏览器中结束，因此暴露了 secret ？有没有办法强制代码只在服务器端运行而不是在浏览器中运行？我是 SSR 概念的新手。我的“真正的”后端暂时不会出现。这不是一个非常重要的 secret ，但仍然如此。谢谢。

Answer 1

API 路由最终不会出现在客户端包中，因此您放入的任何代码 /pages/api将对用户隐藏。这些路由旨在专门在服务器环境中运行。
同样的概念适用于 getStaticProps它仅在构建期间在服务器上运行。
NextJS 有一个机制叫做“内联环境变量”。对以 NEXT_PUBLIC_ 开头的环境变量的任何引用将自动替换为它们的值。因此，如果您的本地/构建/生产机器具有变量 NEXT_PUBLIC_APPNAME设置，NextJS 将替换对 process.env.NEXT_PUBLIC_APPNAME 的引用与变量的值。
或者，您可以在 .env 中定义变量文件。这些也将被您的应用程序使用，如果您在客户端上呈现的任何代码中引用它们(如 pages/about.js 中的 JSX)，它们可能会最终出现在您的客户端包中。
结论: secret 应该添加到.env ，并且只能在服务器端代码中引用，如 API 路由和 getStaticProps .
您可能也对这个工具感兴趣:https://next-code-elimination.vercel.app/
它让您可以验证您的服务器端代码是否位于客户端包之外。