How to fix revalidatePath can only be used in a Server Action in React

// ❌ Wrong: Client Component
"use client"
import { revalidatePath } from "next/cache"

export default function MyComponent() {
  const handleClick = () => {
    revalidatePath("/posts") // Error!
  }
  return <button onClick={handleClick}>Refresh</button>
}

// app/actions/revalidate.ts
"use server"

import { revalidatePath } from "next/cache"

export async function revalidatePostsAction() {
  revalidatePath("/posts")
  // Optionally return success status
  return { success: true }
}

// app/components/RefreshButton.tsx
"use client"

import { revalidatePostsAction } from "@/app/actions/revalidate"

export default function RefreshButton() {
  const handleRefresh = async () => {
    await revalidatePostsAction()
    // Handle success/error
  }
  
  return <button onClick={handleRefresh}>Refresh Posts</button>
}

// app/posts/page.tsx (Server Component by default)
import { revalidatePath } from "next/cache"

export default function PostsPage() {
  async function refreshPosts() {
    "use server"
    revalidatePath("/posts")
  }
  
  return (
    <form action={refreshPosts}>
      <button type="submit">Refresh</button>
    </form>
  )
}

"use server"

import { revalidatePath } from "next/cache"
import { redirect } from "next/navigation"

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string
  
  // Update database
  await db.post.create({ data: { title } })
  
  // Revalidate before redirect
  revalidatePath("/posts")
  revalidatePath("/posts/[slug]", "page")
  
  redirect("/posts")
}

// app/api/revalidate/route.ts
import { revalidatePath } from "next/cache"
import { NextRequest, NextResponse } from "next/server"

export async function POST(request: NextRequest) {
  const { path } = await request.json()
  
  try {
    revalidatePath(path)
    return NextResponse.json({ revalidated: true })
  } catch (err) {
    return NextResponse.json({ revalidated: false }, { status: 500 })
  }
}

// ✅ Correct: File-level
"use server"

import { revalidatePath } from "next/cache"

export async function myAction() {
  revalidatePath("/posts")
}

// ✅ Correct: Function-level
export async function myAction() {
  "use server"
  revalidatePath("/posts")
}

// ❌ Wrong: Directive in wrong place
import { revalidatePath } from "next/cache"
"use server" // Too late!