I'm working on trying to get the middleware to work within the app.

I'm sure I'm missing something here, but I'm using the src directory for my next.js v13.4 app and I'm just testing to even see if the middleware is running when a request is made.... But it appears it's not firing. I've placed the middleware.ts file to be a sibling of the app directory.

Here's the code snippet I'm as modified via the internationalization docs (https://nextjs.org/docs/app/building-your-application/routing/internationalization, mostly just the config):

import type { NextRequest, NextFetchEvent } from "next/server";
import { NextResponse } from "next/server";

export function middleware(request: NextRequest, event: NextFetchEvent) {
  console.log("HELLO!?!?!");
}

export const config = {
  matcher: [
    // Skip all internal paths (_next)
    "/((?!_next).*)",
    // Optional: only run on root (/) URL
    // "/",
  ],
};

No matter where I try moving this file around, I can't seem to get it to log to my local dev console that's running the server. I've attached an image of what a typical request looks like in my console.

Any idea on how I can get the logs working at the very least?

Forgot to attach the folder structure image