Error: 
  × You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

├ ● /posts/[slug]                        782 B           396 kB
├   ├ /posts/post-1
├   ├ /posts/post-2
├   └ /posts/post-3

●  (SSG)      prerendered as static HTML (uses getStaticProps)

import { ClientSidePostPage } from '@/app/posts/[slug]/ClientSidePostPage';
import { fetchPostData, postsData } from '@/app/posts/[slug]/data';

// Static generation
export async function generateStaticParams() {
  return postsData.map((post) => ({ slug: post.slug }));
}

// Server component
// @ts-ignore
export default async function PostPage({ params: { slug } }) {
  const initialPost = await fetchPostData(slug);

  if (!initialPost) {
    // Handle the case where the post is not found (e.g., return a 404 page)
    return <div>Post not found</div>;
  }

  return <ClientSidePostPage initialPost={initialPost} />;
}

// Interface for Post
export interface Post {
  slug: string;
  title: string;
  content: string;
  related: string[];
}

// Dummy JSON data
export const postsData: Post[] = [
  {
    slug: 'post-1',
    title: 'Post 1',
    content: 'text '.repeat(500),
    related: ['post-2', 'post-3'],
  },
  {
    slug: 'post-2',
    title: 'Post 2',
    content: 'text '.repeat(500),
    related: ['post-1', 'post-3'],
  },
  {
    slug: 'post-3',
    title: 'Post 3',
    content: 'text '.repeat(500),
    related: ['post-1', 'post-2'],
  },
];

// Client component for handling infinite scrolling

// Simulating fetchPostData using dummy data
export const fetchPostData = async (
  slug: string,
): Promise<Post | undefined> => {
  return postsData.find((post) => post.slug === slug);
};

'use client';

import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

import type { Post } from '@/app/posts/[slug]/data';
import { fetchPostData } from '@/app/posts/[slug]/data';

export function ClientSidePostPage({ initialPost }: { initialPost: Post }) {
  const router = useRouter();
  const [relatedPosts, setRelatedPosts] = useState<Post[]>([]);
  const [currentPost, setCurrentPost] = useState<Post>(initialPost);

  useEffect(() => {
    const loadMorePosts = async (slugs: string[]) => {
      const relatedData = await Promise.all(
        slugs.map((slug) => fetchPostData(slug)),
      );
      setRelatedPosts(
        relatedData.filter((post) => post !== undefined) as Post[],
      );
    };

    loadMorePosts(currentPost.related || []);
  }, [currentPost]);

  const handleScroll = () => {
    if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
      if (relatedPosts.length > 0) {
        const nextPost = relatedPosts.shift()!;
        router.push(`/posts/${nextPost.slug}`);
        setCurrentPost(nextPost);
        setRelatedPosts([...relatedPosts]);
      }
    }
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [relatedPosts]);

  return (
    <div className="max-w-96 rounded-lg">
      <h1>{currentPost.title}</h1>
      <p>{currentPost.content}</p>

      {/* Load related posts */}
      {relatedPosts.map((post) => (
        <div key={post.slug}>
          <h1>{post.title}</h1>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}