useId is a built-in hook that is available since React 18. The purpose of the hook is for generating unique IDs that are stable across the server and client while avoiding hydration mismatches. Important points to…

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, Ant…

This article is about using CSS modules in Next.js. Overview Next.js supports CSS modules out-of-the-box. That means you can use it without extra setups or installing any third-party libraries. CSS modules are locally-scoped, so you can…

SASS (Syntactically Awesome Style sheets) can make your life much easier when writing CSS code with variables, nesting, mixins, and other amazing features. This succinct article shows you how to use SASS in Next.js. The Steps…

This article walks you through two complete examples of using styled JSX in Next.js. The first example helps you learn the syntax of styled JSX and shows you how to use local and global styles. The…

This article walks you through a list of the best open-source icon libraries for React in 2022. They are rated and ranked based on the number of stars they receive from GitHub users and the weekly…

This article shows you how to programmatically show or hide a password in an input field in React. We’ll use modern stuff, including hooks and functional components. Everything will be built from the ground, and no…

This article shows you how to get the position of an element in React regardless of whether the element is fixed or repositionable. We’ll explore the technique to get the job done and then walk through…

This article walks you through a complete example of creating a reading progress indicator in React. We are going to write code in TypeScript and make use of modern features provided by React including hooks and…

You can extract segment data from a dynamic route in Next.js by using the useRouter hook. Let’s say the pages folder of a Next.js project has a structure as follows: Then we can access a URL…

This concise article is about passing and retrieving data with Link components in Next.js. We’ll discuss the technique (just a few words) then examine a complete example of applying that technique in practice. Overview You can…

This article shows you how to highlight the currently active link in React Router. We’ll discover the approach to do so then walk through a complete example of using this knowledge in practice. Note: We’ll use…