So basically I am working on a page and needed to redirect my user upon clicking a button somewhere else, so i used an event handler:

  <button onClick={(lid) => router.push("/worldwideweb")}>click here</button>

only to get:
- error Error: Event handlers cannot be passed to Client Component props.

I solved this by creating a whole new client side component, CSButton, and pass do everything there:

'use client'
import { useRouter } from "next/navigation";
import { TCSButton } from "../types";

const CSButton = (params: TCSButton) => {
    const { pushTo, text } = params;

    const router = useRouter();
    return <button onClick={(lid) => router.push(pushTo)}>{text}</button>
}

export default CSButton;

Now i have this folder with clientside components only where i use my hooks and click handlers, though my doubt is:

is it the correct way? at some point i will have duplicated of components that are CS and SS, same thing but one is clientside, one is serverside, but some components need to be SS.