Next.js Tutorials

Generally, we use something like this to create metadata in Next.js: And it works very well, as we can see below: But if you observe the source code, you can see one other that is by default defined by Next.js by root layout: The same goes for descriptions and other tags: Having duplicate metadata tags […]

Next.js comes with many new updates and one of them is the way to store static files. In this article, we will see what static files are, where they should be stored, and how to render and access images, fonts, JSON, and other files for better performance in Next.js. So let’s get started. Check out

Tailwind CSS is a framework that helps us to create modern responsive websites without writing custom CSS code. It has a collection of predefined classes that we can use directly in our HTML code to style the elements. Tailwind CSS is a utility-first CSS framework. Utility-first means it has a set of small reusable utility

Now that we have covered all the basic topics of Next.js in our series, it’s time to learn how to style our Next.js application. Learning how to style a Next.js application is a part of front-end development that cannot be skipped. In Next.js we can do styling in different ways: Global CSS, CSS Modules, Tailwind

In React, if we want to fetch data then it is not straightforward. First, the component is rendered without any data then useEffect is triggered to fetch data and then fetched data gets stored in the component’s state using useState and finally the component is re-rendered with the fetched data. This creates a little delay

In Next.js, we can use file-based routing to create routes. Any folder inside the app directory with a page file will act as a route and when a user requests a route, its page file is rendered as a response. So suppose you have a folder named “users” inside the app directory with a page.tsx

Suppose you are creating a Next.js application and want the same components like header and footer on all your pages then you can add layout to make this happen. Let’s understand what it is and how to add it to a Next.js application in detail. Prerequisites Understanding Pages and Layouts In a Next.js application in

In our previous tutorial, we learned how to create different routes using App Router. But when it comes to dynamic routing, the question is how to implement it in file-based routing where file names are used to create routes and since it is fixed, how can we create dynamic routes? Well, don’t worry the solution

In our previous tutorial, we learned how to create different pages in Next.js using file-based routing but to switch between pages we changed the URL manually. Like for the Home page we entered http://localhost:3000/, for the About Us page we entered http://localhost:3000/about but how to navigate between pages directly? Well here comes the Link component

Before Next.js 13, routing was based on the “pages” directory, where each file inside it was considered a route. For example, a file named “pages/about.js” will create a route “/about” containing the content returned by about.js. This approach was created to remove the need to create routes manually, but as applications grow, the “pages” directory