TekLearningHub

Introduction In this blog, we will explore the concept of parallel routing in Next.js. Parallel routing allows us to load multiple components into a single component, making them independent of each other. This means that even if there is a problem with one component, the other components will still be rendered and continue to work. Parallel routing is commonly used in real-time production applications to create more complex layouts and enhance user experience. In this blog, we will discuss how to implement parallel routing in Next.js and its benefits. Understanding Parallel Routing Parallel routing in Next.js allows us to load multiple components into a single component, making them independent of each other. This means that even if there is a problem with one component, the other components will still be rendered and continue to work. This is particularly useful in rea...

In the previous video, we learned about grouping routes in Next.js. Now, let's explore how we can intercept a route and render a different page by intercepting it. But first, let's understand what interception means. Creating Folders To demonstrate interception, let's start by creating two folders: "first page" and "second page". In the "first page" folder, we'll add a file called "page.tsx". Similarly, in the "second page" folder, we'll add a file called "page.tsx" as well. Routing Setup To navigate to these pages, let's add a couple of link buttons. One for the first page and another for the second page. Now, let's check if the routing is working correctly. On the main page, we should see the two links for the first and second pages. Intercepting the Route In...

Route Grouping in Web Development In this blog, we will explore the concept of route grouping in web development. Route grouping allows us to group related pages together into a specific folder and route to that folder. This helps in organizing and managing components in a project more efficiently. Creating Grouped Routes Let's start by writing the code to understand route grouping better. In the app folder, create a login folder and within that folder, create a page called page.tsx. Similarly, create a register folder and within that folder, create a page called page.tsx. These will be our login and registration pages, respectively. Now, let's add the code for the login and registration pages. In the login page, we can display a simple login form, while in the registration page, we can display a form for user registration. We can also add so...

In this blog, we will explore the concept of not found pages and route grouping in Next.js. When users navigate through our application, there may be instances where they land on a page that doesn't exist or enter a random path. By default, Next.js provides a built-in 404 page for these scenarios. However, we can also create our own custom not found page to provide a more meaningful experience for our users. Creating a Custom Not Found Page Next.js follows a specific file naming structure for its application. To create a custom not found page, we need to create a file named "not-found.tsx" in the "app" folder. This file should adhere to the specified naming pattern to work properly. Let's dive into the steps: Step 1: File Structure First, navigate to the "app" folder and create a new file named "not-found.tsx". This ...

In the previous session, we discussed different levels of routing in Next.js. Now, let's dive into how we can access route parameters in a component. Understanding Route Parameters When a user clicks on a specific department and enters a department ID, we need to retrieve that ID inside the component. Currently, the parameters are empty, so we need to find a way to access this specific parameter. Let's see how we can do that. Department ID Suppose we are currently on the "departments" page and want to access the department ID. The URL structure looks like this: /departments /department-id /index To access the department ID inside the component, we can use the Next.js router. First, import the router: import { useRouter } from 'next/router'; The router will allow us to access the ...

Welcome back to Part Two of our NextJS navigation tutorial! In the previous video, we explored straightforward navigation using the link button and router in NextJS. However, we discovered that when it comes to scenarios where we need to pass additional parameters, such as a department number or a course number, the current page routing method falls short. In this blog post, we will delve into how to create multi-level routes using NextJS. Folder Structure The first step in creating multi-level routes is to restructure our folder organization. We need to create a folder for departments and another folder for courses. Within the departments folder, we will create a subfolder for each department ID. Similarly, within the courses folder, we will create a subfolder for each course ID. This new folder structure will allow us to create nested routes and access specific department ...

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. Course...