Next.js 12 - Middleware & Edge Functions Explained

In Next.js 12, middleware functions were introduced, and they work in tandem with Vercel Edge functions. In this video, we will delve into using middleware to implement Basic Authentication for API routes. Additionally, we will break down the concepts of middleware and edge functions, contrasting them with serverless functions.

Middleware Explained

Earlier this week, at Next.js Con, the introduction of middleware and Vercel Edge functions was announced. I've spent the last few days immersing myself in understanding how both concepts function. While I might not comprehend them entirely, I've garnered a significant grasp, and I want to share this knowledge to expedite your understanding.

In essence, middleware is a function that activates before a request is completed, be it before the execution of an API route function or before the code for a page runs. Middleware allows us to adjust the response based on a user's request. For instance, it can harness the user's geolocation from a request and redirect accordingly.

If you deploy on Vercel, the middleware operates on the edge functions, but if you choose another hosting platform, it can work seamlessly using 'next start'.

Vercel Edge Functions Explained

To explain edge functions, let's contrast them with serverless functions. Here's a brief on how serverless functions operate:

When you deploy a serverless function on Vercel, it resides on a server, say, in San Francisco. So, any request made to this function will be processed there. If the request originates close to San Francisco, it's swift. However, if the request comes from afar, like Helsinki, Finland, it's slower.

Enter edge functions. They are essentially serverless functions that execute close to the user making the request. This proximity ensures swift processing whether you're in San Francisco or Helsinki. When you deploy a Next.js application on Vercel, all '_middleware.js' files (or middleware functions) are treated as edge functions, ensuring global distribution.

Basic Auth Implementation with Middleware

Now, let's pivot to a hands-on approach. Using Visual Studio Code, we'll demonstrate how to add basic authentication to our API routes through middleware.

1. In the pages folder and the API folder, we'll establish a middleware file.
2. This middleware function checks for authentication before routing the request.

For the sake of simplicity in this video, the authentication checks if the username is 'admin' and the password is 'password'.

Vercel Edge Functions vs API Route Functions (Comparison)

Lastly, we'll analyze the differences between edge functions and regular API route functions.

In essence, edge functions, as deployed on Vercel, work globally, ensuring every request is processed closest to its origin. This distribution minimizes latency, enhancing the user experience.

As an illustrative example, imagine storing items in Walmart stores worldwide, allowing customers to retrieve them directly rather than waiting for FedEx deliveries from a remote warehouse in Oklahoma. Edge computing follows a similar principle, distributing not just items but entire services to every Walmart.

I genuinely hope this video clarifies the new introductions in Next.js 12. If you found it beneficial, please like, comment, and subscribe below.