NextJS with Auth0 and Next-Intl - Need help to create middleware.ts

Help
,
1

Hi guys :wave: In my NextJS v14 project I would like to use both Auth0 and Next-Intl (used to provide multi-language support), but I’m not quite sure on how to configure the middleware.ts file, since both libraries use it.

Here’s the code that next-intl needs to export from the middleware.ts file:

import createMiddleware from "next-intl/middleware";
import { locales, localePrefix, pathnames } from "@/navigation";

export default createMiddleware({
	defaultLocale: "en",
	localePrefix,
	locales,
	pathnames,
});

export const config = {
	// Skip all paths that should not be internationalized. This example skips the
	// folders "api", "_next" and all files with an extension (e.g. favicon.ico)
	matcher: ["/((?!api|_next|.*\\..*).*)"],
};

Meanwhile, here’s the code that auth0 needs to export from the middleware.ts file:

import { withMiddlewareAuthRequired } from "@auth0/nextjs-auth0/edge";

export default withMiddlewareAuthRequired();

export const config = {
    // Secure the following pages
    matcher: ["/profile"],
};

Any idea on how to properly combine the two packages?

P.S. Here’s a sandbox link of a project with minimal setup in order to play around (N.B. if you fork/download it, keep in mind to also create the .env.local file following the .env.example boilerplate file).

P.P.S. I don’t know if it helps, but in this part of the next-intl docs you can also find other middleware integration (e.g. with Clerk, Supabase auth and NextAuth)

2

heyy!! i recommend this lib: GitHub - z4nr34l/next-easy-middlewares: Missing polyfill for multiple next.js middlewares