TekLearningHub

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

Introduction Flexbox is an important CSS feature that every UI developer should know. It allows us to align and arrange HTML elements on a web page in a specific order. By using flexbox, we can easily control the positioning of our content and create a more user-friendly experience. In this blog, we will explore the key concepts of flexbox and learn how to apply it to our CSS code. The Basics of Flexbox Flexbox consists of two main components: the flex container and the flex items. The flex container is the parent element, and any HTML elements inside it become flex items. The CSS properties that we apply to the flex container will also be applied to its flex items. This makes it easy to manipulate the layout and alignment of multiple elements at once. Getting Started with Flexbox To start using flexbox, we need to define a flex container. We can do this by applying the CSS class "container" to the parent element. This class can have any name, but it is conventionally ...

Introduction In this tutorial, we will discuss different ways in which you can apply CSS to specific HTML elements. There are three main methods: using a class, using an ID, and using inline styles. Let's explore each of these methods in detail. Using a Class Applying CSS using a class is the most recommended way as it allows for reusability. When you create a class, you can apply it to multiple HTML elements across different pages. It provides a convenient way to style elements consistently throughout your website. To apply CSS using a class, you need to create a class name and add a dot (.) before the class name. You can then apply the CSS properties and values to the class. For example, let's say we have a class called "heading" and we want to change the color to aqua. We can define the class in our CSS file and apply it to the desired HTML element using the class attribute. .heading { color: aqua; } By adding the class "heading...

Introduction In this blog post, we will discuss the basics of CSS and specifically focus on understanding the Box Model. Whether you are a beginner looking to learn CSS for the first time or a seasoned developer looking for a refresher, this tutorial will provide you with a solid foundation in CSS. What is the Box Model? The Box Model is a fundamental concept in CSS. It refers to the way in which HTML components are rendered on a web page. Each HTML component, such as a div, has properties like height, width, border, padding, and margin. When these properties are combined, they create the Box Model. Creating a Box Model To better understand the Box Model, let's create a simple example. Open your preferred code editor, such as Visual Studio Code, and create an HTML file. Inside the file, create a div element with a class name of "box-model" and add some content. <div class="box-model"> Box Model </div> Next, let's add some CSS to styl...

Introduction In this blog, we will discuss the various concepts of Angular in detail. Angular is a JavaScript framework developed by Google and it offers many powerful features for web development. Some of the key features of Angular include two-way data binding, directives, and services. The Role of Angular in Manipulating the Browser DOM Before diving into the concepts of Angular, it's important to understand how Angular manipulates the browser DOM (Document Object Model). When a web application is rendered onto the browser, it creates a tree structure known as the DOM. However, modern browsers only understand JavaScript, not TypeScript. Therefore, when an Angular application is rendered, the TypeScript code is converted into JavaScript and then rendered onto the browser. Components in Angular Components are the building blocks of an Angular application. A single Angular application can have one or more components rendered onto the browser page. For example, let's cons...

Introduction In this blog, we will discuss all the important concepts of the React framework. React is a JavaScript library that allows for the efficient rendering of user interfaces. It was developed by Facebook and has gained popularity due to its performance and ease of use. React can be used as a standalone library, but it also supports the use of additional libraries like React Router and Redux for state management. In this blog, we will explore the key features of React, including its virtual DOM, components, data sharing techniques, hooks, routing, and making API calls. Let's dive in! React's Major Features React has several key features that set it apart from other frameworks: Virtual DOM: React utilizes a virtual DOM, which is a lightweight copy of the actual browser DOM. This allows React to efficiently update and render components without directly manipulating the browser DOM, resulting in improved performance. Components: React follows a component-based arch...

Introduction In this blog, we will discuss React Hooks in detail. React Hooks were introduced in React version 16.8 and they allow developers to use React features without writing a class. Before React 16.8, developers used to write classes for their components, but with React Hooks, everything is function-based. In this blog, we will dive into understanding all the different React Hooks. React Hooks React Hooks are applied to components in a web page. A web page consists of one or more components working together to run and display content on a web browser. During the creation of a component, React Hooks and React lifecycle methods are executed in a specific order. useState The first React Hook we will discuss is useState. useState is used to hold a specific value, whether it's an integer, a message, or an array of objects. It allows you to set and update the state of a component. For example, you can use useState to display a banner message on a web page. The useState hook...

Understanding NextJS Rendering What is Rendering? Rendering is the process of converting code into a usable and visual format of a user interface, also known as a web page. NextJS supports both client-side rendering and server-side rendering, each with its own use cases. Client Components in NextJS By default, all components in NextJS are server-side components. To make a component a client component, you need to use the useClient directive within the component itself. Client components are web pages that are pre-rendered on the server during the build time and directly served to the user's web browser when they request it. Once a client component is rendered on the browser, subsequent requests to that specific page will not go to the server again. This makes client components faster and more efficient. Server Components in NextJS By default, NextJS components are server-side components unless you use the useClient directive. There...

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

React Hooks: useEffect() is called twice Next.js and React In this blog post, we will explore how to fix problem with useeffect() hook called twice during the Page load in next.js. Code "use client" import { useEffect, useState } from "react"; export default function Home() { const [products, setProducts]=useState([]); useEffect(() => { fetch("https://dummyjson.com/products") .then(response => response.json()) .then(data => setProducts(data.products)) },[]) return ( ); } Refresh the page and check network tab. Fetch/XHR Solution Go to next.config.mjs and add reactStrictMode: false Refresh the page and check network tab. Fetch/XHR Conclusion In this blog post, we learned how to fix the useEffect() hook calling twice during page load in Next.js application. Comment on this Post if you ha...

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