NextJS Middleware.ts file not triggered

Question

I have a NextJS React Project. It has the following file structures: src/app contains all pages. There is no src/app/pages. In my setup, for example, the login page would be called by "/login" where src/app/login/page.tsx is the page being rendered. I added a middleware.ts to src/app/ so it is in the format "src/app/middleware.ts".

"paths": {
     "@/*": ["./src/*"]
    }
 },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]

However the issue is that it is not being triggered. I have attached my tsconfig below:

Any help on this issue would be great

I've tried adding a pages folder in src/app/pages. I've tried changing the tsconfig file as well but not sure if I've done it completely right. I also tried to put middleware.ts at the same level as app but I got the following error

Error: Invalid middleware found.

Beast80K · Accepted Answer · 2024-03-23 09:33:49Z

5

Problem :

I added a middleware.ts to src/app/ so it is in the format "src/app/middleware.ts"

Cause :

Improper Middlware file location src/app/middleware.ts you placed it inside of app,
middleware.ts should be at same level(outside) of app folder,
If you have src then inside of src folder.

Solution :

middleware.ts should be outside of app.

If you have src then src/middleware.ts :

projectName
├── src
    ├── middleware.ts
    ├── app

If you don't have src then projectName/middleware.ts :

projectName
├── app
├── middleware.ts

Please Read :

Middleware Convention : https://nextjs.org/docs/app/building-your-application/routing/middleware#convention

If you have any doubts, then please leave a comment (I will update answer if necessary)

edited Mar 23, 2024 at 9:33

answered Mar 23, 2024 at 7:08

Beast80K

1,4471 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DaveDean1 Over a year ago

So this is the best explanation I have seen - nextjs is very picky and very specific about the file location. For people building nextJS apps with app router there are basically 3 levels: The root directory or the project (same level is tsconfig.json, next.config.json etc, inside the src folder, and inside the src/app folder). The middleware needs to be on the middle level, if you are using the src folder. The mistake I was making was adding at the root level, which is only applicable whtn you are NOT using a src folder. Thanks to you sir

Collectives™ on Stack Overflow

NextJS Middleware.ts file not triggered

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related