DEV Community: Tonmoy Roy

Let's learn about Next.js API routes shortly

Tonmoy Roy — Fri, 25 Feb 2022 13:31:09 +0000

Need a backend / API for your project? No problem.

Next.js is a wonderful production-ready framework built on the JavaScript library React. It's extremely flexible letting us build simple static sites, server-side rendered apps, or a mix of both. One of the cool features of Next.js is how it handles the routing system.
Routes can simply be created by adding a file into the /pages folder that is created for you when you bootstrap an app with create-next-app. Inside of here there is another folder called api. When you create a file inside of an api it will be accessible at the route /api/.... But you won't be served with a page this time.
This is an API endpoint belonging to the server-side of your app and is intended to return data, not pages. Here we can write backend code using Node.js if we desire.

*Why should we use the /api routes
*
A nice way of thinking about a Next.js API route is as a middle-man for your app. Time for an analogy! 😃
Consider a person called John who wants to send a letter to his friend Jane. Once Jane receives the letter she will send a reply back to John. But how do the letters get from one place to another? The Postman/Postwoman of course!
The Postman/Postwoman acts as the middleman. This person handles the logic of transporting the letters where they need to be and this is kind of what we do with Next.js API routes. Often we make a request to an API route with some data. This is like posting your mail into the letterbox.
Then behind the scenes, the post will go through things like sorting and manipulation before being sent to the other end (like an external API). When the person receives and replies to the letter, eventually the original sender will open the reply (response).

Short Note on CRUD Operations of MongoDB…

Tonmoy Roy — Fri, 24 Dec 2021 17:15:45 +0000

MongoDB CRUD Operations

CRUD operations create, read, update, and delete documents in MongoDB.

Create Operations
Create or insert operations add new documents to a collection in the database. If the collection does not currently exist in the database, then insert operations will create the collection.

MongoDB provides the following methods to insert documents into a collection:

db.collection.insertOne()
db.collection.insertMany() Here, insert operations target a single collection.

Read Operations
Read operations retrieve documents from a collection in the database.

MongoDB provides the following methods to read documents from a collection:

db.collection.find() We can specify query filters or any criteria that identify the documents to return.

Update Operations
Update operations modify existing documents in a collection of the database.

MongoDB provides the following methods to update documents of a collection:

db.collection.updateOne()
db.collection.updateMany()
db.collection.replaceOne() Here, update operations target a single collection. We can also specify any criteria, or filters, that identify the documents to update.

Delete Operations
Delete operations remove documents from a collection in the database.

MongoDB provides the following methods to delete documents of a collection:

db.collection.deleteOne()
db.collection.deleteMany() Here, delete operations target a single collection. We can specify any criteria, or filters, that identify the documents to remove.

Short Note of React

Tonmoy Roy — Wed, 22 Dec 2021 17:49:56 +0000

React Js
React is an open-source JavaScript library which is used for building user interfaces based on UI components specifically for single-page applications.

Some advantages of React are:

It is easy to learn.
A virtual DOM is used in React.
There are reusable components.
It operates on a one-way data flow.
SEO friendliness.

JSX
JSX is a JavaScript Extension Syntax which is used in React to easily write HTML and JavaScript together. It allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() or appendChild() methods.
JSX converts HTML tags into react elements. It is faster than regular JavaScript.

Virtual DOM
Virtual DOM is a light-weight abstraction of the real DOM. A virtual DOM object has the same properties as a real DOM. Manipulating the virtual DOM is much faster than the real DOM.
In React, once the virtual DOM has been updated, it compares the current version of the virtual DOM with the previous version of the virtual DOM. This process is called “diffing” and the diff algorithm does that process in react. So, once React knows which virtual DOM objects have changed, then React updates only those objects, in the real DOM.