Next.js: Extracting URL params inside getStaticProps function
In Next.js, If a page uses a dynamic route, the params object contains the route parameters. For instance, If the page name is [id].js, then the params will…
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…
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…
Next.js: Retrieve URL Params from Dynamic Routes
In Next.js 13.3 and other newer versions of the framework, you can extract segment data from a dynamic route by using the useParams() hook. It returns an object…
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….
Next.js: Read and Display Data from a Local JSON File
This short and straight-to-the-point article shows you how to read and display data from a local JSON file in Next.js. This is useful if you want to build…
Next.js: How to Set Page Title and Meta Description
This article shows you 2 ways to set page titles and meta descriptions in Next.js. The first approach is only available for server components in Next.js 13 and…
Passing data via a Link component in Next.js
This concise article is about passing and retrieving data with Link components in Next.js. We’ll discuss the technique (just a few words) and then examine a complete example…
Next.js: Disable Server-Side Rendering on Specific Pages
There may be situations 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…
How to Change the Base Path in Next.js (Subdirectory Path)
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…
