Working with the useId() hook in React

May 4, 2022 Pennywise

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

June 6, 2022 The Plumber

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

April 14, 2022 Pennywise

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

April 14, 2022 A Goodman

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

April 14, 2022 Pennywise

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)

April 2, 2022 Guest Contributor

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

April 2, 2022 A Goodman

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

April 1, 2022 A Goodman

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

March 20, 2022 A Goodman

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

March 4, 2022 A Goodman

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

May 21, 2022 A Goodman

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

March 4, 2022 A Goodman

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…

1 2 3 4 5 10