Next.js recently released version 13.4, which officially marks App Router stable. App Router is a code name for the new paradigm in which Next.js applications can be built. Previously called App Dir when it was released as a beta, with Next.js 13, this new paradigm introduces an array of enhancements…

Error handling in Type/JavaScript is a topic that doesn’t get the importance it deserves. It’s crucial to the longevity of any project to catch and log errors. As I’ve started working with TypeScript more over the years, I started to realize that I didn’t really understand error handling. …

TL;DR Use the next-api-route-middleware package to create composable middleware functions and keep your code clean. 🧽 Middleware Middleware functions allow us to abstract reusable code that runs before the handler is invoked. They have access to the req, res, and the next middleware function. Unfortunately Next doesn’t include a way to use…

Intro Next.js provides a solution to build an API within your Next.js codebase. It’s a nice solution that makes use of their file based routing system. When you create your first API route, you’ll notice it’s very bare. The example on their docs show a function that is injected with req…

Intro Next.js now provides middleware functionality, allowing us to execute code before a request is processed — at the edge. We can inspect the request coming from the client, and modify the response. We’ll make use of this to check for a cookie on protected routes, and redirect if the client…

TL;DR Container Queries Scroll Snap Object View Box Scroll Timeline 🚧 Important note: The features described in this post are either proposals or have very little browser support. Make sure to check caniuse before attempting to use any of these features. Container Queries 🔗 See a live demo Container Queries allow you to…

An accessible web app is one where all features and content are available for all users, regardless of how they access the app, or any impairments they may have. The following is a list of common accessibility mistakes web developers make. Landmark roles Landmark roles organize and add structure to an HTML…

On May 4th the React team published an RFC proposing a new React hook that is currently named useEvent. The RFC has gained a lot of hype, and for good reason! The proposed hook solves a problem that anyone who has ventured to optimize a React app has faced. Always-stable function identity The…

Intro I have a good friend who is currently a tractor mechanic. He tells me stories about fighting to move up in his industry. Once he had an interview where he was pitted against the hiring manager’s son. The latest interview consisted of: “15 people in a zoom call and we…