Next.js: Fetching Data in Server Components
Updated: Dec 14, 2023
Next.js is one of the most popular open-source frameworks for building modern web applications. It offers a rich set of features that makes it a top choice among developers. In this article, we will delve into the intriguing aspect of......
3 Ways to Set Background Image in Next.js
Updated: Sep 06, 2023
This succinct, practical article will show you some different ways to set an image background in Next.js 13 and above (with the /app directory). Without any further ado (such as explaining what Next.js is or talking about its history),......
Next.js Warning: Extra attributes from the server [solved]
Updated: Jun 14, 2023
This concise and straight-to-the-point article will show you some different ways to get rid of an annoying warning that often shows up in your console when working with Next.js 13 or above. The Problem The warning we’re......
How to Create a Custom 404 (Not Found) Page in Next.js
Updated: Jun 14, 2023
Next.js is a React framework for building server-side rendered (SSR) or static web applications with pre-renders pages at build-time (SSG). It enables developers to build fast, optimized, and scalable web applications with minimal......
How to Highlight Currently Active Link in Next.js (Updated)
Updated: Jun 14, 2023
In a web app, giving an active link a particular 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 highlight a currently active link in......
How to add a Favicon to a Next.js app (updated)
Updated: Jun 08, 2023
A favicon of a web app is a small icon that serves as branding for the website. It is typically displayed at the top of a browser’s window, next to the page’s title, and also in the bookmarks list. This little thing helps......
Next.js: How to set HTML lang attribute
Updated: Jun 08, 2023
When building a web application, you can set the lang attribute of the <html> tag to explicitly declare the language used on your pages. For example, an app made for the Japanese market: <html lang="ja"> Note: For......
How to programmatically navigate in Next.js
Updated: May 30, 2023
Next.js is a fast-growing React framework that can help us build high-performance hybrid static and server-side rendering web applications. Many projects have been transitioning from traditional React SPAs to Next.js, including giants......
Next.js: How to Set Page Title and Meta Description
Updated: May 29, 2023
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 above (with /app directory), while the second one works well with older......
Next.js: Retrieve URL Params from Dynamic Routes
Updated: May 20, 2023
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 whose properties name is the segment’s name, and the properties value......
Next.js: 2 ways to get the current route’s path
Updated: May 20, 2023
In this article, Sling Academy will show you 2 distinct ways to get the URL path of the current route in Next.js 13 or a later version of the framework. The first approach uses the usePathname() hook, and the second approach use......
Solving Next.js error: NextRouter was not mounted
Updated: May 19, 2023
This concise article shows you how to fix a common error related to NextRouter in Next.js The Problem When working with Next.js 13 or a newer version of the framework, you might run into the following error: Unhandled Runtime......