Next.js Edge Runtime Explained — Serverless at the Edge
In this tutorial, you will learn about Next.js Edge Runtime Explained. We cover key concepts, practical examples, and best practices to help you master this topic.
Next.js Edge Runtime runs Serverless functions at CDN edge locations worldwide, providing low-latency request processing for middleware, API routes, and server-rendered pages.
What You'll Learn
- Edge Runtime vs Node.js Runtime
- Edge middleware execution
- Edge API routes
- Geo-location based routing
- Edge Config for dynamic data
Why It Matters
Edge functions execute close to users, reducing latency. They are ideal for authentication checks, redirects, A/B testing, geolocation routing, and personalization at global scale.
// middleware.ts — Edge-based authentication
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export const runtime = "edge";
export function middleware(request) {
const country = request.geo?.country || "US";
const city = request.geo?.city || "Unknown";
const region = request.geo?.region || "Unknown";
const response = NextResponse.next();
response.headers.set("x-country", country);
response.headers.set("x-city", city);
if (country === "GB" && request.nextUrl.pathname === "/pricing") {
return NextResponse.redirect(new URL("/pricing/gb", request.url));
}
return response;
}
// app/api/hello/route.js — Edge API route
export const runtime = "edge";
export async function GET(request) {
return new Response(
JSON.stringify({
message: "Hello from the edge!",
geo: request.geo,
timestamp: Date.now(),
}),
{
headers: { "content-type": "application/json" },
}
);
}
// app/page.jsx — Edge-rendered page
export const runtime = "edge";
export default function HomePage() {
return <h1>Rendered at the edge!</h1>;
}
Expected output: Edge middleware runs at CDN locations, geo-based redirects work for UK users, and API routes respond with low latency from edge locations.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro