第五章：Next.js 渲染和部署

环境变量和配置

概述

在 Next.js 中，环境变量和配置是管理应用不同环境（开发、测试、生产等）行为的关键工具。通过合理使用环境变量，可以实现敏感数据保护、环境差异化配置等功能。

环境变量的使用

1. 基本环境变量

Next.js 内置支持 .env 文件：

# .env.local
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

• 变量默认只在 Node.js 环境可用（服务端）
• 客户端可访问的变量需要加 NEXT_PUBLIC_ 前缀：

  NEXT_PUBLIC_ANALYTICS_ID=abc123
  

2. 多环境配置

推荐的文件结构：

.env                # 基础配置
.env.development    # 开发环境
.env.test           # 测试环境
.env.production     # 生产环境

启动时自动加载对应环境：

next dev       # 加载 .env.development
next build     # 加载 .env.production

运行时配置

1. next.config.js

Next.js 的主要配置文件：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ['example.com'],
  },
  // 自定义环境变量
  env: {
    CUSTOM_VAR: 'value',
  },
}

module.exports = nextConfig

2. 公共运行时配置

在 _app.js 中使用 publicRuntimeConfig：

// next.config.js
module.exports = {
  publicRuntimeConfig: {
    API_URL: process.env.API_URL,
  }
}

// 页面中使用
import getConfig from 'next/config'
const { publicRuntimeConfig } = getConfig()
console.log(publicRuntimeConfig.API_URL)

最佳实践

1. 安全注意事项：

   • 永远不要将敏感信息提交到版本控制
   • 使用 .env.local 进行本地开发
   • 生产环境使用服务器环境变量

2. 类型安全： 创建 env.d.ts 确保类型安全：

   interface ProcessEnv {
     NEXT_PUBLIC_API_URL: string
     DB_HOST?: string
   }
   

3. 验证环境变量： 使用如 zod 等库验证环境变量：

   import { z } from 'zod'
   
   const envSchema = z.object({
     NEXT_PUBLIC_API_URL: z.string().url(),
     DB_HOST: z.string().min(1),
   })
   
   envSchema.parse(process.env)
   

部署配置

不同部署平台的环境变量设置方式：

调试技巧

检查加载的环境变量：

// 临时调试
console.log('Loaded env:', {
  NODE_ENV: process.env.NODE_ENV,
  PUBLIC_VAR: process.env.NEXT_PUBLIC_EXAMPLE,
  PRIVATE_VAR: process.env.DB_HOST // 仅服务端可见
})

通过合理配置环境变量和运行时配置，可以使 Next.js 应用在不同环境中保持一致的运行行为，同时确保敏感信息的安全性。