How to Change the Base Path in Next.js (Subdirectory Path)
Overview There might be cases where you want to deploy a complex web app that consists of multiple child web apps. Each child web app is developed independently by a team and goes with a subdirectory…
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 Set Page Title and Meta Description
In Next.js, you can set the title, description, and other metadata for a page by using the <Head> component. Import it like this: Examples Static Content The code: Output: Dynamic Routes & Dynamic Content 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…
Next.js Link: Disable auto scrolling to top on page changes
In Next.js, when a user navigates from one page to another page by clicking on a <Link> component, they will be scrolled to the top of the destination page. This is the default behavior and it…
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…
Next.js: How to Highlight Currently Active Link
In a web app, giving an active link a special CSS style will enhance the user experience and makes it easier for them to navigate and know where they are. This article shows you how to…
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…
