How to fix Cannot import a Server Component from a Client Component in React

// ❌ WRONG: Directly importing Server Component into Client Component
"use client"
import ServerComponent from "./server-component"

export default function ClientComponent() {
  return <div><ServerComponent /></div>
}

// ✅ CORRECT: Pass as children prop
// app/page.tsx (Server Component)
import ClientComponent from "./client-component"
import ServerComponent from "./server-component"

export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

// app/client-component.tsx
"use client"

export default function ClientComponent({ children }: { children: React.ReactNode }) {
  return <div className="wrapper">{children}</div>
}

// ❌ WRONG: Mixed responsibilities
"use client"
import { useState } from "react"
import { db } from "@/lib/db"

export default function MixedComponent() {
  const posts = await db.post.findMany() // Error! Cannot use db in Client Component
  const [selected, setSelected] = useState(null)
  // ...
}

// ✅ CORRECT: Split into Server + Client
// app/posts-page.tsx (Server Component)
import { db } from "@/lib/db"
import PostsList from "./posts-list"

export default async function PostsPage() {
  const posts = await db.post.findMany()
  return <PostsList posts={posts} />
}

// app/posts-list.tsx (Client Component)
"use client"
import { useState } from "react"

export default function PostsList({ posts }: { posts: Post[] }) {
  const [selected, setSelected] = useState(null)
  // Client-side interactivity only
}

// app/actions.ts (Server Action)
"use server"
import { db } from "@/lib/db"

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string
  await db.post.create({ data: { title } })
}

// app/post-form.tsx (Client Component)
"use client"
import { createPost } from "./actions"

export default function PostForm() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button type="submit">Create</button>
    </form>
  )
}

npm install server-only

// lib/database.ts
import "server-only"
import { PrismaClient } from "@prisma/client"

export const db = new PrismaClient()

npm install client-only

// components/counter.tsx
"use client"
import { useState } from "react"

export default function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

// Example component hierarchy

app/page.tsx (Server Component)
├─ Header (Server Component)
├─ SearchBar (Client Component) ← "use client" boundary
│  └─ SearchIcon (Client Component - imported into Client)
├─ PostsList (Server Component)
│  ├─ PostCard (Server Component)
│  └─ LikeButton (Client Component) ← "use client" boundary
└─ Footer (Server Component)