previewData is not a function error after updating NextJS

I have a NextJS and Sanity.io blog project. Today I updated NextJS from 13.2.3 to 13.4.2 and when I try to run it, I get this error:

Error: (0 , next_headers__WEBPACK_IMPORTED_MODULE_1__.previewData) is not a function

Here's the code:

import { previewData } from "next/headers";
import { groq } from "next-sanity";
import { client } from "../../lib/sanity.client";
import PreviewSuspense from "../../components/PreviewSuspense";
import BlogList from "../../components/BlogList";
import PreviewBlogList from "../../components/PreviewBlogList";

const query = groq`
    *[_type == "post"] {
        ...,
        author->,
        categories[]->
    } | order(_createdAt desc)
`;

//export const revalidate = 60; // revalidate this page every 60 seconds

export default async function HomePage() {
  if (previewData()) {
    return (
      <PreviewSuspense
        fallback={
          <div role="status">
            <p className="text-center text-lg animate-pulse text-[#F7AB0A]">
              Loading Preview Data...
            </p>
          </div>
        }
      >
        <PreviewBlogList query={query} />
      </PreviewSuspense>
    );
  }

  const posts = await client.fetch(query);

  return <BlogList posts={posts} />;
}

How can I fix this? Do I have to use something else?

Solution

in my case, i implements like this

in app/api/draft/route.ts

import { draftMode } from "next/headers";
import { redirect } from "next/navigation";

export async function GET(request: Request) {
  draftMode().enable();
  redirect("/");
  // return new Response("Draft mode is enabled");
}

in app/api/exit-draft/route.ts

import { draftMode } from "next/headers";
import { redirect } from "next/navigation";

export async function GET(request: Request) {
  draftMode().disable();
  redirect("/");
  // return new Response("Draft mode is disabled");
}

in page.tsx

import Content from "@/components/home/Content";
import { draftMode } from "next/headers";

export default function Home() {
  const { isEnabled } = draftMode();
  if (isEnabled) {
    return (
      <Content>
        <p>Draft Mode</p>
      </Content>
    );
  }
  return (
    <Content>
      <p>Homepage</p>
    </Content>
  );
}