next.js-tutorial

Next.js Routing

To use routing in a React project we make use of a third-party package and create a file, route.js, to configure the routes. For each route created, a component file exports the component, imports it in routes.js, and configures the new route with a path property.

Next.js uses a file system-based routing method to avoid writing code. Every feature in Next.js must adhere to a set of rules, and when a file is uploaded to a project’s pages folder, it automatically becomes available as a route. The most typical routing patterns can be defined by mixing and matching file names with a hierarchical folder structure.

The following are some of the routing patterns that will be addressed further in this article:

  • Index Routes
  • Nested routes
  • Dynamic routes
  • Imperative Routing

Create a Next.js application with the command npx create-next-app next-routing to get started.

Open up the directory you’d like to create your project in and run:

npx create-next-app next-routing

After the installation is complete, you can navigate to your new project directory:

cd next-routing

Once there, start your development server:

npm run dev

And once the server is ready, you can open up http://localhost:3000 in your browser where you can now see your new Next.js app!

Because the focus is on routing, the folder responsible for this may be the pages folder.

Index Routes

Let’s make an index.js file because we don’t have one yet. When a user hits the website’s main page, which is located at http://localhost:3000, this must be rendered. The file should look like this, but you can add whatever message you wish.

index.js

function Index() {
  return <h1>Home Page</h1>
}

export default Index

We are going to make two more pages named ‘about’ and ‘account’.

about.js

function About() {
  return <h1>About Page</h1>
}

export default About

account.js

function Account() {
  return <h1>Account Page</h1>
}

export default Account

Now if we enter http://localhost:3000/about we will see that the about page is rendered and the same goes for the account page.

Note: Pages are associated with a route based on their filename, like the above, account.js maps to /account.

Nested Routes

When the user navigates to the URL localhost:3000/article, we want a page to be rendered. However, when the user navigates to the URL localhost:300/article/development, we also require a page to be rendered, as well as another for the URL localhost:300/article/competitive-programming. Let’s look at how to do this using the page paste routing method.

Create a new page named article.js inside the pages folder.

article.js

function Article() {
  return <h1>Article Page</h1>
}
export default Article

Users can implement nested routes by simply nesting folders inside the pages folder just make sure that the file and folder name are the same.

Users can implement nested routes by simply nesting folders inside the pages folder just make sure that the file and folder name are the same.

Now if you navigate to the URL localhost:300/article/competitive-programming you will see the desired results. You can even move the article.js file to the article folder, just rename it as index.js.

Dynamic routes

For complex systems, defining routes using predetermined paths isn’t always enough, which is why we’ll use dynamic routing. Let’s look at a case where we’re creating a book store listing and detail page. If the user navigates to /book, we should show a list of books; however, if the user navigates to /book/id, we need to show information of that specific book.

Make a new folder called book, and a new file called index.js.

index.js

function BooksList() {
  return (
    <>
            <h2>Book 1</h2> <
    h2 > Book 2 < /h2> <
    h2 > Book 3 < /h2> <
    h2 > Book 4 < /h2> <
    />
  )
}

export default BooksList

In this case, we want a dynamic value that maps to a certain file in the book folder, and we can establish a dynamic route in Next.js by adding brackets to a page file name. [bookid].js would be the name in this case.

[bookid].js

import {
  useRouter
} from 'next/router'

function BookDetail() {
  const router = useRouter()
  const id = router.query.bookid
  return <h1>Book Detail About {id} </h1>
}

export default BookDetail

Now if we navigate to the /book/3 we will see:

Imperative Routing

To move from one page to another in Next.js, we’ve been using the Link react component. There is also a programmatic approach to accomplish this using the Router component. Generally Router component is used with html tags.

Although next/link should be able to handle most of your routing needs, you can also perform client-side navigations without it.

The following example demonstrates how to navigate pages using useRouter:

import {
  useRouter
} from 'next/router'

export default function ReadMore() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/about')}>
      Click here to read more
    </button>
  )
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.