TekLearningHub

Introduction In this blog, we will discuss the different methods available to fetch data in a Next.js application. Data fetching is a crucial part of any application, whether it involves retrieving data from a database or making API calls to a backend. Next.js provides several strategies to fetch data, each with its own advantages and use cases. Get Static Props The first method we will explore is using getStaticProps . This method is part of the client-side rendering methodology in Next.js. When we define the logic inside the getStaticProps function, it is called during the build time. The response from this API method is serialized as JSON and made available at build time. This means that when the page is rendered on the UI, it loads faster because the content is already pre-rendered on the server. This strategy is optimal for displaying static content that does not change frequently, such as a list of blog posts. Get Server Side Props The second method is getServerSideProps ...

Introduction In this blog, we will discuss the concepts of Server-Side Rendering (SSR) and Client-Side Rendering (CSR) in the context of Next.js. We will explore how to implement both SSR and CSR in a Next.js application and understand the differences between them. What is Server-Side Rendering (SSR)? Server-Side Rendering (SSR) is a process where the server generates the complete HTML page and sends it to the client. The server retrieves the required data, renders the HTML, and then sends the rendered HTML to the client. This allows search engines to crawl and index the content, improves SEO, and provides a better initial load time for users. In the context of a Next.js application, SSR is used for content that doesn't change frequently. For example, flight details like flight name, height, and capacity can be rendered on the server and sent to the client. These details are unlikely to change often, so rendering them on the server and sending them to the client reduces the o...

Client Side Rendering In Next.js, you have the option to choose between server side rendering (SSR) and client side rendering (CSR) based on your application's needs. Let's start by exploring client side rendering. Imagine a scenario where you need to display flight details such as flight number, flight name, capacity, and height. These details are unlikely to change frequently. In such cases, you can opt for client side rendering. With client side rendering, the API call to retrieve the data is made from the client side, and the data is rendered on the UI page. Why choose client side rendering for this scenario? Since the flight details are static in nature and not expected to change frequently, you can implement this logic using the getStaticProps method. This method executes at build time, pre-rendering the HTML on the server. When a user navigates to the page, the pre-rendered HTML is loaded on the client side, resulting in faster performance. ...

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

Introduction In this blog post, we will explore how to create and update records using Next.js and Prisma. We will cover the process of setting up the necessary API routes and implementing the functionality to add and edit records in a simple todo application. Setting Up API Routes To begin, we need to create the API routes that will handle the creation and updating of records. In Next.js, API routes are stored in the "pages/api" folder. We will create a file named "todos.js" to handle our todo-related operations. Inside the "todos.js" file, we will define the necessary routes for creating, updating, and deleting todos. For example, when we hit the "/api/todos" URL, it will be handled by the "index.js" file in the "todos" folder. By default, if we don't specify the method n...

Introduction In this blog post, we will discuss how to fetch and delete records using API routes in a Next.js application. API routes allow us to create, read, update, and delete data from a server using HTTP requests. We will explore how to fetch records from an API and display them on the user interface. Additionally, we will cover how to delete a specific record from the API and refresh the page to reflect the changes made. Fetching Records We built API routes to handle CRUD operations. We created a get method to return all the records, and an update method to update a record. Now, let's focus on fetching all the records from the API and displaying them on the UI. To do this, we need to use the useState hook to create a state property that will hold the list of todos. We define the state property as an array of todo objects. Ne...

Introduction In this tutorial, we will learn how to create, update, and delete records in Next.js using API routes. We will be using Prisma client to connect to the database and perform these operations. By the end of this tutorial, you will have a clear understanding of how to implement these functionalities in your Next.js applications. Setting Up the Database Connection To get started, we need to establish a connection to the database. For this tutorial, we will be using Prisma client. First, install the Prisma client by running the following command: npm install @prisma/client Next, create a new file called "prisma.js" and add the following code: rootfolder/db/index.ts const { PrismaClient } = require('@prisma/client'); const prisma = new PrismaClient(); modul...

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

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

Introduction In this blog post, we will explore the process of implementing CRUD operations using Next.js, Prisma Client, and PostgreSQL. CRUD stands for Create, Read, Update, Delete, and it refers to the basic operations that can be performed on a database. These operations are essential for any application that interacts with a database, and understanding how to implement them is crucial for web developers. Adding the Update Functionality Let's start by focusing on the update functionality. To implement this feature, we need to add an "edit" button to our application. When this button is clicked, the content will be updated based on the changes made by the user. To add the "edit" button, we will modify the existing code. Step 1: Adding the Edit Button To add the "edit" button, we will insert a new button element alongside the...

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