在 nextjs 中，“/api”路由的代码是否会在任何时候出现在浏览器中？如果是这样，有没有办法强制仅在服务器端执行？

Question

我现在才意识到这里的nextjs 环境变量的行为，这与通常设置 NodeJS 应用程序的方式不同：

注意：.env 文件应包含在您的存储库中，而 .env*.local 应包含在 .gitignore 中，因为这些文件将被忽略。将 .local 文件视为保存机密的好地方，将非本地文件视为保存默认值的好地方。

因此，我正在考虑限制自己使用仅在构建时可用的秘密，以便在“后端”/api路由中使用。

但是/api路由的行为是否像真正的后端一样？由于 nextjs仅在必须时才是 SSR （？），我认为此 /api 代码也可能最终出现在浏览器中，从而暴露秘密？有没有办法强制代码仅在服务器端运行而不在浏览器中运行？我对 SSR 概念很陌生。我的“真正的”后端暂时不会启动。这不是一个非常重要的秘密，但仍然如此。谢谢。

Answer 1

API 路由最终不会出现在客户端捆绑包中，因此您输入的任何代码都/pages/api将对用户隐藏。这些路由旨在专门在服务器环境上运行。

相同的概念适用于getStaticProps仅在构建期间在服务器上运行的情况。

NextJS 有一种称为“内联环境变量”的机制。对以 开头的环境变量的任何引用都NEXT_PUBLIC_将自动替换为其值。因此，如果您的本地/构建/生产计算机设置了变量NEXT_PUBLIC_APPNAME，NextJS 会将引用替换process.env.NEXT_PUBLIC_APPNAME为变量的值。

或者，您可以在.env文件中定义变量。这些也将被您的应用程序使用，并且如果您在客户端上呈现的任何代码中引用它们（如 参考资料中的 JSX pages/about.js），它们最终可能会出现在您的客户端包中。

结论：秘密应该添加到.env，并且只能在服务器端代码（如 API 路由和 ）中引用getStaticProps。

您可能也对此工具感兴趣： https: //next-code-elimination.vercel.app/

它可以让您验证服务器端代码是否位于客户端捆绑包之外。