Dynamic server error when i used headers

Question

What should I fix to avoid getting this error? Can't I both use 'generateStaticParams()' and check which device the visitor entered from?

the error i got: "Dynamic server usage: Page couldn't be rendered statically because it used 'headers'."

version-controller.tsx -->

import { headers } from "next/headers";

export const versionControl = () => {
    const headersList = headers();
    const userAgent = headersList.get("user-agent");
    const isMobile = /iPhone|iPad|iPod|Android|webOS|BlackBerry|IEMobile|Opera Mini/i.test(userAgent as string)
    return isMobile
}

[postId]/page.tsx -->

export async function generateStaticParams() {
  const post = await db.post.findMany()
  return post.map(post => ({postId: post.id}))
}

const PostId = async () => {
      const isMobile = versionControl()
      return (
        <div>
          {isMobile
          ? <MobileVersion />
          : <DesktopVersion />
          }
        </div>
    );
  }

export default PostId;

{isMobile ? : }

); } export default PostId;

Dynamic server error when i used headers

0 Replies