“Knowledge is power.” – Francis Bacon

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

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