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