Next.js Discord

Discord Forum

Middleware not running

Answered
Serengeti posted this in #help-forum
Open in Discord
SerengetiOP
Hi all, my middleware.ts file is not running using the pages router.

Project structure:
pages/
├─ _app.tsx
├─ index.tsx
middleware.ts
tsconfig.json
packages.json


Package.json (relevant bits)
{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev"
  },
  "engines": {
    "node": "=18",
    "pnpm": ">=8"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.26.1",
    "@neondatabase/serverless": "^0.6.0",
    "@tanstack/react-query": "4.36.1",
    "@trpc/client": "^10.43.0",
    "@trpc/next": "^10.43.0",
    "@trpc/react-query": "^10.43.0",
    "@trpc/server": "^10.43.0",
    "dotenv": "^16.3.1",
    "drizzle-orm": "^0.28.6",
    "next": "14.0.0",
    "pg": "^8.11.3",
    "postgres": "^3.4.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@types/node": "^20.8.9",
    "@types/pg": "^8.10.7",
    "@types/react": "^18.2.33",
    "@types/react-dom": "^18.2.14",
    "autoprefixer": "^10.4.16",
    "drizzle-kit": "^0.19.13",
    "eslint": "^8.52.0",
    "eslint-config-next": "13.5.5",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "tailwindcss": "^3.3.5",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2"
  }
}


middleware.ts
export default function middleware() {
  console.log('middleware running!');
}

export const config = {
  matcher: ['/'],
};


tsconfig.json
{
  "compilerOptions": {
    /* base options */
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "ES6",
    "verbatimModuleSyntax": true,
    "allowJs": true,
    "resolveJsonModule": true,
    /* strict options */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "moduleResolution": "bundler",
    "module": "ESNext",
    "noEmit": true,
    "lib": ["dom", "dom.iterable", "ESNext"],
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./*"]
    },
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "middleware.ts",
    ".next/types/**/*.ts"
  ],
  "exclude": ["node_modules"],
  "ts-node": {
    "esm": true,
    "compilerOptions": {
      "module": "nodenext"
    }
  }
}


Any idea what the issue is here? When running next dev I see no output in the logs that the middleware is running.
Answered by Serengeti
Marking this as closed....

I am an idiot.

middleware.ts had a leading whitespace in the filename that VS Code made very hard to see.
View full answer

8 Replies

Eric Burel
You need your middleware to run "NextResponse.next()" otherwise it will block the request and do nothing
you have a matcher on "/" so it should run on the homepage only
otherwise it sounds good
SerengetiOP
It isn't running at all, though. I see no console output in the terminal
I am doing this simple test because I was trying to set up Clerk auth middleware, and that wasn't working
For example, this is the output from my terminal after hitting localhost:3000

> next dev

   â–² Next.js 14.0.0
   - Local:        http://localhost:3000
   - Environments: .env.local

 ✓ Ready in 2.8s
 â—‹ Compiling /_error ...
 ✓ Compiled /api/trpc/[trpc] in 1141ms (399 modules)
 âš  Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
 ✓ Compiled / in 50ms (403 modules)


As you can see there is no middleware running! output
SerengetiOP
Marking this as closed....

I am an idiot.

middleware.ts had a leading whitespace in the filename that VS Code made very hard to see.
Answer
Eric Burel
this happens 🙂