I am making a website with Nextjs and tailwind css and I am trying to navigate from the landing page to the about page

The code below is my Link tag inside of the header component:

<Link href="/AboutUs" >
     <p className={`pb-5 pl-5 cursor-pointer text-darksand opacity-50`}>About</p>
</Link>

My pages AboutUs.jsx and Landing.jsx are in a folder app/pages/*jsx and Header.jsx is in app/components/Header.jsx. I am using the Header.jsx file in the landing page as following:

app
|   favicon.ico
│   globals.css
│   layout.js
│   page.js
│
├───components
│       footer.jsx
│       Header.jsx
├───pages
│       AboutUs.jsx
│       Landing.jsx

The Link component works fine for the same page (as in scrolling to an id using <Link href="/#name">), but whenever I try to navigate to a different page it gives me a 404 response. All of the resources I have found online say to put my pages inside of a “pages” folder inside the app directory and then use /page-name, but that hasn’t worked.

Question
: How do I access the other pages in my pages folder using the Link tag?

Thanks to everyone. Let me know if I should put anything else in or if there is any clarification needed.