FR: Adding middlewares array that support matching paths

[omar2205]

Describe the feature you'd like to request

It would be awesome to have something like this

// middleware.ts

async function AdminHandler(req: NextRequest) {
  // ...
}

export const config = {
  middlewares: [
   { match: '/admin/:path*', handler: AdminHandler}
  ]
}

Describe the solution you'd like

Adding a middleware array and mapping paths with a handler

Describe alternatives you've considered

Ugly checking for paths in the current single middleware function

[rawnly]

In the meantime, you can create a switch and use path-to-regexp to match the paths/urls

[rawnly]

In the meantime, you can create a switch and use path-to-regexp to match the paths/urls

Barely tested example:

type Middleware = {
  matcher: string,
  handler: NextMiddleware
}

function handlePaths(middlewares: Middleware[]): NextMiddleware {
  return async function(req, ev) {
    const path = req.nextUrl.pathname
    const middleware = middlewares.find(m => pathToRegexp(m.matcher).test(path))

    if (middleware) {
      return middleware.handler(req, ev)
    }

	// if there's no middleware just continue
    return NextResponse.next()
  }
}

Then use it as middleware

export const middleware: NextMiddleware =  handlePaths([
    {
      matcher: '/sign-in',
	// redirects route on `/sign-in` => `/login`
      handler: (req) => NextResponse.redirect(new URL('/login', req.url)), 
    },
	// fallback, can be ignored in this case
    {
      matcher: '/:path*',
      handler: async (req) => NextResponse.next()
    },
  ])

[mertcanaltin]

@rawnly
Instead of using an object to define each path and its corresponding handler function, you could use a Map object, which allows you to specify keys and values in a more concise syntax

For example:

const pathHandlers = new Map([
  ['/sign-in', (req) => NextResponse.redirect(new URL('/login', req.url))],
  ['/:path*', async (req) => NextResponse.next()],
]);

Instead of defining the handlePaths middleware function inline, you could define it as a separate, named function. This would make the code easier to read and understand, and would also make it easier to test and reuse the function in other parts of your application

function handlePaths(pathHandlers: Map<string, RequestHandler>): NextMiddleware {
  return (req, res) => {
    // Look up the handler function for the current request path
    const handler = pathHandlers.get(req.url.pathname);
    if (handler) {
      // If a handler is found, invoke it and return its response
      return handler(req, res);
    } else {
      // If no handler is found, pass the request on to the next middleware in the pipeline
      return NextResponse.next();
    }
  };
}

[rawnly]

@mertcanaltin yes mine was just a quick example ✌️

[omar2205]

@mertcanaltin can you please provide the full middleware.ts file for your example?

[rawnly]

@omar2205 it should be the same as mine, he only changed the core of the function 😉

[omar2205]

@omar2205 it should be the same as mine, he only changed the core of the function 😉

It just, I had some type issues.

[omar2205]

@rawnly any ideas on how to add next-auth's withAuth middleware, for example, for /dashboard?

[rawnly]

@omar2205 Since withAuth is a middleware you should be able to add it to the Map's value as follows:

import { withAuth } from 'next-auth/middleware'

const pathHandlers = new Map([
  ['/sign-in', (req) => NextResponse.redirect(new URL('/login', req.url))],
  ['/dashboard', withAuth(function (req) { ... })],
  ['/:path*', async (req) => NextResponse.next()],
]);

[omar2205]

@rawnly
Sorry, but can I get a good example?

import { withAuth } from 'next-auth/middleware'

const pathHandlers = new Map([
  ['/sign-in', (req) => NextResponse.redirect(new URL('/login', req.url))],
  ['/dashboard', withAuth(function (req) {
      console.log(req)
    }, {
      callbacks: {
        authorized: ({ token }) => token?.role === "admin",
      },
    })
  ],
  ['/:path*', async (req) => NextResponse.next()],
]);

I get this huge error:

[omar2205]

@rawnly I don't wanna keep asking you for help, but I tried to apply i18n with your middleware array solution.
https://github.com/omar2205/next13-i18n-auth-demo

It's breaking on any page other than those supported.

[rawnly]

@omar2205 don't worry, happy to help!

[rawnly]

@omar2205 I'm creating a new library to handle all the edge cases, you can take a look at the code here: https://github.com/rawnly/next-wayfinder

and below you can find an example implementation of your middleware:

// middleware.ts
import { handlePaths } from 'next-wayfinder'
import { NextResponse } from 'next/server'

import i18nMiddleware, { getLanguage } from './middlewares/i18n'

export default handlePaths([
  {
    matcher: '/',
    handler: req => {
      const lng = getLanguage(req)

      return NextResponse.redirect(new URL(`/${lng}`, req.url))
    }
  },
  {
    matcher: '/:lang/:path*',
    handler: i18nMiddleware,
  },
])

---

// middlewares/i18n.ts
import acceptLanguage from "accept-language";
import { NextResponse } from "next/server";

import { NextMiddlewareWithParams, NextRequestWithParams } from "next-wayfinder";
import { fallbackLng, languages } from "./path-to-i18n-settings";

export const LNG_COOKIE_NAME = 'i18next'

export function getLanguage(req: NextRequestWithParams): string {
  let lng: string | null = null;

  if (req.cookies.has(LNG_COOKIE_NAME)) {
    lng = acceptLanguage.get(req.cookies.get(LNG_COOKIE_NAME)?.value)
  }

  if (!lng) {
    lng = acceptLanguage.get(req.headers.get('Accept-Language'))
  }

  if (!lng) {
    // get it from the url 
    lng = req.params.lang as string ?? null
  }

  if (!lng) {
    lng = fallbackLng
  }

  return lng
}

const i18nMiddleware: NextMiddlewareWithParams = req => {
  if (req.headers.has('referer')) {
    const refererUrl = new URL(req.headers.get('referer') as string)
    const ref = languages.find((lang) => refererUrl.pathname.startsWith(`/${lang}`))

    const response = NextResponse.next()

    if (ref) {
      response.cookies.set(LNG_COOKIE_NAME, ref)
    }

    return response
  }


  return NextResponse.next()
}

export default i18nMiddleware;

[omar2205]

Still, if I tried to visit http://localhost:3000/a it crashes with Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

[rawnly]

have you double checked your next-auth configuration? To run your repo locally I had to do some fixes using unstable_getSession

[omar2205]

@balazsorban44 I'm sorry, but this is still a feature request.