Middleware in Next.js
Middlewares are code that runs before / after your request handler.
Commonly used for
- Analytics
- Authentication
- Redirecting [ In an Express App it is not applicables, cuz Express runs in backend ]
- Modifying the request/response
How
Create an middleware.ts
, in the top level of yourfresh Next.js app.
You can only one have one middleware.ts
where all your middlewares are defined. But you can still organize your middleware logic modularly & then importing them in middleware.ts
file.
A Simple Middleware to count the number of Visitors on your site -
// This code will run on every request
import { NextRequest, NextResponse } from "next/server";
let requestCount = 0;
// Simply Define a function named middleware that takes req as parameter.
export default function middleware(req: NextRequest) {
requestCount++;
console.log("Number of Requests", requestCount);
return NextResponse.next();
}
But there is a problem.
Every time we visit the app the count get increased by many times, not 1. This is because Next.js
made many request which will cause counter to increase many times.
)
There are 2 ways to avoid this
- Using Custom Matchers
Matcher allows you to filter Middleware to run on specific paths.
export const config = {
matcher: ["/api/:path*", "/"],
// matcher: "/api/:path*",
};
- Using Conditional Rendering
export default function middleware(req: NextRequest) {
//if (req.nextUrl.pathname === "/") {
// requestCount++;
// console.log("Number of Requests", requestCount);
// return NextResponse.next();
//}
if (
req.nextUrl.pathname.startsWith("/") ||
req.nextUrl.pathname.startsWith("/services")
) {
requestCount++;
console.log("Number of Requests", requestCount);
return NextResponse.next();
} else if (req.nextUrl.pathname.startsWith("/admin")) {
if (req.body.name !== "Jayant") {
return NextResponse.redirect(new URL("/", req.url));
} else {
return NextResponse.next();
}
} else {
NextResponse.next();
}
}
Ref : Next JS Middleware
Top comments (0)