Issues with Next/Link with app folder - How can I stop 404'ing?

So here I have a part of my NavBar()

        {/* Desktop Nav */}
        <div className="hidden md:flex items-center space-x-6">
          <Link href={item1Href}>
            <div className="text-lg hover:text-gray-400">{item1}</div>
          </Link>
          <Link href={item2Href}>
            <div className="text-lg hover:text-gray-400">{item2}</div>
          </Link>
          <Link href={item3Href}>
            <div className="text-lg hover:text-gray-400">{item3}</div>
          </Link>
          <Link href={item4Href}>
            <div className="text-lg hover:text-gray-400">{item4}</div>
          </Link>
          <Link href={buttonLink}>
            <button className="border-2 shadow-2xl hover:bg-white 
             hover:text-black transition duration-300 px-8 py-4">
              Residents
            </button>
          </Link>
          <Link href={buttonLink}>
            <button className="border-2 shadow-2xl hover:bg-white 
             hover:text-black transition duration-300 px-8 py-4">
              Apply Now
            </button>
          </Link>
        </div>

And here is how im using the component

      <NavBar 
        item1="Amenities" item1Href="/#amenities"
        item2="Floor Plans" item2Href="/#floorplans"
        item3="Directions" item3Href="/#directions"
        item4="Contact Us" item4Href="/contact"
      />

My problem is that {item4Href} which is "/contact" 404's. I figure it's likely because my project is set up like

• src
  • app
    • contact.js

and not the regular pages folder but Next/Link should understand

const nextConfig = {
    pagesDir: './app',
  }

within next.config.mjs.

Recently - I just tried using the file convention

• src
  • app
    • contact
      • contact.js

and I still got a 404

change the name of contact.js file to page.jsx and keep it inside the contact folder

• src
  • contact
    • page.jsx