Fix: Error: Dynamic server usage in production only error

The ‘Error: Dynamic server usage in production only’ error occurs in Next.js when dynamic server features are used in components that are expected to be statically generated, typically appearing only in production builds.

How the Error Happens

❌ Error Scenario:

// ❌ This causes the error in production
// app/page.js
export default function HomePage() {
  // ❌ Dynamic usage that prevents static generation
  const currentTime = new Date().toISOString(); // ❌ Dynamic on each request
  const userAgent = request.headers.get('user-agent'); // ❌ Request-specific data
  
  return <div>Current time: {currentTime}</div>;
}

✅ Quick Fix - Handle Dynamic Server Usage Properly

Solution 1: Configure Dynamic Options

// ✅ Allow dynamic usage with configuration
// app/page.js
export const dynamic = 'force-dynamic'; // ✅ Always run dynamically

export default function HomePage() {
  const currentTime = new Date().toISOString();
  return <div>Current time: {currentTime}</div>;
}

// ✅ Other dynamic options:
// export const dynamic = 'auto'; // ✅ Default, infer from usage
// export const dynamic = 'force-static'; // ✅ Force static generation
// export const dynamic = 'error'; // ✅ Throw error on dynamic usage

Solution 2: Use Dynamic Segments for Personalization

// ✅ For user-specific content, use dynamic segments
// app/user/[id]/page.js
export const dynamicParams = true;

export default async function UserPage({ params }) {
  const { id } = params;
  
  // ✅ Dynamic based on route parameters
  const user = await getUserById(id);
  
  return <div>Welcome {user.name}</div>;
}

// ✅ Generate static paths for known users
export async function generateStaticParams() {
  const users = await getAllUsers();
  return users.map((user) => ({
    id: user.id.toString(),
  }));
}

Solution 3: Separate Static and Dynamic Content

// ✅ Server component with static content
// app/page.js
export const dynamic = 'force-static'; // ✅ Try to make static

export default function HomePage() {
  return (
    <div>
      <h1>Static Title</h1>
      <p>Static content that can be pre-rendered</p>
      {/* ✅ Dynamic content loaded client-side */}
      <DynamicContent />
    </div>
  );
}

// ✅ Client component for dynamic content
'use client';

import { useState, useEffect } from 'react';

export default function DynamicContent() {
  const [time, setTime] = useState('');

  useEffect(() => {
    setTime(new Date().toISOString());
    const interval = setInterval(() => {
      setTime(new Date().toISOString());
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);

  return <div>Current time: {time}</div>;
}

Solution 4: Use Revalidation for Fresh Content

// ✅ For content that needs periodic updates
// app/page.js
export const revalidate = 3600; // ✅ Revalidate every hour

export default async function NewsPage() {
  // ✅ This will be cached but revalidated every hour
  const news = await fetchNews();
  
  return (
    <div>
      <h1>Latest News</h1>
      {news.map(article => (
        <div key={article.id}>{article.title}</div>
      ))}
    </div>
  );
}