Chaining or Combining Next.js App Router Middleware

[58bits]

Hi all - we've published (and updated) our middleware chaining strategy...

https://www.58bits.com/blog/chaining-or-combining-nextjs-middleware

Our chainMiddleware.ts helper function now looks like this...

// https://reacthustle.com/blog/how-to-chain-multiple-middleware-functions-in-nextjs
// https://github.com/jmarioste/next-middleware-guide/

import { NextResponse } from 'next/server'
import { ChainableMiddleware, MiddlewareFactory as MiddlewareFactory } from './@types'

/**
 * Helper to compose multiple MiddlewareFactory instances together.
 *
 * We restrict the type of middleware to ChainableMiddleware, which is a strict
 * subset of the full NextMiddleware type.  Specifically, we require middleware
 * layers to return Promise<NextResponse>, as opposed to a few other return
 * types that NextMiddleware allows in general.  This restriction allows
 * middleware layers that want to set response cookies to do so using the
 * NextResponse cookies api: each layer reliably receives a NextResponse from
 * the next layer in the chain, and can add cookies to it before passing it on
 * down.
 *
 * Important: layers must construct NextResponses (specifically the .next() and
 * .rewrite() variants) by passing in the (possibly mutated) request object.
 * Then any headers/cookies that have been set on the request object (including
 * by earlier layers) will be properly passed on to the Next.js request
 * handlers: page components, server actions and route handlers.
 */
export function chainMiddleware(
  functions: MiddlewareFactory[] = [],
  index = 0
): ChainableMiddleware {
  const current = functions[index]
  if (current) {
    const next = chainMiddleware(functions, index + 1)
    return current(next)
  }

  return async (request) => NextResponse.next({ request })
}

Our types.ts definition looks like this...

import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'

export type ChainableMiddleware = (
  request: NextRequest,
  event: NextFetchEvent
) => Promise<NextResponse>

export type MiddlewareFactory = (middleware: ChainableMiddleware) => ChainableMiddleware

Here are a couple of example plugins (a larger collection including withNonce, withAuth, withi18n, are in the blog post)...

withPrefersColorScheme.ts

import { NextFetchEvent, NextMiddleware, NextRequest, NextResponse } from 'next/server'

import { MiddlewareFactory } from './@types'

export const withPrefersColorScheme: MiddlewareFactory = (next) => {
  return async (request: NextRequest, event: NextFetchEvent) => {
    const response = await next(request, event)
    response.headers.set('Accept-CH', 'Sec-CH-Prefers-Color-Scheme')
    response.headers.set('Vary', 'Sec-CH-Prefers-Color-Scheme')
    response.headers.set('Critical-CH', 'Sec-CH-Prefers-Color-Scheme')
    return response
  }
}

withCSP.ts

// https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy

import { NextFetchEvent, NextRequest } from 'next/server'

import { MiddlewareFactory } from './@types'
import { getConfig, getCSPHeader } from '@/config'

export const withCSP: MiddlewareFactory = (next) => {
  const config = getConfig()

  return async (request: NextRequest, event: NextFetchEvent) => {
    if (config.cspEnabled && request.headers.get('x-nonce') != null) {
      const nonce = request.headers.get('x-nonce')
      const cspHeader = getCSPHeader(nonce)
      // TODO: Should this be set on the request?
      request.headers.set('Content-Security-Policy', cspHeader)
      const response = await next(request, event)
      response.headers.set('Content-Security-Policy', cspHeader)
      return response
    } else {
      return next(request, event)
    }
  }
}

...etc.

Which can all be used in middleware.ts like this..

import { withCSP } from './middleware/withCSP'
import { withPrefersColorScheme } from './middleware/withPrefersColorScheme'

// NOTE: withI18N must come last.
export default chainMiddleware([withCSP, withPrefersColorScheme])

Hope this helps....

[denis23x]

Hi @58bits

Thanks, but you should come here with question next time.

[58bits]

Hi @58bits

Thanks, but you should come here with question next time.

Hi @denis23x - thanks for the feedback. The description of this discussion area is: "Discuss new features of the Next.js App Router and suggest improvements for the future."

And so I submitted this as a suggestion for future improvements. It would be great if this or a similar solution could be part of the official Next.js docs.

[Cigan12]

Hi, you are setting request headers via request.headers.set function, and it works fine, and u can receive it later in server components, for example, if u need to set nonce for a script