Posts

Netlify Lambda Functions: A Tutorial for Adding Dynamic Processing to JAMstack Sites

In my previous tutorial on Netlify, I discussed how to use it to host websites, including this blog. Netlify is a great platform for running sites, especially those built with Hugo, as it enables us to have a 100% JAMstack (JavaScript, APIs, and Markup) implementation. What makes JAMstack even more exciting is its ability to handle dynamic functionality. And a major player in enabling dynamic capabilities in JAMstack sites is Netlify Lambda Functions....

New Website and Redesign: Improving Developer Experience and Content Creation

A few days ago, I had a brilliant idea of migrating my website, flaviocopes.com, from Hugo to Astro. In just one day, I successfully accomplished the transition with a fresh new theme design. In this blog post, I will share the entire process and decision-making behind this change, as it may prove useful to you. For those unfamiliar with Astro, it is a fantastic site-building tool that I have been using for many of my latest website projects....

Next.js vs Gatsby vs create-react-app

When it comes to choosing between Next.js, Gatsby, and create-react-app, it’s important to consider their differences and advantages. While create-react-app is a popular tool for creating React applications, it lacks certain features like server-side rendering (SSR) and other SEO capabilities provided by Next.js and Gatsby. Both Next.js and Gatsby offer server-side rendering, but they approach it differently. Gatsby is a static site generator, which means you build your site and deploy the resulting static files on a hosting platform like Netlify....

Next.js: Adding Features Specifically for Development Mode

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

Next.js: Fixing a Blank Page Issue After `res.redirect()` in API Routes

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: '/' })....

Next.js: How to Populate the Head Tag with Custom Tags

Customizing the head tag of your Next.js app is a useful way to enhance your page’s metadata. Whether you want to modify the page title or add a custom meta tag, you can easily do so by following the steps below. Inside your Next.js page component, import the Head component from next/head: import Head from 'next/head' Include the Head component in your component’s JSX output: const House = props => ( <div> <Head> <title>The page title</title> {/* Add any additional tags here */} </Head> {/* The rest of the JSX */} </div> ) export default House Within the Head component, you can add any HTML tag that you’d like to appear in the <head> section of the page....

Next.js: How to Show Content in Development and Hide in Production

When developing a website using Next.js, you might come across a scenario where you want to display certain information only during the development stage on your local machine, but not on the deployed website. In this blog post, I will show you how to achieve this in a simple way. The first step is to determine whether the website is running in development mode or not. To do this, we can make use of the process....

Next.js: Running Code on the Server Side or Client Side

Learn how to write code that is executed only on the specific side of your stack: either on the frontend or the backend. In your page components, you can choose to execute code exclusively on the server-side or the client-side by checking the window property. The window property exists only in the browser environment. Therefore, you can use the following code to determine if you are on the server-side: if (typeof window === 'undefined') { // Server-side code here } Similarly, you can use the following code to execute client-side code:...

Next.js: Troubleshooting Component State Not Refreshing on Navigation

I recently encountered an issue where the state of a component was not getting refreshed when navigating with the Next.js router. After some investigation, I discovered the problem and found a solution. In my case, I had a component that used the useState() hook to manage some variables. However, even though I expected the state to update when navigating to a different page, it remained unchanged. Upon further examination, I realized that the issue was related to my custom _app....

Node Buffers: Managing Binary Data in Node.js

What is a buffer? In the world of programming, a buffer refers to an area of memory that is used to hold data temporarily. While JavaScript developers may not be familiar with this concept, it is commonly used by developers working with system programming languages like C, C++, or Go. Buffers are essentially fixed-size chunks of memory that store binary data. In Node.js, buffers are implemented using the Buffer class, which allows JavaScript developers to interact with binary data....