How to Use .env Files in Next.js (NEXT_PUBLIC_ and Server Variables Explained)

# .env.local — NEVER commit this file to git

# Client-side variable (safe to expose — inlined at build time)
NEXT_PUBLIC_SITE_URL=http://localhost:3000
NEXT_PUBLIC_ANALYTICS_ID=G-XXXXXXXXXX

# Server-only variables (never exposed to browser)
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
STRIPE_SECRET_KEY=sk-test-YOUR_KEY_HERE
AUTH_SECRET=your-super-secret-jwt-signing-key-at-least-32-chars

// app/components/Footer.tsx
'use client'

export function Footer() {
  // Works — NEXT_PUBLIC_ is inlined at build time
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL

  return (
    <footer>
      <a href={siteUrl}>Home</a>
      <p>Analytics ID: {process.env.NEXT_PUBLIC_ANALYTICS_ID}</p>
    </footer>
  )
}

// app/dashboard/page.tsx — Server Component (no 'use client')
import { db } from '@/lib/db'

export default async function DashboardPage() {
  // DATABASE_URL is only available server-side — never reaches browser
  const users = await db.query('SELECT * FROM users LIMIT 10')
  return <main><h1>Dashboard</h1><p>{users.length} users</p></main>
}

// app/api/charge/route.ts
import { NextRequest, NextResponse } from 'next/server'
import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2024-04-10',
})

export async function POST(req: NextRequest) {
  const { amount } = await req.json()
  const paymentIntent = await stripe.paymentIntents.create({
    amount,
    currency: 'usd',
  })
  return NextResponse.json({ clientSecret: paymentIntent.client_secret })
}

// types/env.d.ts
declare global {
  namespace NodeJS {
    interface ProcessEnv {
      // Public (client + server)
      NEXT_PUBLIC_SITE_URL: string
      NEXT_PUBLIC_ANALYTICS_ID: string

      // Server only
      DATABASE_URL: string
      STRIPE_SECRET_KEY: string
      AUTH_SECRET: string
      NODE_ENV: 'development' | 'production' | 'test'
    }
  }
}

// Required to make this a module
export {}

// tsconfig.json — ensure env.d.ts is included
{
  "include": ["next-env.d.ts", "types/**/*.d.ts", "**/*.ts", "**/*.tsx"]
}