Links

If you visit the routes by directly typing it into the browser, that works just fine, but linking to a route in your app requires syntax beyond the <a> tag element.

This lesson is about how to link to pages in your app. This includes all pages: ones that are created from placing a JS file in that pages folder, as well as ones that you created as dynamic routes.

Let me give you an example. If you go to this page in the browser, i.e., http://localhost:3000/search/cats, your first instinct is that you can link to it from another page in your app like this <a href="http://localhost:3000/search/cats">Go here</a> . However, that will not work with Next.js.

NOTE: localhost links only work if you are running the program on your computer, but they are not needed for the Educative platform examples.

Import Next Link

The first step in making links work with Next.js is to import Link at the top of your program. The syntax looks like this:

Get hands-on with 1400+ tech skills courses.