How to Cache Data in Next.js Globally Across All Pages at Build Time

When working on a Next.js-based website, you might encounter the need to fetch data from an API at build time. In this article, I’ll share a solution that works both in development (localhost) and in production (Vercel) environments. Let’s consider a scenario where we have a list of “members” and we want to download this data once, store it, and make it available across all pages. The list of members is relatively static and changes at most once a day....

How to Upload Files in a Next.js Form

In this article, I will guide you through the process of uploading files in a Next.js form. By default, Next.js does not allow file uploads in forms, but with a few adjustments, we can make it work. First, let’s take a look at the form structure in a Next.js page: <form method="post" action="/api/new" enctype="multipart/form-data">...</form> Here, we have a standard HTML form that calls an API endpoint. Inside this form, there is a file input control:...

Interacting with the Google Analytics API using Node.js

Learn how to interface a Node.js application with the Google Analytics API by using the official googleapis package. In this blog, we will use a JSON Web Token for authentication and provide examples of API interaction. Note: uBlock Origin blocks the images on this post because they have the word “analytics” in the path. To view the images, please disable uBlock Origin for this page. In this blog post, we will show some examples of how to use the Google Analytics API with Node....

Same POST API call in different JavaScript libraries

When testing APIs, it’s common to use tools like Insomnia to perform HTTP requests to REST API or GraphQL API services. In this blog, I want to showcase the same API call implemented in different JavaScript libraries. API Call Description Let’s consider an example API call - a POST request to the api.randomservice.com website’s /dog endpoint. The request body includes an object with two properties: name and age, encoded as JSON....

The Streams API: Processing Data as it Arrives

Using streams, we can receive a resource from the network or other sources and process it as soon as the first bit arrives. This allows us to immediately work with the resource instead of waiting for it to fully download. What is a stream A common example that demonstrates the benefit of streams is loading a YouTube video. You don’t have to wait for the entire video to load before you can start watching it....

What is the JAMstack?

Have you heard of the term JAMstack? In recent years, it has become a popular way to describe a set of technologies used together to achieve web development goals. Just like LAMP and MEAN, JAMstack represents a combination of technologies. But what does JAMstack really mean? JAM is an acronym for JavaScript, API, and Markup. It refers to a trend in web application and website development that revolves around several key characteristics:...