Environment and Security

# Safe: Only accessible server-side
DATABASE_URL="postgresql://user:password@localhost/db"
 
# EXPOSED: Embedded in client JavaScript bundle
NEXT_PUBLIC_ANALYTICS_ID="G-ABC123"

import "server-only";
 
// Simulate a database call that uses server secrets
export function getUserFromDB(userId: string) {
  // In real code, this would use process.env.DATABASE_URL
  // The INTERNAL_CONFIG demonstrates server-only variable access
  const config = process.env.INTERNAL_CONFIG ?? "default";
 
  // Simulated database response with sensitive fields
  return {
    id: userId,
    email: "user@example.com",
    passwordHash: "bcrypt$2b$10$...", // NEVER expose this
    internalNotes: `VIP customer (config: ${config})`, // NEVER expose this
    name: "Jane Developer",
    createdAt: new Date().toISOString(),
  };
}

import "server-only";
import { getUserFromDB } from "./db";
 
// Return only safe, public fields
export function getUserDTO(userId: string) {
  const user = getUserFromDB(userId);
 
  // Only return fields that are safe to expose
  return {
    id: user.id,
    name: user.name,
    createdAt: user.createdAt,
  };
}

import { getUserDTO } from "@/lib/server/user-dto";
import { UserCard } from "@/components/user-card";
 
export default function SecurityDemoPage() {
  // Server Component safely calls the Data Access Layer
  const user = getUserDTO("user-123");
 
  return (
    <main className="flex flex-col gap-4 p-4">
      <h1 className="font-bold text-2xl">Security Demo</h1>
      <p className="text-gray-600">
        This page demonstrates secure data fetching patterns.
      </p>
      {/* Pass only the safe DTO to the Client Component */}
      <UserCard user={user} />
    </main>
  );
}

"use client";
 
type UserDTO = {
  id: string;
  name: string;
  createdAt: string;
};
 
export function UserCard({ user }: { user: UserDTO }) {
  return (
    <div className="rounded border bg-white p-4 shadow-sm">
      <h2 className="font-semibold">{user.name}</h2>
      <p className="text-gray-500 text-sm">ID: {user.id}</p>
      <p className="text-gray-500 text-sm">
        Joined: {new Date(user.createdAt).toLocaleDateString()}
      </p>
    </div>
  );
}

"use client";
 
// This will cause a BUILD ERROR when used
import { getUserFromDB } from "@/lib/server/db";
 
export function BadImport() {
  const _user = getUserFromDB("test");
  return <div>This should never render</div>;
}

import { BadImport } from "@/components/bad-import";
 
export default function TestBadImportPage() {
  return <BadImport />;
}

# Client-accessible (bundled in JavaScript at build time)
# Only use for truly public data like analytics IDs
NEXT_PUBLIC_APP_NAME="Your App Name"
NEXT_PUBLIC_SITE_URL="http://localhost:3000"
 
# Server-only (undefined in Client Components)
# Safe for secrets - never prefix these with NEXT_PUBLIC_
INTERNAL_CONFIG="your-server-config"
DATABASE_URL="postgresql://user:password@localhost/db"

My environment variable is `undefined` in Next.js 16.
 
**Variable name:** `_____`
Example: `DATABASE_URL` or `NEXT_PUBLIC_API_URL`
 
**Where I'm accessing it:**
- [ ] Server Component
- [ ] Client Component
- [ ] API Route / Route Handler
- [ ] Server Action
- [ ] next.config.js
 
**My .env file location:** _____
Example: `apps/web/.env.local` or `.env.local` at root
 
**My .env file contents (redact sensitive values):**
```
___PASTE_RELEVANT_ENV_LINES___
```
 
Example:
```
DATABASE_URL=postgres://...
NEXT_PUBLIC_API_URL=https://api.example.com
```
 
**How I'm accessing it:**
```tsx
___PASTE_CODE_ACCESSING_ENV_VAR___
```
 
Example:
```tsx
const url = process.env.DATABASE_URL
// or
const apiUrl = process.env.NEXT_PUBLIC_API_URL
```
 
**Questions:**
1. Does my variable need the `NEXT_PUBLIC_` prefix?
2. Is my .env file in the right location for my monorepo?
3. Did I restart the dev server after adding the variable?
 
Why is my environment variable undefined and how do I fix it?

module.exports = {
  experimental: {
    taint: true,
  },
};