Next.js routing error in website tutorial

Question

For me the next.js tutorial https://github.com/zeit/next-learn-demo.git has a problem at all stages past stage 2 "dynamic routing". Even though in the stages afterwards on stages 3 to 8 the dynamic routing should already be working.

What i assumed was the problems is that the file .next/routing appeared to be missing.

As such the tutorial asked implementation of code:

import { useRouter } from 'next/router';

and

const router = useRouter();

does not do anything.

leading to the error on clicking the link:

screenshot of next.js browser syntax error inspection

Why is the routing file not in the .next folder?

the react version is 16.10.2 (installed today through tutorial instructions) the format of code is what is in the tutorial copy pasted. (no hook rule breaking) there are no react duplicates.

console.log(router) VM38:1 Uncaught ReferenceError: router is not defined at <anonymous>:1:13 does not seem to be available — Alexander Hemming
– Alexander Hemming, Commented Oct 11, 2019 at 16:48
instead of writing it console could you write this console line in your code, i.e. right after const router = useRouter(); — warl0ck
– warl0ck, Commented Oct 11, 2019 at 18:51
THe console doesnt vie anything when i do this. Further there is this in the console: index.js:1 Fetch API cannot load file:///C:/WINDOWS/system32/next-learn-demo/8-deploying/node_modules/next/dist/client/router.js. URL scheme must be "http" or "https" for CORS request. Suggesting that it is not loading for that reason, along with 5 other api fetch requests — Alexander Hemming
– Alexander Hemming, Commented Oct 15, 2019 at 13:04

Yilmaz · Accepted Answer · 2019-11-24 00:02:40Z

1

I think you are using useRouter() in class component. useRouter is a hook and used only in functional components.

in class components we use withRouter HOC. "router" object is accessible as

this.props.router

answered Nov 24, 2019 at 0:02

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

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

Collectives™ on Stack Overflow

Next.js routing error in website tutorial

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related