Next.js

This succinct article shows you how to integrate TailwindCSS in Next.js. A Quick Introduction TailwindCSS is a popular CSS framework that can help you create nice user interfaces quickly with pre-made CSS classes. Unlike MUI,......

This article will show you how to upgrade an existing Next.js project to the latest version. This will ensure that your application is secure, performs well, and is up-to-date with the latest features and functionality of the......

This article shows you a couple of different ways to extract request headers in Next.js (we will focus on Next.js 13 and use TypeScript in the upcoming examples). What are request headers? Request headers are a part of the HTTP......

The problem When working with a new version of Next.js (13.x or higher) and using the app directory instead of the traditional pages directory, you might run into the ReactServerComponentsError error. The error messages will look as......

Overview In Next.js, the getServerSideProps() function is a way to fetch data on the server side and pass it as props to your page component. It is useful for dynamic data that changes often and needs to be updated on each......

When developing web apps with Next.js, there might be cases where you want to import and use local images instead of network images, such as logos, placeholders, download buttons, background images, etc. The best place to store local......

By default, Next.js puts your pages folder in the root directory of your project. However, you can store your source code (including pages, components, CSS styles, and utility functions) in an src folder (the name src is a convention......

Overview getServerSideProps() is a Next.js asynchronous function that can be exported from a page component (in your pages folder) to fetch data at the requested time on the server side before rendering the page. It is useful for......

This short and straight-to-the-point article shows you how to read and display data from a local JSON file in Next.js. This is useful if you want to build a small web app quickly without having to code the backend or spend time setting up......

With Next.js, you can build your backend API right in the pages/api directory of your project. Suppose you want to fetch data about some fictional products from your database and send them to the client. To get a list of products, use......

React Strict Mode is a tool that runs in development mode only. It checks and highlights potential issues in your application, such as unsafe lifecycles, legacy API usage, etc. In Next.js, React Strick Mode is turned on by default for the......

There might be cases where you want to get the IP address from where the user is viewing the current page of your Next.js app (e.g., you want to serve different content for each region or just for analytics purposes). You can do so on the......