Next.js环境变量 #

DATABASE_URL=postgresql://user:pass@localhost:5432/mydb
NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_KEY=my-secret-key

.env.local > .env.{NODE_ENV} > .env

NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_GA_ID=UA-XXXXX-X

console.log(process.env.NEXT_PUBLIC_API_URL)

DATABASE_URL=postgresql://...
SECRET_KEY=secret
API_SECRET=secret123

export default async function Page() {
    console.log(process.env.DATABASE_URL)
    return <div>Page</div>
}

export default async function Page() {
    const dbUrl = process.env.DATABASE_URL
    const secret = process.env.SECRET_KEY
    
    return <div>Server Component</div>
}

'use client'

export default function ClientComponent() {
    const apiUrl = process.env.NEXT_PUBLIC_API_URL
    
    return <div>API: {apiUrl}</div>
}

import { NextResponse } from 'next/server'

export async function GET() {
    const apiKey = process.env.API_KEY
    
    return NextResponse.json({ key: apiKey })
}

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
    env: {
        CUSTOM_KEY: process.env.CUSTOM_KEY,
    },
}

export default nextConfig

npm run dev

npm run build
npm run start

npm run test

docker run -e DATABASE_URL=postgresql://... nextjs-app

docker run --env-file .env nextjs-app

services:
    web:
        environment:
            - DATABASE_URL=postgresql://...
            - NEXT_PUBLIC_API_URL=https://api.example.com

namespace NodeJS {
    interface ProcessEnv {
        NEXT_PUBLIC_API_URL: string
        DATABASE_URL: string
        SECRET_KEY: string
    }
}

function getEnv(key: string): string {
    const value = process.env[key]
    if (!value) {
        throw new Error(`Missing environment variable: ${key}`)
    }
    return value
}

const apiUrl = getEnv('NEXT_PUBLIC_API_URL')

import { z } from 'zod'

const envSchema = z.object({
    DATABASE_URL: z.string(),
    NEXT_PUBLIC_API_URL: z.string().url(),
    SECRET_KEY: z.string().min(32),
})

const env = envSchema.parse(process.env)

DATABASE_URL=
NEXT_PUBLIC_API_URL=
SECRET_KEY=

.env.local
.env*.local

.env.development
.env.production
.env.test

const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001/api'