Next.js 14.x middleware.ts not triggering

I have a app/middleware.ts but it didn't trigger,

import { NextResponse, NextRequest } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
export const config = {
  matcher: '/about/:path*',
}

When I visit /about, it didn't redirect to /home, does anyone know what the problem is?
All the structure are shown on the pictures.

middleware.ts should located in the root of your project. not the app directory