Next Server Middleware
A simple type-safe express-like middleware for Next.js api routes using app directory and next/server.
Installation
npm install next-server-middlewareor
yarn add next-server-middlewareor
pnpm add next-server-middlewareUsage
- Create a middleware function
Similar to express, a middleware function is a function that takes a request and a next function and can affect the request and response. What's different is that we don't get the response as a parameter, but only get it after awaiting next, which is in line with how new Next.js api routes work.
// withLogging.ts
export const withLogging = (): Middleware<NextRequest, NextRequest> => async (request, next) => {
const endpointName = `${request.method} ${request.nextUrl.pathname}`
console.log(`API request: ${endpointName}`)
const response = await next(request)
console.log(`API response: ${endpointName} ${response.status}`)
return response
}- Add middlewares to your api route using
withMiddlewares
// app/api/hello.ts
import { withMiddlewares } from 'next-server-middleware'
import { withLogging } from './withLogging'
export const GET = withMiddlewares(
withLogging(),
(request) => NextResponse.json({hello: 'world',})
)Example middlewares
- Error handling: src/withErrorHandling.ts
- Auth: examples/withAuth.ts