Fix: process is not defined in Next.js - Quick 200-Word Guide

The ‘process is not defined’ error occurs when accessing Node.js process object in browser environment during Next.js client-side rendering.

Common Cause and Fix

// ❌ Error: Direct process access
const apiUrl = process.env.API_URL;  // Error during client hydration

// ✅ Fixed: Safe process access
const apiUrl = typeof window !== 'undefined' 
  ? window.env?.API_URL 
  : process.env.API_URL;

Environment Variable Solution

// ❌ Error: Direct access
if (process.env.NODE_ENV === 'development') {
  // Client-side error
}

// ✅ Fixed: Conditional check
const isDev = typeof window !== 'undefined' 
  ? window.location.hostname === 'localhost'
  : process.env.NODE_ENV === 'development';

Next.js Environment Configuration

// next.config.js
module.exports = {
  env: {
    API_URL: process.env.API_URL,
  },
  // For client-side access
  publicRuntimeConfig: {
    API_URL: process.env.API_URL,
  },
};

Dynamic Import Approach

// ✅ Use dynamic imports for process-dependent code
import dynamic from 'next/dynamic';

const Component = dynamic(
  () => import('../components/ServerComponent'),
  { ssr: false }
);

Quick Fix

Always check typeof window !== 'undefined' before accessing process in client components.

Remember: process is Node.js-only. Use environment variables safely.