Issues with implementing the link component in next.js

Question

Issues with implementing the link component in next.js

I've been working on a blog using next.js and I'm having trouble with the header links not working. I followed the next.js documentation to create the links, but whenever I reload the website and try to click the links, my console shows: "GET 404 (Not Found)". I've double-checked for spelling mistakes and the folder structure, but everything seems correct. I'm feeling confused. Can someone offer assistance? Thank you.

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>
  );
}

https://i.sstatic.net/sq7Kq.png

Above I show you where every component is located

typescript next.js next-link

Answer 1

Answer №1

If you're seeing a 404 error, it may be because your intro-pages are not in the correct folder structure. They should be inside the _components folder, which should be a direct subfolder of the app folder. To fix this issue, create a new folder called about and inside it, add a file named page.tsx.

For guidance on organizing your Next.js project, consult the official documentation at https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages

Following the documentation, additional pages should be created by adding a page.js file in a new folder (app/pagesYouCreated).

Here is how your folder structure should look:

./src
├── app
│   ├── _components 
│   ├── intro-pages
│   │   └── about
│   │       └── page.tsx

By organizing your folders this way, Next.js will be able to route your pages correctly. Moving the _components folder outside of the app folder, but still within src, will help with organization and maintenance of your project.

Make sure to follow Next.js conventions for folder structure to avoid routing errors. Adjusting your project as suggested should resolve the 404 error. Happy coding!

Answer 2

If you're seeing a 404 error, it may be because your intro-pages are not in the correct folder structure. They should be inside the _components folder, which should be a direct subfolder of the app folder. To fix this issue, create a new folder called about and inside it, add a file named page.tsx.

For guidance on organizing your Next.js project, consult the official documentation at https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages

Following the documentation, additional pages should be created by adding a page.js file in a new folder (app/pagesYouCreated).

Here is how your folder structure should look:

./src
├── app
│   ├── _components 
│   ├── intro-pages
│   │   └── about
│   │       └── page.tsx

By organizing your folders this way, Next.js will be able to route your pages correctly. Moving the _components folder outside of the app folder, but still within src, will help with organization and maintenance of your project.

Make sure to follow Next.js conventions for folder structure to avoid routing errors. Adjusting your project as suggested should resolve the 404 error. Happy coding!

Answer 3

Answer №2

It appears that a slight restructuring of your /app directory is needed.

In order to access /intro_pages/about, your /app directory should be organized as follows:

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

For Next.Js to work properly, there should be a page.tsx file within the /about directory. Refer to their documentation here. Make sure to verify that you are looking at the App Router docs, not the Pages Router section.

Additionally, make sure to update your page's code to include a named export like this:

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

// OR TRADITIONAL FUNCTION

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

export default aboutPage;

Answer 4

It appears that a slight restructuring of your /app directory is needed.

In order to access /intro_pages/about, your /app directory should be organized as follows:

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

For Next.Js to work properly, there should be a page.tsx file within the /about directory. Refer to their documentation here. Make sure to verify that you are looking at the App Router docs, not the Pages Router section.

Additionally, make sure to update your page's code to include a named export like this:

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

// OR TRADITIONAL FUNCTION

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

export default aboutPage;

Issues with implementing the link component in next.js

Answer №1

Answer №2

Similar questions

Bars of varying heights (Google Chart)

What is the best way to incorporate a TypeScript function within a JQuery function?

Tips on creating type definitions for CSS modules in Parcel?

Retrieve and showcase information from Firebase using Angular

Transform a nested array of objects into a distinct set of objects based on the data in JavaScript or TypeScript

Having trouble linking the date object with the default value of the date input field

Sharing data between different Angular components that are not directly related can be achieved by utilizing a service in Angular

Encountering a Typescript error while attempting to utilize mongoose functions

How can I stop inputs from blurring when a user navigates away from a page?

Retrieve information from both the client and server sides within NextJS

Adjust the column count in mat-grid-list upon the initial loading of the component

Challenges with date formatting arise for Spanish speakers when the date returns as NaN or an Invalid

Ways to display a variable within an HTML element

Error Encountered with Google Authentication in Localhost:3001 - Warning of 'Blocked Access'

How can I remove a specific page from the file structure of my NextJS 13 app?

Tips for patiently anticipating the completed response within an interceptor

Optimal method for importing libraries in Angular 2 with TypeScript

What is the Angular2 equivalent of the AngularJS $routeChangeStart event?

How can we declare and showcase a generic object with an unspecified number and names of keys in React using TypeScript?

Encountering an Error when Integrating Pusher (real-time data library) with Next.js: PusherRequestError - Unexpected status code 400