nextjs系列教程(十)：环境变量

环境变量

• Next.js 内置了对环境变量的支持，让你可以执行以下操作：
  1. 使用 .env.local 加载环境变量。
  2. 通过给环境变量添加 NEXT_PUBLIC_ 前缀将环境变量暴露给浏览器。

1. .env.local 环境变量

next.js 内置支持将环境变量从 .env.local 加载到 process.env 中。

1.1 基本使用

• 在项目根目录新建环境变量文件 .env.local

  DEVELOPMENT_URL=http://192.168.2.11
  PRODUCTION_URL=https://www.baidu.com
  

  • 这会将 process.env.DEVELOPMENT_URL、process.env.PRODUCTION_URL 自动加载到 Node.js 环境中。
  • 注意：next 环境变量应当以 process.env.[key] 的方式访问，而不能以 const { PUBLISHABLE_KEY } = process.env 这种解构赋值的方式访问。

1.2 定义变量

next.js 会在 .env* 文件中自动扩展变量。

• 修改 env.local 文件

  PORT=8080
  DEVELOPMENT_URL=http://192.168.2.11:$PORT
  PRODUCTION_URL=https://www.baidu.com:$PORT
  

  • 组件中使用时，会获得：https://www.baidu.com:8080 或者 http://192.168.2.11:8080

2. 将环境变量暴露给浏览器

默认情况下，环境变量仅在 Node.js 环境中可用，这意味着它们不会暴露到浏览器端。为了向浏览器暴露环境变量，你必须在变量前添加 NEXT_PUBLIC_ 前缀。

• 修改 env.local 文件

  NEXT_PUBLIC_TITLE=next系列教程
  

  • 这将自动将 process.env.NEXT_PUBLIC_TITLE 加载到 Node.js 环境中，从而允许你在代码的任何地方使用它。带有前缀 NEXT_PUBLIC_ 的变量将被内联到发送给浏览器的 JavaScript 代码中。由于这种内联发生在构建时，因此在构建项目时需要提前设置好各个 NEXT_PUBLIC_ 前缀的环境变量。

3. 默认环境变量

通常只需要一个 .env.local 文件就够了。但有时你可能希望分别为不同的环境，配置不同的环境变量文件，比如：development (next dev) 或 production (next start) 环境添加一些默认设置。

• next.js 允许你在 .env （所有环境下）、.env.development(development环境) 和 .env.production(production环境)中设置默认值。但是.env.local` 会始终覆盖默认设置。
• 由于 .env、.env.development 和 .env.production 文件定义了默认设置，因此应该提交到源码仓库中。而 .env.*.local 应当添加到 .gitignore 中，因为这类文件是需要被忽略的。.env.local 是被用来存储密钥类信息的。比如：数据库的账号密码等。