How to configure middleware to run and be debugged in next.js

Ultimately, I want to route requests to pages within subdomains in my next.js application. If I specify the correct subdomain in a route, I believe that I need to have a middleware.ts file under the src folder (not the src/app folder) to handle the correct routing. Well no matter where I place the file below, breakpoints are not reached and the middleware file is not run. Is the problem that I have "createMiddleware" from 'next-intl/middleware? If so, how can I incorporate my plans for subdomains with internationalization?

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import createMiddleware from 'next-intl/middleware';
import {routing} from '../i18n/routing';
 
export default createMiddleware(routing);

export function middleware(request: NextRequest) {
  
  const hostname = request.headers.get('host') || '';
  const subdomain = hostname.split('.')[0]; // Extract subdomain
  
  if (subdomain === 'www' || subdomain === 'localhost:3000') {
      return NextResponse.next(); // Skip if it's the main domain or localhost
  }

  // Rewrite the URL to include the subdomain as a path
  const newUrl = new URL(`/${subdomain}${request.nextUrl.pathname}`, request.url);
debugger;
  return NextResponse.rewrite(newUrl);
}
 
export const config = {
 
  // Match all pathnames except for
  // - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
  // - … the ones containing a dot (e.g. `favicon.ico`)
    matcher: [
        '/((?!api|trpc|_next|_vercel|.*\\..*).*)',
        // '/([\\w-]+)?/users/(.+)',
    ]
};