Working with the useId() hook in React
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…
How to use Tailwind CSS in 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, Ant…
Working with CSS Modules in Next.js
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…
How to use SASS in Next.js
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…
Using Styled JSX in Next.js: Tutorial & Examples
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…
Best open-source Icon libraries for React (2022)
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…
React: How to Show/Hide Password in an Input Field
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…
React: Get the Position (X & Y) of an Element
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…
React + TypeScript: Making a Reading Progress Indicator
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…
Next.js: Retrieve URL Params from Dynamic Routes
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…
Passing data via a Link component in Next.js
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…
React Router: How to Highlight Active Link
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…