环境配置

• next内置了环境变量的配置支持
• 使用.env加载环境变量

注意问题

• 在客户端读取环境变量，需要设置NEXT_PUBLIC_前缀
• 非NEXT_PUBLIC_环境变量仅在 Node.js 环境中可用
  • 敏感变量（如数据库密码、数据库连接地址）不加前缀，仅服务端访问

.env配置

js

# api接口地址
NEXT_PUBLIC_BASE_URL=http://localhost:3000

读取环境配置

• 使用process.env来读取环境变量

js

process.env.NEXT_PUBLIC_BASE_URL

• 判断是否开发、生产环境
  • 如果是开发环境：process.env.NODE_ENV 为 development

bash

process.env.NODE_ENV

TypeScript 类型支持

ts

// env.d.ts
declare namespace NodeJS {
  interface ProcessEnv {
    NEXT_PUBLIC_API_URL: string
    DATABASE_URL: string
  }
}

next/env使用

• @next/env 是 Next.js 官方提供的环境变量加载工具包