How to fix headers() can only be called in a Server Component in React

grep -r "from 'next/headers'" src/
grep -r "from \"next/headers\"" src/

grep -l "use client" src/**/*.tsx | xargs grep "next/headers"

// ❌ Before - Client Component trying to use headers()
"use client";
import { headers } from "next/headers";

export default function MyComponent() {
  const headersList = await headers();
  const userAgent = headersList.get("user-agent");
  return <div>User Agent: {userAgent}</div>;
}

// ✅ After - Server Component with headers()
import { headers } from "next/headers";

export default async function MyComponent() {
  const headersList = await headers();
  const userAgent = headersList.get("user-agent");
  return <div>User Agent: {userAgent}</div>;
}

// app/page.tsx (Server Component)
import { headers } from "next/headers";
import ClientComponent from "./ClientComponent";

export default async function Page() {
  const headersList = await headers();
  const userAgent = headersList.get("user-agent") || "unknown";
  const referer = headersList.get("referer") || "";
  
  return <ClientComponent userAgent={userAgent} referer={referer} />;
}

// ClientComponent.tsx (Client Component)
"use client";
import { useState } from "react";

interface Props {
  userAgent: string;
  referer: string;
}

export default function ClientComponent({ userAgent, referer }: Props) {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>User Agent: {userAgent}</p>
      <p>Referer: {referer}</p>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    </div>
  );
}

// lib/server-utils.ts
import "server-only"; // Install: npm install server-only
import { headers } from "next/headers";

export async function getUserAgent() {
  const headersList = await headers();
  return headersList.get("user-agent") || "unknown";
}

export async function getAuthToken() {
  const headersList = await headers();
  return headersList.get("authorization");
}

npm install server-only

// app/dashboard/page.tsx (Server Component)
import { getUserAgent } from "@/lib/server-utils";

export default async function Dashboard() {
  const userAgent = await getUserAgent();
  return <div>Detected: {userAgent}</div>;
}

// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const userAgent = request.headers.get("user-agent") || "";
  const authToken = request.headers.get("authorization");
  
  // Add custom headers to the response
  const response = NextResponse.next();
  response.headers.set("x-user-agent", userAgent);
  
  // Or redirect based on headers
  if (!authToken && request.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
  
  return response;
}

export const config = {
  matcher: ["/dashboard/:path*", "/api/:path*"],
};

// app/api/user-info/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const userAgent = request.headers.get("user-agent");
  const authorization = request.headers.get("authorization");
  
  return NextResponse.json({
    userAgent,
    hasAuth: !!authorization,
  });
}

npm run dev

You're importing a component that needs next/headers. 
That only works in a Server Component but one of its parents is marked with "use client"

Server Component (uses headers())
  └─> Client Component (receives props)
      └─> More Client Components

Client Component
  └─> Server Component (uses headers()) ❌ Invalid