When I deploy my application to vercel, below error occurs.

production An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive detail

It only happens in the live website, not on Vercel Preview or local.

page.tsx

...
const DeviceCardGroup = dynamic(() => import("./DeviceCardGroup"), {
  ssr: false,
});

export default async function Page() {
  const config =
    await axiosInstance.get(
      `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/xxxx`,
      {
        headers: {
          "Content-Type": "application/json",
          "X-Authorization": "Bearer " + accessToken?.value,
        },
      }
    );

  return (<DeviceCardGroup/>);
}

DeviceCardGroup

function DeviceCardGroup() {
     const { deviceList } = useGetDeviceList();
}

useGetDeviceList

...

export default function useGetDeviceList() {
  const [deviceList, setDeviceList] = useState<Device[]>([]);

  useEffect(() => {
    async function getDevicesData() {
      if (!shouldFetch) return;

      const accessToken = getAccessToken();
      const raw = await fetch(`/api/rpc/get-devices`, {
        method: "GET",
        headers: {
          "X-Authorization": `Bearer ${accessToken}`,
        },
      });
      const { devices } = await raw.json();
      setDeviceList(devices);
    }
    getDevicesData();
  }, [deviceId, shouldFetch]);

  return { deviceList };
}

api/rpc/get-devices

import axiosInstance from "@/api/axiosConfig";
import { AxiosResponse } from "axios";
import { type NextRequest } from "next/server";
import { headers } from "next/headers";

export interface RawDevice {
  batteryLevel: number;
  eui64: string;
  lastTs: number;
  type: string;
  ipaddr: string;
  swVersion: string;
}

export type Device = Omit<RawDevice, "ipaddr" | "swVersion">;

interface ApiResponse {
  devices: RawDevice[];
}

export async function GET(request: NextRequest) {
  const { searchParams } = request.nextUrl;

  const deviceId = searchParams.get("deviceId");
  const headersList = headers();
  const XAuthorizationValue = headersList.get("x-authorization");

  const response: AxiosResponse<ApiResponse> = await axiosInstance.post(
    `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/rpc/device`,
    {
      method: "getDevices",
    },
    {
      headers: {
        "Content-Type": "application/json",
        "X-Authorization": XAuthorizationValue,
      },
    }
  );

  const {
    data: { devices },
  } = response;

  const sanitizedDevices: Device[] = devices.map(
    ({ ipaddr, swVersion, ...rest }) => rest
  );

  return Response.json({ devices: sanitizedDevices });
}

I tried to import the component without dynamic import, but still doesn’t work. I am wondering if it’s related to calling route handler in server components