Web development is a constantly evolving field, and it’s crucial for beginner developers to know where to start in order to acquire the skills that are in demand in the job market. In this blog, we will provide a roadmap to guide you on your journey to becoming a web developer in 2022. The Three Paths in Web Development There are three main paths in web development that you can choose from:...
Over the course of 2+ months, I dedicated my time to developing a web app using Next.js, NextAuth.js, Prisma, SQLite, and other impressive technologies. However, as my focus slowly shifted away from the actual content, I realized that I needed to make a change. That’s when I decided to migrate my course platform to Notion. Take a look at how it turned out: Although I had used Notion on and off for a few years, this summer, I made the conscious decision to fully immerse myself in it....
Having a consistent layout throughout your website can greatly improve user experience. One way to achieve this is by using a wrapper component that includes common elements like a sidebar or header. In this blog post, we will explore two approaches to implementing a wrapper component in Next.js. Approach 1: Using a Higher Order Component (HOC) The first approach involves creating a Higher Order Component (HOC) called Layout.js, which can be used to wrap other components....
In this tutorial, we will walk you through the process of adding Google Analytics version 4 to a Next.js website. Follow the steps below: Step 1: Create a Google Analytics Property First, create a Google Analytics property and remember to save the property ID. This property ID will be used later on in the implementation. Step 2: Set Up Environment Variables Next, set up environment variables for your Next.js project. Create an environment variable called NEXT_PUBLIC_GOOGLE_ANALYTICS and assign it the value of your Google Analytics property ID....
In this blog post, we will learn how to analyze the code bundles generated in a Next.js app. Next.js provides us with a useful way to analyze these bundles, allowing us to understand what’s inside them and optimize our application’s performance. To get started, open the package.json file of your Next.js app and add the following three commands to the scripts section: "analyze": "cross-env ANALYZE=true next build", "analyze:server": "cross-env BUNDLE_ANALYZE=server next build", "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build" Your updated package....
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....
When it comes to debugging a React application, there are a few tools that can help you identify and solve problems. In this blog post, I will discuss some of these tools and how you can use them effectively. One of the best tools available for debugging React applications is the React Developer Tools. This browser extension allows you to inspect and analyze React apps with ease. If you are interested in learning more about this tool, I highly recommend checking out my dedicated blog post on React Developer Tools....
When adding dynamic content to Next.js, there may be instances where you need to dynamically generate a page that requires data upfront. One way to achieve this is by utilizing the getInitialProps function. In this blog post, we will explore how to feed data to a Next.js component using getInitialProps. First, let’s take a look at an example where we encountered an issue while trying to get data from a JSON file for a dynamically generated post page....
If you’re building an app with Next.js and Prisma and encounter the deployment error Error: @prisma/client did not initialize yet. Please run "prisma generate" and try to import it again when deploying it on Vercel, don’t worry. There’s a simple solution to this problem. The error occurs because the database is already initialized in your local development environment, but it needs to be properly generated and imported on the Vercel deployment....
If you’ve encountered the following error in your Next.js codebase or any JavaScript codebase: TypeError: Attempted to assign to readonly property Don’t worry! This error is not specific to Next.js and can occur in any JavaScript project. After some debugging, I discovered that the issue was related to a database column where I stored data as JSON. The problem arose when I tried to update this JSON object using dot syntax (e....