Next.js API Routes: How to Get Parameters & Query String

June 2, 2022 Pennywise

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 fiction products from your database and send them to the client. To…

Next.js: How to set HTML lang attribute

May 30, 2022 Pennywise

When building a web application, you can set the lang attribute of the <html> tag to explicitly declare the language used on your pages: Note: The language code used here is ISO 639-1 and you can…

Next.js: How to Disable/Enable React Strict Mode

May 23, 2022 A Goodman

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…

Next.js: How to Get User’s IP Address

May 23, 2022 A Goodman

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…

How to Run Next.js on Custom Port

October 14, 2022 A Goodman

By default, a Next.js app will run on port 3000 (both development and production). However, you can use another port if you like. This short and straight-to-the-point article will show you how to do so. Modifying…

How to style Link component in Next.js

May 21, 2022 A Goodman

In Next.js, <Link> components generally go with <a> tags. To style a link, we don’t directly add our CSS class names or inline styles to <Link>. Instead, we do that with the <a> tag. Example: Another…

Next.js: Extracting URL params inside getStaticProps function

May 21, 2022 A Goodman

In Next.js, If a page uses a dynamic route, params contain the route parameters. For instance, If the page name is [id].js, then params will look as follows: You can get URL params from inside your…

How to Create a Next.js App in the Current Directory

May 21, 2022 A Goodman

You can initialize a new Next.js app in the current directory by using a dot (.) for the path when running the npx create-next-app command. There is a mandatory requirement is that the name of the…

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…

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…

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…