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
– jual ahmed, Commented Feb 18, 2020 at 16:13

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

2

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

answered Feb 18, 2020 at 16:08

ddon-90

3,0062 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

EverydayDeveloper Over a year ago

I have added both Navbar.tsx and App.tsx in the pages folder only. Here is the screenshot prnt.sc/r45pif

EverydayDeveloper Over a year ago

Please check the screenshot above, all the route files mentioned in App.tsx are in the pages folder

ddon-90 Over a year ago

<Link href="/new"> doesn't mach with NewQuestion.tsx. Try to rename the file or the route eg. new.tsx

EverydayDeveloper Over a year ago

I have renamed <Link href="/new"> to <Link href="/NewQuestion"> but then what is the point of routing in this? In my app.tsx I have routed /new to NewQuestion

ddon-90 Over a year ago

Have a check on this nextjs.org/docs/api-reference/next/link You are probably gonna find everything you need.

|

Collectives™ on Stack Overflow

Issue with routing and link using nextjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related