Environment and Config

# .env.local

# Server-only (NOT sent to browser)
DATABASE_URL=postgresql://...
JWT_SECRET=supersecretkey
STRIPE_SECRET_KEY=sk_live_...

# Browser-visible (must prefix with NEXT_PUBLIC_)
NEXT_PUBLIC_APP_URL=https://myapp.com
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_live_...

// Server Component / Route Handler / Middleware
const secret = process.env.JWT_SECRET        // works

// Client Component
const appUrl = process.env.NEXT_PUBLIC_APP_URL   // works
const secret = process.env.JWT_SECRET            // undefined (never sent to client)

// Server Component
export default async function Page() {
  const db = process.env.DATABASE_URL!    // string | undefined
  return <div>DB configured: {!!db}</div>
}

// Client Component
'use client'
export function Footer() {
  return <p>{process.env.NEXT_PUBLIC_APP_URL}</p>
}

// lib/env.ts  (import this in layout.tsx or server entry)
import { z } from 'zod'

const envSchema = z.object({
  DATABASE_URL: z.string().url(),
  JWT_SECRET: z.string().min(32),
  NEXT_PUBLIC_APP_URL: z.string().url(),
  NODE_ENV: z.enum(['development', 'test', 'production']),
})

export const env = envSchema.parse(process.env)

import type { NextConfig } from 'next'

const config: NextConfig = {
  // ─── Output / Build ───────────────────────────────────────────
  output: 'standalone',      // self-contained output (Docker)
  // output: 'export',       // static HTML export (no server needed)
  distDir: '.next',          // custom build output directory

  // ─── Images ───────────────────────────────────────────────────
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'example.com' },
    ],
    formats: ['image/avif', 'image/webp'],   // default: webp only
    minimumCacheTTL: 60,                     // seconds
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    unoptimized: false,
  },

  // ─── Redirects / Rewrites / Headers ──────────────────────────
  async redirects() {
    return [
      { source: '/old/:slug', destination: '/new/:slug', permanent: true },
    ]
  },

  async rewrites() {
    return {
      beforeFiles: [],   // checked before filesystem/pages
      afterFiles: [],    // checked after filesystem, before fallbacks
      fallback: [],      // last resort
    }
  },

  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
        ],
      },
    ]
  },

  // ─── TypeScript / ESLint ──────────────────────────────────────
  typescript: {
    ignoreBuildErrors: false,    // true to skip type errors at build (dangerous)
  },
  eslint: {
    ignoreDuringBuilds: false,
    dirs: ['app', 'components', 'lib'],
  },

  // ─── Env ──────────────────────────────────────────────────────
  env: {
    // Expose build-time constants (accessible as process.env.VAR anywhere)
    BUILD_TIME: new Date().toISOString(),
  },

  // ─── Webpack customization ────────────────────────────────────
  webpack(config, { isServer }) {
    if (!isServer) {
      // Don't bundle server-only packages client-side
      config.resolve.fallback = { fs: false, path: false }
    }
    return config
  },

  // ─── React ───────────────────────────────────────────────────
  reactStrictMode: true,
  reactCompiler: true,           // React Compiler (auto-memo) — stable top-level in Next 16

  // ─── Compiler ────────────────────────────────────────────────
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production',
    // styledComponents: true,
    // emotion: true,
  },

  // ─── Server packages ─────────────────────────────────────────
  // Opt packages out of Server Component bundling (use require at runtime).
  // Top-level since Next 15 (was experimental.serverComponentsExternalPackages).
  serverExternalPackages: ['@prisma/client'],

  // ─── Cache Components (Next 16, beta) ────────────────────────
  // Enables the 'use cache' directive + cacheLife/cacheTag.
  // Replaces the Next 15 experimental ppr / dynamicIO flags.
  // cacheComponents: true,

  // ─── Logging ─────────────────────────────────────────────────
  logging: {
    fetches: {
      fullUrl: true,    // log full URLs in dev
    },
  },

  // ─── Page Extensions ─────────────────────────────────────────
  pageExtensions: ['tsx', 'ts', 'jsx', 'js'],   // default

  // ─── Trailing Slash ──────────────────────────────────────────
  trailingSlash: false,    // true → /about/ instead of /about

  // ─── Base Path ───────────────────────────────────────────────
  // basePath: '/docs',   // serve the app under a sub-path
}

export default config

// next.config.ts
export default { output: 'export' }

npm run build   # generates out/ directory
npx serve out   # serve locally to test

export default { output: 'standalone' }

FROM node:20-alpine
COPY .next/standalone ./
COPY .next/static ./.next/static
COPY public ./public
CMD node server.js

// instrumentation.ts (root level)
export async function register() {
  if (process.env.NEXT_RUNTIME === 'nodejs') {
    // Node.js-only setup (OpenTelemetry, Sentry, etc.)
    const { NodeSDK } = await import('@opentelemetry/sdk-node')
    new NodeSDK().start()
  }
}

export async function onRequestError(
  err: Error,
  request: { path: string; method: string },
  context: { routerKind: string; routePath: string }
) {
  // Report errors to your monitoring service
  await reportError(err, { path: request.path })
}

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{ "name": "next" }],
    "paths": { "@/*": ["./*"] }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}