Next.js Tutorials

If you are jumping directly into Next.js, it can be difficult. Next.js is built on top of React, and to build an application using it, you must know React.js key concepts and fundamentals. Even if you have a basic understanding of React, this guide helps you to summarize them. We will cover all React concepts […]

If you want to know how to add transitions when navigating between pages or routes, this guide is for you. In this article, we will see how to add page transitions in the App router in the simplest way possible. We will be taking help from a very popular open-source motion library named Framer Motion.

Next.js provides a command line interface using which we can save our time spent in building and configuring a Next.js app. These include commands to start a local development server, change the default port, run ESLint, generate static HTML files and much more. Let’s start exploring these commands to increase our productivity! Ready to deploy

In our first tutorial of this Next.js series: Next.js Introduction, we gave a small context of “Next.js vs React,” which was that React is a JavaScript framework for creating client-side user interfaces using component-based architecture whereas Next.js is a framework built on top of React, expanding its functionality by adding features like server-side rendering, static

This is a special Next.js guide in which we will introduce you to Node.js and learn how to connect a Next.js app to a Node.js server running on a different port. We will initialize a Next.js app and create a Node.js server that returns random quotes, then connect them and try to access quotes from

In our series on Next.js, we have covered almost all the basics and even explained how to optimise a Next.js app for production. Now the ultimate question is how to deploy it and make it live. Well, just like Next.js made everything easy, it also provides a very simple way to deploy the app using

The variables present outside of the context of a program are called environment variables. Environment variables are mainly used for storing sensitive information like API keys, database credentials, configuration settings, or other information that can’t be shown to the public. Besides these, they also help us to configure applications based on the environment (development, production,

Are you tired of writing HTML in JSX or TSX components while building a Next.js app? Well, we are too. So here is a solution: Markdown and MDX, which allows us to use some simple characters to generate valid HTML code. Let’s see what they are and how to use them in detail. Previously, we

Have you ever thought of creating a static website from your Next.js application? Yes, one of the coolest features of Next.js is the ability to export HTML/CSS/JS together and they work exactly the same as in the Next.js app and can be deployed to any static hosting service. Well, let’s see in detail how it

At this point, we have covered a lot of topics in our Next.js series that are enough to help you build your own very first Next.js app. But wait! Once you have built your next.js app and hosted it, you want to get a lot of views. To get views, your application must be highly