Next.js Discord

Discord Forum

Middleware triggered by GET but not POST, can it be triggered by any method?

Unanswered
West African Crocodile posted this in #help-forum
Open in Discord
West African CrocodileOP
I have a middleware.ts that works well for GET request but not POSTs. The middleware.ts file is placed at the root beside the pages/ directory, with the simplest matcher from the NextJS document:
// middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
    console.log('middleware', request.method, request.url, request.nextUrl);
    ...
}

export const config = {
    matcher: '/ingest/:path*',
};

It works well for GET requests to /ingest/a, meaning the middleware is getting called with the requests, but POST requests to the /ingest/b get 404 and do not trigger this middleware. The response for those POSTs look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /ingest/e/</pre>
</body>
</html>


What is going on, and how can I fix this? This is on next@13.5.6.

13 Replies

Jboncz
In the pages directory you can only POST to endpoints inside the /api/ folder
West African CrocodileOP
Could you elaborate a bit? The middleware.ts is at the top of the root folder, beside the pages/ directory, so I thought /api/ or /pages/api folder was not related. I don't have a pages/api folder either, yet the GET requests trigger the middleware fine, just not the POSTs.
Jboncz
Because you can GET to any page, when you navigate in a web browser you are simply running "GET" on the page.
You cannot POST to a page,
you can only POST to a route in /pages/api
Every navigation in your browser is a GET operation on that endpoint
West African CrocodileOP
You are saying because I don't have /pages/api/abc route, POST /ingest/b will give 404 even if there is a middleware made to handle /ingest/b? The same does not apply to GET. one does not need a route to /pages/a in order to have middleware triggered for a route /ingest/a, am I understand it correctly?
Jboncz
I am saying you cannot POST to ANY route thats not in /api/ for nextjs page router
You cannot POST, PUT, PATCH, UPDATE to any endpoint unless its in the /pages/api/ directory
Make a file in /pages/api/ called test.ts

import type { NextApiRequest, NextApiResponse } from 'next'
 
type ResponseData = {
  message: string
}
 
export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  res.status(200).json({ message: 'Hello from Next.js!' })
}


Then now when you POST to /api/test it will hit this endpoint and go through middleware.
Jboncz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /ingest/e/</pre>
</body>
</html>


This error is very indicative of the problem, nextjs sees a post to a route that you cant post to and just says no.