Next.js

By default, a Next.js app will run on port 3000 (both in the development and production environments). 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......

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 current folder must not contain special......

This article shows you a few solutions to fix the window is not defined error in Next.js. Understanding The Problem When working with Next.js, you are likely to run into the window is not defined error at least one time in your......

In Next.js, you can programmatically detect between the server environment and the client environment by checking whether the window object exists or not, like this: const isServer = typeof window === 'undefined'; if(isServer){ // do......

When working with Next.js, you might encounter the document is not defined error. This article will explain why this error happens, then walk you through a couple of different ways to get rid of it. The Cause of the Error Next.js......

In Next.js, <Link> is one of the most-used components. To style it, you can use the className or the style props (in the old days, we had to add a <a> tag inside a <Link>, but now there is no need to do so). Example: JSX......

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 look as follows: { id: /* something */ } You can get URL params from inside......

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 1.......

In Next.js, you can get the query string parameters of a URL by using the useRouter hook like this: import { useRouter } from "next/router"; /*...*/ const router = useRouter(); const queryParams =......

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 of applying that technique in practice. Overview You......

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 or errors when using a third-party library due to SSR or you want a......

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 path like......