Hello I'm new to NextJS and I am trying to navigate to another page when a button is clicked, So I have Page.tsx and another page called LearnMore.tsx.

This is the link in Page.tsx I do have import Link from 'next/link'; at the top.

<Link href="/LearnMore" >
        <div className="flex justify-center items-center w-40 sm:w-44 md:w-52 h-12 bg-white dark:bg-black rounded-lg border-2 border-black dark:border-white hover:bg-gradient-to-r from-[#003366] via-[#0085FF] to-[#60D9FF] hover:border-none active:opacity-80 transition-all">
              <h3 className="text-black dark:text-white text-lg sm:text-xl md:text-2xl font-medium hover:text-white">Learn More</h3>
        </div>
      </Link>

And LearnMore.tsx is just a standalone page in the App Directory here is it's code:

import React from 'react'

const LearnMore = () => {
  return (
    <div>LearnMore</div>
  )
}

export default LearnMore

When i click the button /LearnMore appears at the end of the URL but returns 404 This page could not be found.

I've tried putting LearnMore.tsx in its own folder inside of the App Directory and putting LearnMore.tsx in the link href but nothing has worked.

Again I'm new to this and its probably something dumb so please be patient with me. Thanks in advance. 🙂