Blogs

Tools

Quick Links

Mridul.tech

Blogs in Next JS category

How to add Google Web Stories in Next JS

How to add Google Web Stories in Next JS

Dec 14, 2023

·

10 Min Read

In the fast-paced digital world, user engagement is key to the success of any website. One effective way to captivate your audience is by incorporating Google Web Stories into your Next JS website. These visually appealing and interactive stories can make your content more engaging and shareable. In this comprehensive guide, we’ll walk you through […]

Read More

How to send Emails in Next JS for Free using Resend

How to send Emails in Next JS for Free using Resend

Nov 10, 2023

·

7 Min Read

Sending emails in web applications is a crucial feature, and in this article, we will explore how to send Emails in Next JS for free using Resend. Next JS is a popular framework for building React applications, and Resend is a handy tool for email integration. By the end of this guide, you’ll have the […]

Read More

How to add Google Login in Next.js with Appwrite

How to add Google Login in Next.js with Appwrite

Nov 01, 2023

·

7 Min Read

Are you looking to enhance user authentication in your Next.js application? Integrating Social Login with Appwrite can be a game-changer. Add Google Login to your Next.js app with Appwrite. This article will guide you through the process, and practical tips to add Google Login in Next.js with Appwrite. GitHub Code: Google Login in Next.js with […]

Read More

How to add Protected Routes in Next JS

How to add Protected Routes in Next JS

Oct 28, 2023

·

5 Min Read

In the world of web development, security is paramount. Whether you are building a simple blog or a complex web application, protecting certain routes and pages from unauthorized access is a crucial step. In this comprehensive guide, we will walk you through the process of adding protected routes in Next JS, ensuring that your web […]

Read More

How to run localhost 3000 on https in Next JS

How to run localhost 3000 on https in Next JS

Oct 20, 2023

·

2 Min Read

In the ever-evolving world of web development, having a secure local development environment is crucial. If you’re working with Next.js and need to run localhost on HTTPS with port 3000, you’re in the right place. In this comprehensive guide, we will walk you through the process step by step, ensuring you have a secure and […]

Read More

How to Generate robots.txt in Next JS?

How to Generate robots.txt in Next JS?

Oct 05, 2023

·

4 Min Read

In the world of web development and search engine optimization (SEO), ensuring that your website is easily accessible and properly indexed by search engines is paramount. One essential tool that aids in this process is the creation of a robots.txt file. In this comprehensive guide, we, the experts, will walk you through the process of […]

Read More

How to Generate Sitemap in Next JS?

How to Generate Sitemap in Next JS?

Sep 28, 2023

·

8 Min Read

In today’s digital landscape, optimizing your website’s SEO is crucial to attracting more organic traffic and ranking higher on search engine result pages (SERPs). One essential aspect of SEO is creating a sitemap, which helps search engines crawl and index your website efficiently. If you’re using Next JS for your website development, this guide will […]

Read More

How to Build PWA with Next JS?

How to Build PWA with Next JS?

Aug 19, 2023

·

5 Min Read

Progressive Web Apps (PWAs) have taken the web development world by storm, providing users with fast, reliable, and engaging web experiences. Among the various frameworks available for building PWAs, Next JS stands out as a popular choice due to its simplicity and flexibility. In this guide, we will explore the process of building a PWA […]

Read More

How to create a URL Shortener with Next JS and Sanity

How to create a URL Shortener with Next JS and Sanity

Jul 17, 2023

·

7 Min Read

In today’s fast-paced digital world, URL shorteners have become essential tools for simplifying and sharing links. They provide concise and memorable URLs that are easier to manage and share across various platforms. If you’re looking to create your own URL shortener using Next JS and Sanity, you’re in the right place. This article will guide […]

Read More

How to Use SVG in Next JS?

How to Use SVG in Next JS?

Jun 11, 2023

·

5 Min Read

SVG (Scalable Vector Graphics) is a powerful image format that allows for high-quality graphics and animations on the web. When used in conjunction with Next JS, a popular React framework for building web applications, SVG can enhance the visual appeal and interactivity of your projects. In this article, we’ll explore how you can effectively use […]

Read More

Next JS Project Ideas to Boost Your Portfolio

Next JS Project Ideas to Boost Your Portfolio

May 28, 2023

·

8 Min Read

Next.js has gained popularity among web developers due to its powerful features and seamless integration with React. In this article, we will explore various Next.js project ideas to Boost Your Portfolio and enhance your web development skills. Whether you are a beginner or an experienced developer, these project ideas will inspire you to create amazing […]

Read More

How to add Google AdSense in Next JS

How to add Google AdSense in Next JS

Mar 24, 2023

·

7 Min Read

The traditional Google AdSense installation is not compatible with the websites created using Next JS. Next JS’s conventional Adsense implementation is sometimes successful but isn’t always. And there is no official way to implement Google Adsense in Next JS. In this article, you will learn How to add Google AdSense in Next JS. After reading […]

Read More

Next JS vs React: Which One Should You Choose?

Next JS vs React: Which One Should You Choose?

Mar 06, 2023

·

5 Min Read

