Skip to main content

Understanding Next.js Routing: Link vs. Use Router Explained

Welcome back! In this blog post, we will be exploring the basics of Next.js routing using Link and Use Router. Next.js follows a page-based routing system, meaning that all the pages should be located under the src folder. To illustrate this, we will be creating a blank Next.js application.

The Pages Folder

When setting up a Next.js application, it is important to have an organized file structure. To get started, create a folder named "pages" at the same level as your app. Inside the "pages" folder, we will create two new files: "departments.tsx" and "courses.tsx". These files will represent the different routes of our application.

Departments Route

Inside the "departments.tsx" file, we can add some basic code to display a message specific to this route. For example, we can simply return the string "Departments". This will be the content that is displayed when navigating to the "departments" route.

Courses Route

In a similar fashion, we will add some basic code to the "courses.tsx" file to display a message for the "courses" route. Let's return the string "Courses" for this route.

Linking Routes with Link

To navigate between the different routes in our Next.js application, we can use the Link component provided by Next.js. Inside the UI, we can create three links: "Home", "Departments", and "Courses". By clicking on these links, we should be able to navigate to the corresponding routes.

Let's start by implementing the "Home" link. Inside the Link component, we can set the "href" attribute to "/" and the link text to "Home Screen". This will create a link that navigates to the home page of our application.

Next, we will add a link to navigate to the "departments" route. For this link, we can simply set the "href" attribute to "/departments" and the link text to "Departments".

Similarly, we will add a link for the "courses" route. Set the "href" attribute to "/courses" and the link text to "Courses".

Routing with Use Router

In addition to using the Link component, Next.js provides the Use Router hook for programmatic navigation. To demonstrate this, we will add two buttons to the UI: one for navigating to the "departments" route and another for navigating to the "courses" route.

Let's start by creating the "Departments Navigation" button. Inside the button's "onClick" event, we need to prevent the default behavior of the button. This can be done by calling the "preventDefault" method on the event object.

Next, we can define a function named "navigateTo" that takes a parameter called "pathName". Inside this function, we will use the Use Router hook to navigate to the specified path. To do this, we can call the "router.push" method and pass the "pathName" as an argument.

To complete the functionality, we need to add the "navigateTo" function to the "onClick" event of the "Departments Navigation" button. Set the "pathName" parameter to "/departments" so that when the button is clicked, it will navigate to the "departments" route.

Similarly, we can set up the "Courses Navigation" button. Add the "onClick" event and call the "navigateTo" function with the "/courses" path.

Code Example

Here is an example of the code we have discussed so far:

  • {`Home Screen`}
  • {`Departments`}
  • {`Courses`}
  • {``}
  • {``}

With this code in place, we now have two buttons that allow us to navigate to the "departments" and "courses" routes.

Conclusion

In this blog post, we covered the basics of Next.js routing using Link and Use Router. Next.js follows a page-based routing system, where all pages should be located under the "pages" folder. We explored how to create links using the Link component and how to navigate programmatically using the Use Router hook.

By understanding and utilizing these routing techniques, you can create dynamic and interactive Next.js applications. Whether you prefer the simplicity of Link or the flexibility of Use Router, Next.js provides the tools you need to create seamless navigation experiences.

Stay tuned for the next video where we will dive deeper into routing with Next.js and explore how to pass parameters in the URL.

Labels:

Comments

Post a Comment

Popular posts from this blog

Ultimate Guide to Implementing DELETE Operations in Next.js with Prisma

In this tutorial, we will learn how to delete a post in Next.js using the API and UI code. Deleting a post requires making changes to the folder structure and implementing the delete method. Let's dive in! Changing the Folder Structure Currently, the folder structure for the API is not suitable for deleting posts. We need to pass an ID to delete a specific post. To enable this functionality, we will need to alter the folder structure. Here's how: Create a new folder named "posts" within the API directory. Move the existing file into the "posts" folder. Rename the file to "index". Now, when we access the "posts" endpoint, it will work without specifying the file name. Implementing the Delete Method To delete a post, we need to create a new file in the "posts" folder and pass the I...
Post a Comment
Read more

Creating API Routes for a Full Stack Application

In this blog post, we will explore how to create API routes for a full stack application. API routes are essential for connecting the frontend components to the backend database and fetching data. We will specifically focus on creating the API routes and endpoints for making API calls and retrieving data. Setting up the Database Before we dive into creating the API routes, we need to set up the database. In this example, we will be using a local PostgreSQL database. To connect to the database, we have a schema file that defines a table called "todos" with four fields: id, name, username, and created_at. Currently, we have two records in the todos table. The next step is to write the API routes to connect to the database and fetch the data. Using Prisma for API Routing To create the API routes, we will be using the Prisma library, specifically the Prisma client. The Prisma client allows us to connect to the database and execute queries. To start with the API rout...
Post a Comment
Read more

How to use Redux in Next.js

Introduction In this blog post, we will explore how to use Redux with Next.js and create todo and disptach it to Redux store and and pass the todo (state) to a Page and display the created Todo. We will cover the process of setting up the necessary Redux store and cover the end to end flow. Create Next.js application npx create-next-app@latest Install dependencies npm install --save @reduxjs/toolkit npm install --save react-redux npm install --save redux-persist Folders and files needed Create folder lib under src folder(src/lib) Create Interface Todos under lib folder (lib/Todos.ts) export interface ITodo { todosState: [Todo] } export interface Todo { todoName: string, description: string, userName: string, id: string } Create folder store under lib (lib/store) Create fi...
Post a Comment
Read more