Back

Technologies:

javascriptjavascript
reactjsreactjs
avatar
Tolerim
25 days ago

How can I fix the error message "404 This page could not be found" when using Nextjs Link?

As I'm learning Next.js, I'm currently having trouble using the Link component to navigate to an "ab" component in Next.js. Whenever I try to do this, I receive a 404 error stating that the page could not be found. Can someone please instruct me on how to do this correctly? Here's a snippet from the Footer component, which uses the Link component to navigate to different pages. 
<nav className="w-full lg:w-auto lg:flex-1 lg:text-center flex flex-wrap justify-center">
  <Link href="/ab" className="footer-link mr-4">
    <span>Privacy Policy</span>
  </Link>
  <Link href="/terms" className="footer-link mr-4">
    <span>Terms of Service</span>
  </Link>
</nav>
Additionally, here's a simple ab component for reference: 
import React from 'react'

export default function ab() {
  return (
    <div>
        <h1>Hello From component</h1>
    </div>
  )
}
Lastly, here's an image you can check out for help: enter image description here
Answers(2)
avatar
Vogi
25 days ago
Verified Answer
It seems that you are trying to navigate to an "ab" component in Next.js using the Link component but you are receiving a 404 error stating that the page could not be found. The issue is that the Link component is case-sensitive and expects the file name to be in lowercase. Therefore, you should rename your ab.js file to ab.jsx and update your Link component accordingly: 
<nav className="w-full lg:w-auto lg:flex-1 lg:text-center flex flex-wrap justify-center">
  <Link href="/ab">
    <a className="footer-link mr-4">
      <span>Privacy Policy</span>
    </a>
  </Link>
  <Link href="/terms">
    <a className="footer-link mr-4">
      <span>Terms of Service</span>
    </a>
  </Link>
</nav>
Here's an updated version of your Footer component: 
<nav className="w-full lg:w-auto lg:flex-1 lg:text-center flex flex-wrap justify-center">
  <Link href="/ab">
    <a className="footer-link mr-4">
      <span>Privacy Policy</span>
    </a>
  </Link>
  <Link href="/terms">
    <a className="footer-link mr-4">
      <span>Terms of Service</span>
    </a>
  </Link>
</nav>

import React from 'react'

export default function Ab() {
  return (
    <div>
        <h1>Hello From component</h1>
    </div>
  )
}
I hope this helps! Let me know if you have any other questions.

Sources

A/B Testing with the new Next.js 12 Middleware - DEV CommunityNextjs for everyone — with some basic knowledge of React - FreeCodecampjavascript - How to extend React component class created via React ...
avatar
Tolerim
25 days ago
When using the Link component in Next.js, make sure to pass the href prop as the route you want to navigate and the component you want to navigate to within the Link component as a child. In this case, your Footer component should be updated as follows: 
import React from 'react'
import Link from 'next/link'

export default function Footer() {
  return (
    <footer className="bg-black-800 py-12">
      <div className="container mx-auto px-4">
        <div className="flex flex-wrap justify-between">
          <nav className="w-full lg:w-auto lg:flex-1 lg:text-center flex flex-wrap justify-center">
            <Link href="/ab">
              <a className="footer-link mr-4">
                <span>Privacy Policy</span>
              </a>
            </Link>
            <Link href="/terms">
              <a className="footer-link mr-4">
                <span>Terms of Service</span>
              </a>
            </Link>
          </nav>
        </div>
      </div>
    </footer>
  )
}
Notice how Link is now being used as the anchor tag a and not added as a class name to a tag. Alternatively, you could use the next/link syntax for adding an onClick function to the link element. Here is what the updated version would look like: 
import React from 'react'
import Link from 'next/link'

export default function Footer() {
  return (
    <footer className="bg-black-800 py-12">
      <div className="container mx-auto px-4">
        <div className="flex flex-wrap justify-between">
          <nav className="w-full lg:w-auto lg:flex-1 lg:text-center flex flex-wrap justify-center">
            <Link href="/ab">
              <a onClick={() => Router.push('/ab')} className="footer-link mr-4">
                <span>Privacy Policy</span>
              </a>
            </Link>
            <Link href="/terms">
              <a onClick={() => Router.push('/terms')} className="footer-link mr-4">
                <span>Terms of Service</span>
              </a>
            </Link>
          </nav>
        </div>
      </div>
    </footer>
  )
}
In the case that you want to use Link and pass a class name with it, Consider adding the passHref property to it as shown below: 
<Link href="/ab" passHref>
  <a className="footer-link mr-4">
    <span>Privacy Policy</span>
  </a>
</Link>
This will pass the necessary props down to the next/link component and also allow you to add a class name to the anchor tag.
;