Next.js middleware not functioning correctly in TypeScript – what am I doing wrong?

My problem is that following documentation, Next.js’s middleware are not working as I ewxpected.

I tried this. The simpletst middleware I can imagine.

I expected navigating throw /, … a console message will appear. But nothing happened.

Here the code:

I’ve also removed package-lock. Reinstalled everything. Now this is my package file:

{
  "dependencies": {
    "@next/swc-darwin-x64": "13.4.4",
    "eslint-config-next": "13.3.0",
    "next": "13.3.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next list"
  },
  "devDependencies": {
    "@types/node": "18.15.11",
    "@types/react": "18.0.35"
  }
}

>Solution :

NextJS 13+ requires middleware file to be at the root level of your source instead of app/ or any other folder.

So your middleware file and project dir should look like

├── next.config.ts
├── middleware.ts
├── .env, package.json, or any other project files
├── app
├── pages
├── public
├── src

Reference