Next.js API Routes: How to Get Parameters & Query String
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
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
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
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
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
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
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
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
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
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
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…
