How To Stop Link Component From Giving 404 Error in NextJS?

Can anyone tell me why the following Link Component is unable to find the linked page? VSCode is literally auto-completing the file name as I type it in but for some reason I keep getting 404.

//index.js in WelcomePage folder
import styles from "/styles/WelcomePage.module.css";
import Link from "next/link";

function WelcomePage() {
  return (
    <>
      <h1 className={styles.title}>This is the Title</h1>
      <Link href="/pages/ClassSearch">Class Search</Link>
    </>
  );
}

export default WelcomePage;

//index.js in ClassSearch folder
function ClassSearch() {
  return <h1>The Class Search Page</h1>;
}

export default ClassSearch;

>Solution :

I think you need to link /ClassSearch instead of pages/ClassSearch

If you create pages/ClassSearch/index.js that exports a React component ,
it will be accessible at /ClassSearch

// <Link href="/pages/ClassSearch">Class Search</Link>
<Link href="/ClassSearch">Class Search</Link>

You can check , Next Page Doc

https://nextjs.org/docs/basic-features/pages