How can i do server-side redirecting using middleware.ts if i already have a middleware.ts file

Question

Hi, i have a nextjs app and the auth is managed by clerk. That means i already have a middleware.ts file with some code provided by clerk (the code is shown in the 1-st image).

My questions is: I read in nextjs docs that i can have just one middlewate.ts file per project, but how i can integrate the middleware from image (2-nd image).

American Crow · Answer

You compose/combine Clerks middleware by returning the second milddwarefrom from clerkMiddleware()import {
  clerkMiddleware,
  createRouteMatcher,
  redirectToSignIn,
} from '@clerk/nextjs/server';
import createMiddleware from 'next-intl/middleware';

import { AppConfig } from './utils/AppConfig';

const intlMiddleware = createMiddleware({
  locales: AppConfig.locales,
  localePrefix: AppConfig.localePrefix,
  defaultLocale: AppConfig.defaultLocale,
});

const isProtectedRoute = createRouteMatcher([
  'dashboard/(.*)',
]);

export default clerkMiddleware((auth, req) => {
  if (isProtectedRoute(req)) auth().protect();

return intlMiddleware(req);
});

export const config = {
  matcher: ['/((?!.+\.[\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};https://clerk.com/docs/references/nextjs/clerk-middleware#combine-middleware

How can i do server-side redirecting using middleware.ts if i already have a middleware.ts file

2 Replies