Next.js

In a Next.js app, one of the most effective ways to perform a GET request is by using SWR. To get started, you can install SWR by running the following command: npm install swr After installing SWR, you need to define a fetcher function. I usually create a lib/fetcher.js file and include the following code: const fetcher = (...args) => fetch(...args).then((res) => res.json()); export default fetcher; Make sure to import the fetcher function at the top of your component’s file:...

In this blog post, we’ll explore how to use the next/router package to control routes in Next.js. We’ll focus on programmatic routing changes, using the Next.js Router directly. Linking pages in Next.js using the Link component is a convenient way to handle routing declaratively. However, there are cases where you need to trigger a routing change programmatically. To do this, we can access the Next.js Router provided by the next/router package and call its push() method....

Discover the incredible capabilities of Next.js API routes to effortlessly create API endpoints within your Next.js application. In addition to serving web pages as page routes, Next.js provides the ability to create API routes. This powerful feature allows Next.js to act as both the frontend and backend, facilitating seamless data storage and retrieval through JSON fetch requests. API routes are located within the /pages/api/ folder and are mapped to the /api endpoint....

Every Spring, I organize a highly anticipated course called the Web Development Bootcamp. This comprehensive 20-week program covers all the essential aspects of web development, including vanilla JavaScript, React, Node.js, Next.js, and more. The course has been a tremendous success, with a growing number of signups and consistently positive outcomes for my students. Due to its popularity and effectiveness, I have decided to make it an annual event. Formerly known as the JavaScript Full-Stack Bootcamp, I recently rebranded it to better reflect the diverse skills and technologies covered....

Authentication is a crucial aspect of any web application, including those built with Next.js. There are several ways to manage authentication in Next.js, and in this blog post, I will explain how to implement email-based authentication with JWT tokens using NextAuth. To begin with, you will need to set up an external database. You can choose a local database or a cloud-based one. In my case, I opted for PostgreSQL, but you can use any database that you prefer....

Dynamic imports are a new and upcoming feature in JavaScript that offer a range of possibilities. Recently, I had the opportunity to use dynamic imports in a Next.js application for code splitting. While they are similar to static imports, there are a few differences worth exploring. To begin with, a static import of an ES Module’s default export follows this syntax: import moment from 'moment' In the case of named exports, object destructuring is used:...

Lazy loading modules in your Next.js app is a great way to optimize your application and improve performance. One module that we often need to load in specific parts of our app is the Moment library for handling date and time. In this article, we will explore how to lazy load the Moment library in Next.js and improve the performance of your app. To begin, let’s install the Moment library by running the following command in your terminal:...

How to link two or more pages in Next.js This tutorial builds upon the first Next.js tutorial, which covers how to install Next.js. In the previous tutorial, we created a website with a single page. Now, we want to add a second page to our website, a blog posts list. This page will be served at /blog and initially, it will be a simple static page similar to our index.js component....

In some cases, it may be necessary to have different behavior for a website or app during development compared to its production/live version. Next.js provides an easy way to achieve this by leveraging the value of process.env.NODE_ENV, which is automatically set to 'development' when running the application with npm run dev. For instance, let’s say we have an API route that should not be publicly accessible. To address this, we can include the following code at the top of the route:...

In my Next.js project, I encountered an issue where calling res.redirect('/') in an API route resulted in a blank page on Vercel after the redirect. Surprisingly, this problem didn’t occur during local development. The URL was correct, but the content didn’t appear until a page refresh was performed. To resolve this issue, I found that replacing res.redirect('/') with res.writeHead(302, { Location: '/' }).end() fixed the problem. The res.writeHead(302, { Location: '/' })....