Techomoro

This article will discuss the steps for creating a React Native counter app using Expo. Expo makes the process of creating React Native apps more effortless. Prerequisites I assume that the reader has a fundamental knowledge of the following aspects: React and React Native Concepts Installing Android Studio and setting up an Android Emulator If you intend to build an iOS app, install Xcode…

We already have an article titled “Multi-Language Next.Js 12 Website Using I18next – RTL Support” that explains how to create a multi-language website with the help of Next.js 12 page router and i18next – RTL support. However, this article will discuss how to create a multi-language website using Next.js 14 App Router and i18next with RTL Support. Prerequisites I assume that the reader has a…

In this article, we will be discussing how to create a blog by connecting Strapi CMS and Next.js 14 using App Router with GraphQL support and TypeScript. The latest version of Next.js 14 offers a plethora of new features and changes as compared to its older versions, with one of the major changes being the App Router. Similarly, Strapi 4 also comes with distinct changes. Prerequisites I…

Multi-Language in a Next.js Website using i18next – RTL Support

Internationalization is an important factor if our website is targeting a global audience. People love to interact with a website in their own local language. Here, we will discuss the steps to implement multi-language in a Next.js website using the i18next. We will also cover the Right To Left / RTL support. Prerequisites I believe that the reader has a basic understanding of the following…

How to Add Google reCAPTCHA v3 in a Next.js Form

In most cases of web development, we have to implement forms. At the same time as implementing a form on a website, we have to be aware that bots can send fraud and abused content. Captchas are one of the best options to prevent this. Here in this article, we will discuss the steps to implement Google reCAPTCHA v3 in a Next.js form. Prerequisites I believe that the reader already has a basic…

Implement Push Notification in Next.js with Firebase Cloud Messaging

Push notification is one of the easiest ways to send offers, alerts, etc. directly to the user’s device or browser. We will discuss the steps to implement push notifications in a Next.js app with Firebase Cloud Messaging (FCM). Prerequisites I believe that the reader already has a basic understanding of the following things:- To create apps with the Next.js framework.The basic working of push…

Connect Multiple Git Repositories for a Single Project

Using Git is really important when working on a project. In some cases, we may need multiple git repositories for a single project. Yes, we can give access to multiple users to a single repository but what if you are not permitted to do so? Here in this article, we will discuss the steps to connect multiple Git repositories for a single project. Prerequisites Before starting this article, I…

If we are using getServerSideProps in Next.js for data fetching, it will call all the APIs for a single page including the header and footer APIs. But in most cases, we only need to call the header and footer APIs once when are loading the app for the first time. So here in this article, we are discussing a way to make header and footer APIs load once in a Next.js app with…

How to Set Up the 301 Redirect in a Next.js App

When switching from an old website URL to a new one, 301 redirection is necessary. Here in this article, we will set up a 301 redirect in a Next.js app. In React, we need to use third-party packages for redirection. Because Next.js is a framework, it is pre-bundled with the redirection feature. Let us see a basic example of a 301 redirect. In my blog Techomoro, I have enabled a 301 redirection…

Generate Sitemap for Static and Dynamic Pages in a Next.js App

I have already created an article, How To Add An XML Sitemap In A Next.Js App. Then what is the importance of this article? In that article, I explained the method of adding an XML sitemap manually just for static pages in our Next.js app. But here in this article, we will discuss the method to generate a sitemap for static and dynamic pages in Next.js. Prerequisites Before continuing this…

Deploy a Next.js App with Private Dependencies in Vercel: A Simple Hack

In some projects, we use private dependencies. This makes will make our code clean and also protected. But when coming to hosting it, some providers will limit it. Here, we will discuss a simple hack to deploy a Next.js app with private dependencies in Vercel. The support team itself provides a for using private dependencies in Vercel. The link is given below. How do I use private dependencies…

Multi Zones: Combine Multiple Next.js Apps

When developing a big web project, we need a team. But when it’s a huge one, we can split the project into many and assign it to multiple teams. We can run each project separately and even host them on different servers. This gives teams more control over a huge project. Here we will discuss the Multi Zones, the Next.js way to combine multiple apps. Prerequisites Before continuing this article,…

The Simplest Portfolio Website with Next.js and Make it Live

I have set up a new portfolio website for myself. I am believing in simplicity and you could feel it while browsing through my portfolio website. Here in this article, I am sharing the steps to create the simplest portfolio website with Next.js and make it live. My portfolio website The below link will direct you to my personal portfolio website:- https://syam.me I have used the Next.js…

Create a Multi-Step Form with React and Recoil

We could see multiple steps when filling a form or signing up on a lot of websites. Here, we will discuss the steps to create a multi-step form with React and Recoil state-management tool. Prerequisites Before continuing this article, I assume that the reader has a basic understanding of the following technologies:- Basics of React.jsRecoil state management tool.Using Recoil state management…

Submit a Form Data to REST API in a React App

Sometimes we might need to submit form data to a REST API in a web app. This is a simple article that explains the steps to submit form data to REST API in a React app. Prerequisites Before continuing this article, you must learn the following technologies:- HTMLJavaScript ES6React.js basics What we will learn In this article, we will learn to code a form in a React app. The form accepts…

Use Recoil State Management Tool in a Next.js App

We have already discussed how to use the recoil state management tool in a Nex.js app. It also covers the basics of the Recoil state management library. I strongly recommend referring to the article before continuing. Here we will discuss the steps to use the Recoil state management tool in a Next.js app. Prerequisites To follow this article, the reader should be aware of the following…

Connect MongoDB Atlas with MongoDB Compass

If your app is using MongoDB, MongoDB Atlas is the best method to host it. We can easily deploy a database and manage it in MongoDB Atlas. It provides a versatile tool MongoDB Compass to interact with the DB using GUI. Here we will discuss the steps to connect MongoDB Atlas with MongoDB Compass. Prerequisites Before continuing this article, I assume that the reader has basic knowledge in…