Problems to make the link component work in next.js

Question

I have been doing a blog with next.js and I am creating the header, but the links are not working, I read the next.js documentation and made the links step by step, but every time I reload my website and click the links, my console says :" GET https://gdjly5-3000.csb.app/About 404 (Not Found)". I doble-check the spelling-mistakes and the folder and seems ok. I am confused. Can somebody help me? Thanks a lot Here is the Intro.tsx

import Link from "next/link";
import Image from "next/image";
import logo from "./image/emily-logo.jpg";

export default function Intro() {
  return (
    <section>
      <nav>
        <a href="/">HOME </a>

        <Link href="/intro-pages/about">ABOUT</Link>

        <Link href="/intro-pages/blog">BLOG</Link>

        <Link href="/intro-pages/Press">PRESS</Link>

        <Link href="/intro-pages/Services">PERSONAL STYLED SERVICES</Link>
      </nav>
      <Image alt="emily-logo" className="logo-header" src={logo} />
    </section>
  );
}

Here is the Page.tsx

import Container from "@/app/_components/container";
import { HeroPost } from "@/app/_components/hero-post";
// import { Intro } from "@/app/_components/intro";
import Intro from '@/app/_components/intro'
import {SocialMedia} from '@/app/_components/SocialMedia'
import {HomePage} from '@/app/_components/HomePage'
import {Testimonial} from '@/app/_components/Testimonial'
import { MoreStories } from "@/app/_components/more-stories";
import { getAllPosts } from "../lib/api";

export default function Index() {
  const allPosts = getAllPosts();

  const heroPost = allPosts[0];

  const morePosts = allPosts.slice(1);

  return (
    <main>
      <Container>
        <Intro />
        <HomePage/>
        <SocialMedia/>
        <Testimonial/>
        <HeroPost
          title={heroPost.title}
          coverImage={heroPost.coverImage}
          date={heroPost.date}
          author={heroPost.author}
          slug={heroPost.slug}
          excerpt={heroPost.excerpt}
        />
        {morePosts.length > 0 && <MoreStories posts={morePosts} />}
      </Container>
    </main>
  );
}

Here is the about.txs

export function About() {
  return (
    <section>
      <h1>This is the About Page</h1>
    </section>
  );
}

Above I show you where every component is located

Answer 1

It looks like the 404 error you're encountering is because your intro-pages are located in the _components folder, not directly inside the app folder. To fix this, you'll need to create a new folder named about and within it, a page.tsx file.

I suggest checking the official Next.js website for guidance on structuring your project: https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages

According to the documentation:

To create additional pages, you should create a new folder and add a page.js file inside it (app/pagesYouCreated). For instance, to create a page for the /dashboard route, you should create a folder called dashboard and add the page.js file inside it.

Therefore, your folder structure should resemble the following:

./src
├── app
│   ├── _components // I recommend placing this folder outside the app folder, but within src as components and pages are treated differently in Next.js
│   ├── intro-pages
│   │   └── about
│   │       └── page.tsx

This setup ensures that your pages are correctly located for Next.js to route them properly. Moving the _components folder outside of the app but still within src will also help keep your project organized and maintain a clear separation between your components and pages.

To wrap up, make sure your pages are located in the correct directories as per Next.js conventions to avoid routing issues. Adjusting your project structure as recommended should resolve the 404 error. Happy coding!

Answer 2

It looks like you need to structure your /app directory just a little bit differently.

If you want to navigate to /intro_pages/about then you'll need your /app directory to look like this:

/app
  /intro_pages
    /about
      page.tsx
    /blog
      page.tsx
    ...

Next.Js is expecting a page.tsx file inside the /about directory. Check out their documentation here. Note that you might need to check the top of the documentation to make sure that you're viewing the docs for the App Router and not the Pages Router.

Then you may need to update the code of the page to have a named export like this:

// ARROW FUNCTION
const aboutPage = () => {
  // your page code goes here
}

// OR TRADITIONAL FUNCTION

function aboutPage() {
// your page code goes here
}

export default aboutPage;