next.js 环境变量使用

24 min read

Next.js 内置了对从 .env.local 装入 process.env 环境变量的支持。

一个 .env.local 的例子:

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

加载process.env.DB_HOST、 process.env.DB_USER 和 process.env.DB_PASS 进入 Node.js 环境，允许您在 Next.js 数据获取方法和 API 路由中使用它们。

// pages/index.js
export async function getStaticProps() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  })
  // ...
}

注意: Next.js将在您的 .env* 文件中自动展开变量（$VAR）。 这允许你引用其他内置变量，比如:

# .env
HOSTNAME=localhost
PORT=8080
HOST=http://$HOSTNAME:$PORT

如果您试图在实际值中使用一个带有 $ 的变量，那么就需要像这样进行转义 \$.

比如:

# .env
A=abc
WRONG=pre$A # becomes "preabc"
CORRECT=pre\$A # becomes "pre$A"

默认情况下，通过 .env.local 加载的所有环境变量仅在 Node.js 环境中可用，这意味着它们不会暴露在浏览器中。

为了向浏览器公开一个变量，你必须在变量前面加上 NEXT_PUBLIC_ 。例如:

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

这个加载过程。自动地将 process.env.NEXT_PUBLIC_ANALYTICS_ID 放入Node.js环境中。允许您在代码中的任何位置使用它。由于 NEXT_PUBLIC_ 前缀，该值将同步发送到浏览器的 JavaScript 中。

// pages/index.js
import setupAnalyticsService from '../lib/my-analytics-service'

// NEXT_PUBLIC_ANALYTICS_ID can be used here as it's prefixed by NEXT_PUBLIC_
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)

function HomePage() {
  return <h1>Hello World</h1>
}

export default HomePage

一般只需要一个 .env.local 文件。但是，有时您可能希望为development (next dev) 或 production (next start) 环境添加一些默认值。

Next.js 允许您在 .env（所有环境）、.env.development（开发环境）和 .env.production（生产环境）中设置默认值。

.env.local 总是覆盖默认值设置。

注意: .env、 .env.development 和 .env.production 文件应该包含在存储库中，因为它们定义了默认值。.env\*.local 应该添加到 .gitignore, 因为这些文件是要忽略的。 .env.local 是可以储存秘密的地方。