Next Js and Mailchimp Integration – Each Detail You Need to Know!

In this detailed Next.js tutorial, you will learn step by step process on how to integrate the Mailchimp Email collection form in the Next js application.

We will cover each and every step starting from setting up the Mailchimp account and creating an email list and audience to how to create an email collecting form in the Next js application to add that data to your Mailchimp account.

Read more

Next.js – How to Play HTML Video with Custom Controls?

In this tutorial, we will show you how to play an HTML video on a Next.js application. Along with this, we will also discuss how to add various video controls like Play/Pause, Full-screen playback, and Speed control of video in the Next Js application.

Video playback is a very common feature in many web applications. Video playback features may be required by applications like e-commerce, gallery sites, enterprise demo videos etc.

In Nextjs application, we can easily play videos using the HTML video element. This element provides built-in support for playing video files and allows to customize of the appearance and behaviour of the video player using CSS and JavaScript.

Read more

Firebase Authentication in Next JS using Email/ Password – Tutorial with Example Application

In this Nextjs tutorial, you will learn how to connect Firebase authentication in the Next js application to log in or register the users with email and password.

We will get into details including how to create a new Firebase app, enable authentication and get the configuration file. After that, we will create a new Nextjs app and install the required library to seamlessly integrate Firebase authentication.

Our application will have Login and Registration components and a user profile page. The login and Registration component will display server responses in the form of an alert box to intimate users about success or errors.

Read more

Next.js Query Parameters: How to Set and Get URL parameters

In this article, you will learn how to set and get URL query parameters in URL of the Next js application. Also we will discuss how to update the Next js application URL without adding to the history stack of links in the browser.

We will thoroughly cover the various use cases related to the URL parameters in the Next js application for example how to set and get URL parameters, update the URL without a history link, and use dynamic query parameters.

Read more

Next.js URL Parameters: Get and Set URL Params with Examples

This article will guide you on how to work with URL query parameters in Next.js. How to set and get URL parameters, also how to update the URL without a history link, and dealing with dynamic query parameters.

In dynamic applications, we may require to handle the query parameters in the URL. In this tutorial, you will learn how to fetch the URL param values and also how to set them dynamically.

Read more

Next Js NProgress – Add Global Loading Bar Tutorial with Examples

In this Next js tutorial, you will learn how to add a global loading bar in the Next js application using the NProgress module for showing a progress bar to indicate any asynchronous job.

Showing the loader progress bar is a very important element in UI to indicate user if any process is going on and will complete in a definite period.

In front-end applications, which are mostly data-driven and data is fetched from a remote server its always a good practice to show a loader progress bar to the user. In the Next Js application, you can easily implement a progress horizontal loading bar using the NProgress package module.

Read more

Using MUI with Next.js with Examples

In this article, you will learn how to use MUI or Material UI components in the Next js application with examples including Buttons, Cards, Forms having Form fields with Radio lists, Datatables, Dialog boxes etc.

MUI aka Material UI is a popular React component library that provides Google’s Material UI design. MUI provides a number of accessible, responsive and customizable components which can be easily used to build our application’s UI.

Read more

Next.js: Calling Internal APIs, Fetch Data with Examples

In this article, we will discuss how to call internal APIs in the Next JS application. We will create new internal APIs, define routes, fetch data and test by using the Jest and supertest tools.

We will discuss how to make internal API calls using the getStaticProps or getServerSideProps hooks inside the component/page. Most importantly we will also discuss handling errors while making the API calls and how to prevent re-rendering when calling the API route from a page.

Read more

Next.js Interview: Top 50 Questions and Answers 2023

In this fast-moving web development field, it’s very important to stay updated and ahead. Next.js is one such technology which is gaining much attention in this era and revolves around the vast ecosystem of React. Next.js is a powerful Javascript-based framework which is built over React. The main catch is it comprises of powerful server-side … Read more

Next.js Rewrites: Optimizing Your Routing

In web development, speed and efficiency play a key role. Routing is one such area which is important to focus, which enables users to navigate from one page to another. Outof many tools in Next js we have rewrites. In this article, we will discuss in details about rewrites in Next js, what actually they and why they are important to manage effectively to supercharge the application.

Read more

Facebook & Google Login Auth in Next.js Application Using NextAuth

In web applications, social logins are becoming common and popular these days. It makes the process of signing up or login the web application by using social logins like Facebook and Google seamless and easy.

Social login enables users to authenticate by using their Google or Facebook profiles. This process also eliminates the need to remember credential details like username and password.

In this guide, we will discuss the process of integrating Facebook and Google authentication or sign process in the Next js application. We will deploy NextAuth.js which is a popular and open-source library for authentication integration in the Next js application.

Read more