I’m new to Next js and am trying to finish a website I had paid someone to build but disappeared on me before completing.

The footers on the website built with Next js are appearing on the Home page but not on any of the other pages.

After doing some research I discovered it was because the footer component contains usePathname (as you see in the following code) which only works on client side components and the components folder is in the App directory.

const Footer = () => {
  const pathname = usePathname();

  if (pathname !== "/") return null;

  return (
    <footer className="py-[66px] bg-black min-h-[326px] flex">

I understand that usePathname is a Client Component hook that lets you read the current URL’s pathname as stated on the Next js website but why is that needed in a footer component and why does removing it cause other components (like one on my Home page) to disappear?

I removed the following two lines of code and the footer component appeared as it is supposed to but then a component with a set of hyperlinked images on my Home page disappeared.

const pathname = usePathname();

  if (pathname !== "/") return null;

I expected the Footer component to appear as it did but can’t understand why it caused the other component on my Home page to disappear.