When it comes to building web applications, React is one of the most popular frameworks out there. But with the emergence of Next JS, many developers are left wondering which one they should choose. In this article, we’ll see Next JS vs React to help you decide which one is best for your project. Next […]

Read More

Next JS Typescript: Everything You Need to Know

Next JS Typescript: Everything You Need to Know

Mar 05, 2023

·

6 Min Read

Combining Next JS and Typescript allows developers to build powerful and scalable web applications that are easy to maintain and evolve. In this article, we will explore the benefits of using Next JS with Typescript and how to get started with this powerful combination. Next.js is a popular React-based framework that makes it easy to […]

Read More

How to Deploy Next JS with Environment Variables

How to Deploy Next JS with Environment Variables

Feb 27, 2023

·

4 Min Read

In the previous article, we discussed how to use environment variables in Next JS. But that was in the local environment. But when we deploy our app then how we can add the env variables and also make them private? So in this article, we are going to learn Deploy Next JS with Environment Variables […]

Read More

How to use Next js Environment Variables

How to use Next js Environment Variables

Feb 24, 2023

·

3 Min Read

We use a variety of services in our application while constructing projects. In the case of APIs, several technologies employ tokens or API keys to grant authorised users access to endpoints. These API keys are confidential and cannot be disclosed to anybody online. While deploying the code, we hide the key using an environment variable. […]

Read More

How to Add Google Analytics in NextJS

How to Add Google Analytics in NextJS

Feb 18, 2023

·

3 Min Read

The most valuable commodity in the world right now is data. Therefore, if you want to grow your business, you must understand how your people are utilising your platform. And in the world of analytics, Google Analytics is the most used tool and it’s completely free to use. In this article, we are going to […]

Read More

How to add Next JS Redirect

How to add Next JS Redirect

Feb 10, 2023

·

3 Min Read

Redirects are one of the essential features of a web app. With redirects, you can redirect a user to the login page if the user is not logged in. You can add a redirect from the old URL to your new URL. There are so many ways you can use the redirect. In this article, […]

Read More

How to use GitHub GraphQL API in React or Next JS

How to use GitHub GraphQL API in React or Next JS

Jan 24, 2023

·

8 Min Read

An application programming interface (API) is the easiest way for applications to communicate with each other. And with the help of API, we can make out own UI with the help of existing data available on the internet. There are two major types of API available – REST API and GraphQL API. GitHub has also […]

Read More

How to Generate ZIP with File Links in Next JS and React JS

How to Generate ZIP with File Links in Next JS and React JS

Jan 22, 2023

·

5 Min Read

How to Generate ZIP with file links after API call and download the ZIP file on the client side React JS and Next JS

Read More

How to use both Tailwind and Styled Components in Next JS

How to use both Tailwind and Styled Components in Next JS

Jan 20, 2023

·

5 Min Read

Styling is important in every website but it is equally difficult to add CSS with just .css files. And when you’re using Next JS then you have so many options to choose from. But they are not easy to set up. Next JS supports CSS modules by default but CSS modules are not that interesting […]

Read More

How to Highlight Code Syntax in Next JS

How to Highlight Code Syntax in Next JS

Jan 15, 2023

·

4 Min Read

This is how you can Highlight Code Syntax in Next JS in SSR with Highlight.js with lots of code themes in both light and dark mode.

Read More

How to handle Cookie Consent in Next JS

How to handle Cookie Consent in Next JS

Jan 13, 2023

·

4 Min Read

A guide on How to Handle Cookie Consent in Next JS and React JS Applications with all customizable props and actions.

Read More

Get Started with Next JS On-demand Revalidation

Get Started with Next JS On-demand Revalidation

Jul 12, 2022

·

1 Min Read

Recently Next JS introduced On-demand Revalidation. On v12.2.0 Next.js supports On-Demand Incremental Static Regeneration to manually purge the Next.js cache for a specific page. Now you can update your site in the following cases. To test this we need to disable cache in apollo-link or apollo-client. In the defeultOptions, fetchPolicy as no-cache avoids using the […]

Read More

How to use SCSS with Tailwind in Next JS

How to use SCSS with Tailwind in Next JS

Jul 10, 2022

·

1 Min Read

Tailwind is a utility-first CSS framework packed with classes. It’s easy to use and can be composed to build any design, directly in your markup. Tailwind can be used in any framework like React JS, Next JS and even Vanilla JS. We are going to use SCSS with Tailwind in Next JS. This is A […]

Read More

Save Form data in Google Sheets with Next JS

Save Form data in Google Sheets with Next JS

Jul 10, 2022

·

6 Min Read

In this post, we are going to make a simple contact form with Next JS and save Form data in Google Sheets. This form will have four files – Full Name, Email, Topic & Description. Also Read: Next JS Project Ideas to Boost Your Portfolio App Register for Google Sheet Here are the detailed step-by-step […]

Read More

Do you want more articles on React, Next.js, Tailwind CSS, and JavaScript?

Subscribe to my newsletter to receive articles straight in your inbox.

If you like my work and want to support me, consider buying me a coffee.

Buy Me A Coffee

Contact Me ☎️

Discuss A Project Or Just Want To Say Hi?
My Inbox Is Open For All.

Mail : contact@mridul.tech

Connect with me on Social Media

Contact Art