Next.js has rapidly become one of the most popular frameworks for building React applications. A key feature is its useful built-in APIs for fetching data for each page. But how can we leverage those APIs with GraphQL to superpower our apps? In this in-depth guide, we‘ll walk through how to integrate Apollo Client with Next.js…
The popularity of React and the Jamstack architecture has led to an explosion of frameworks and tools in the web development ecosystem. One that has quickly risen to prominence is Next.js, a React framework that enables hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. Next.js has become a go-to choice…
Introduction Next.js has quickly become one of the most popular frameworks for building React applications. With its powerful features and easy-to-use development environment, Next.js simplifies the process of creating server-rendered React apps. But what if you want to take it a step further and create a preconfigured starter template that you can use to bootstrap…
As a frontend developer, I‘m always on the lookout for ways to add delightful, eye-catching visuals to my web projects. Recently, while scrolling through Twitter, a UI component caught my eye that featured dazzling beams of light streaking across the background, almost like a meteor shower softly illuminating the night sky behind an image card….
Are you a Rick and Morty fan looking to build an interactive web app to explore all the zany characters from across the multiverse? Look no further! In this step-by-step tutorial, we‘ll harness the power of the Next.js framework and the Rick and Morty API to create an epic wiki web app with features like:…
If you‘ve worked on a modern JavaScript project, especially one using a framework like Next.js, you‘ve likely encountered errors related to ES modules. These cryptic error messages about "Must use import to load ES Module" can be frustrating to debug, often bringing development to a grinding halt. However, there‘s a convenient solution that every full-stack…
As a full-stack developer, I‘ve often needed a quick and easy way to test code snippets in various programming languages without switching between different tools. That‘s why I decided to build an online code editor using React that allows compiling and executing code in over 40 programming languages. This post will guide you through the…
Contact forms are a crucial component of many websites, allowing visitors to easily get in touch with the site owner or business. Whether you need a way for potential customers to request more info about your product, or simply want to receive feedback and inquiries from your audience, implementing a contact form is often a…
🎅🎄 The holidays are a time for joy, giving and spending time with loved ones. For many, the magic of Christmas morning hinges on one crucial question: where in the world is Santa Claus? While NORAD has been tracking Santa on his yuletide journey since 1955, a sprinkle of modern web tech is all it…
As a web developer, your portfolio is one of your most important assets. It‘s the first place potential clients or employers look to evaluate your skills and experience. An effective portfolio should be visually appealing, easy to navigate, and showcase your best work. In this guide, I‘ll show you how to build a modern portfolio…
Authentication is a critical feature in most web applications today. It allows you to protect sensitive information, personalize user experiences, and secure access to your app‘s functionality. However, implementing authentication from scratch can be complex and time-consuming. Fortunately, modern web frameworks like Next.js make it easier to add authentication to your apps. Next.js is a…
If you‘re a content creator on YouTube, you‘ve probably amassed an impressive collection of videos over time. But did you know you can showcase your video content outside of YouTube as well? By leveraging the power of the YouTube API, developers can easily integrate YouTube playlists and videos into their own websites and apps. In…