Next JS on click handler - Javascript Code

Learning Next JS can be frustrating so as I am learning I am documenting my findings via small blog posts ..this one will be followed by a posting to API function.

const handleMyClickBro = (e) =>  {
    console.log('DevDarren is the best at SEO yehaww!');
    console.log(e);
    alert('I handled the dam click bro 🤖🤖🤖🐱‍🏍');
}

const SEOKINGSEXPORT= () => (

    <div>
        <button onClick={handleMyClickBro}>Add</button>
    </div>

)

export default SEOKINGSEXPORT;

import { useRouter } from 'next/router'

export default function IndexPage() {
  const router = useRouter()

  const handleClick = (e, path) => {
   e.preventDefault()

    if (path === "/about") {
      console.log("I clicked on the About Page");
      // then you can: 
      // router.push(path)
    }
    if (path === "/posts") {
      console.log("I clicked on the Posts Page");
      // then you can: 
      // router.push(path)
    }
  };
}

  return (
    <div>
      Get your Wifes name out of your....{" "}
      <Link onClick={(e) => handleClick(e, "/about")}>
        <a>About</a>
      </Link>
      <Link onClick={(e) => handleClick(e, "/posts")}>
        <a>Posts</a>
      </Link>
    </div>
  );

© 2022 DevDarren • Loaded with ❤️ by DevDarren