Issue with routing and link using nextjs

Question

I am facing an issue with routing and links in Nextjs. I have created a blog like page using React+Typescript and I would like to use the same code in Nextjs. I was initially using import {Link} from 'react-router-dom'; .However since this link doesn't work with Nextjs, I have used the link/next import.

The issue is when, I try to click on "Aboutus" of my Navbar, I get the following error:

404 This page could not be found.

Here is the code of my Navbar.tsx

import React from 'react';
import Link from 'next/link';
const Navbarr : React.FC = () => {
return (
<div>
<AppName >
        <Link href="/"><a>Abc</a></Link>
    </AppName>
    <Button>
        <Link href="/new">
          <a>Aboutus</a>
        </Link>
    </Button>
</div>)}
export default NavBarr;

you have to add all pages at pages directory to get a route link — jual ahmed

ddon-90 ddon-90 · Accepted Answer · 2020-02-18T16:08:57

In Next.js when a file is added to the pages directory it's automatically available as a route.

I suggest you to read https://nextjs.org/docs/routing/introduction

Issue with routing and link using nextjs

1 Answers