Hiding hyperlinks

#webdev #nextjs #tailwindcss #css

Today we will be hiding hyperlinks as the title suggests, there are a total of two ways of doing so. I got the idea from this post by @rohan_sharma Let's a go! (note that these methods are ONLY valid in nextjs)

#1, styling a hyperlink with tailwind

This one is the most obvious, and the easiest to use & find. Here is the code:

import Link from "next/link";
import { useRouter } from "next/navigation";

export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
        <Link
          href="https://www.google.com"
          className="text-foreground hover:text-foreground decoration-none"
        >
          Google
        </Link>
      </main>
    </div>
  );
}

This takes advantage of tailwind's styling utility, and uses it to make it hard to locate the link if you eyeball it, BUT, an anchor tag will be in the dom explorer, a dead giveaway.

#2, using next/navigation

This one is by far the hardest to detect, it is basically IMPOSSIBLE to find, here is the code:

'use client'

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

export default function Home() {

  const router = useRouter();
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  })

  if (!isMounted) {
    return null; // Prevents rendering until the router is mounted
  }

  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
        <p
          onClick = {() => {
            router.push("https://www.google.com");
          }}
        >
          Google
        </p>
      </main>
    </div>
  );
}