I have a simple Next.js app with the following server component:

import { headers } from 'next/headers';

export default async function Page() {
  const headersList = await headers();
  console.log(headersList);
  return <h1>Hello, Dashboard Page!</h1>;
}

According to the Next.js documentation, I should be able to retrieve headers, including the client's IP address and User-Agent, by using headers() in an asynchronous server page. However, when I log headersList, it only returns an empty object.

How can I correctly retrieve the client’s IP address and User-Agent in a Next.js server component? Is there something I am missing in the configuration, or is this approach incorrect?