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…

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…

How to Correctly Use Bootstrap 5 in Next.js

September 10, 2022 A Goodman

This article shows you how to correctly use Bootstrap 5 in a Next.js project. By the end of this article, we will be able to: Use all CSS classes provided by Bootstrap 5 whereever you want….

Next.js: Parsing Query String Parameters

September 10, 2022 A Goodman

In Next.js, you can get the query string parameters of a URL by using the useRouter hook, like this: For more completeness and clarity, see the example below. Example Let’s say you have a products page…

Next.js: Disable Server-Side Rendering on Specific Pages

September 10, 2022 A Goodman

There may be cases where you want to disable server-side rendering (SSR) on one or some specific pages of your Next.js application, such as you get some warnings or errors when using a third-party library due…

How to programmatically navigate in Next.js

January 21, 2022 A Goodman

Next.js is a fast-growing React framework that can help us build high-performance hybrid static and server-side rendering web applications. Many projects have been transitioning from traditional React SPAs to Next.js, including giants like Github, IGN, Hulu,…

Next.js: 404 error page and 404 error code

March 19, 2022 A Goodman

In this article, we will take a look at how to handle the 404 error and create a custom not found page in Next.js Overview The 404 error tells us that the browser was able to…

How to use Ant Design in a Next.js project

March 19, 2022 A Goodman

Next.js is a React framework that is used to build fast, high-performance, hybrid static and server-side rendering web applications. Ant Design is a UI library that provides a lot of pre-made React components like Button, DatePicker,…

How to use Font Awesome with Next.js

January 26, 2022 Napoleon

The example below shows you how to use Font Awesome 5 with Next.js. 1. Create a new Next.js project then install the required packages: 2. Edit the page/_app.js file (create one if it doesn’t exist): Note…

1 2 3