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.