Middleware for _next/image endpoint

[GabrielOrtiz-at]

Hi there,

Does anyone know if/how there is a way to run middleware on _next/image calls? We see that this URL is structured like this: https://somedomain.com/_next/image?url=path-to-image-src But we want to be able to peak in on these requests and middleware seems like a logical place to do that.

I've been reading the documentation and I can see that the middleware runs on pages and assets in the public directory. In my testing I don't see the middleware catching anything for next/Image

I've tried testing middleware inside the pages directory... Can I also put a middleware file in the root directory? Thanks!!

[icyJoseph]

Hi,

Starting with next 12.2.x, you can use middleware only at the root, and it also sees _next internal calls!

• https://nextjs.org/docs/messages/middleware-upgrade-guide#no-nested-middleware
• https://nextjs.org/docs/messages/middleware-upgrade-guide#executing-middleware-on-internal-nextjs-requests

With this page, configured domains in next.config.js:

import type { NextPage } from "next";
import Image from "next/image";

const Home: NextPage = () => {
  return (
    <div>
      <Image
        src="https://picsum.photos/200/300"
        alt="random"
        width={200}
        height={300}
      />
    </div>
  );
};

export default Home;

Then this middleware should do the trick for you:

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


export function middleware(req: NextRequest) {
  const { pathname, search } = req.nextUrl;
  console.log("Middleware", { pathname, search }); 
  // Middleware { pathname: '/_next/image',  search: '?url=https%3A%2F%2Fpicsum.photos%2F200%2F300&w=256&q=75' }
 
  return NextResponse.next();
}

Remember, starting with 12.2.x, no more nested middleware.

[icyJoseph]

NextJS 14.2.5 middleware does not seem to run for _next/image again. Is it no longer the case?

Nope, it should work. I believe it is a bug. I opened a PR but it is still awaiting review.

• fix: _next/image intercepted by middleware #68271

[icyJoseph]

@marcomele are able after which version it breaks? I haven't had time to investigate more details, but knowing the version could help to refine the fix.

[giri-jeedigunta]

I'm trying this on Next 14.2.11 it doesn't work. Not able to intercept any requests that start with http://localhost:3000/_next/image?url=. It shows other requests in the console but nothing with next/image. Any suggestions? Here is what I have:

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

export function middleware(req: NextRequest): NextResponse {
  console.log('#### middleware.ts ####')

  const { pathname, searchParams } = req.nextUrl

  if (pathname.includes('/_next/image')) {
    const urlParam = searchParams.get('url')
    if (urlParam && urlParam.startsWith('%2Fassets')) {
      const decodedUrl = decodeURIComponent(urlParam)
      const newUrl = `https://image.google.com${decodedUrl}`
      return NextResponse.redirect(newUrl)
    }
  }
  return NextResponse.next()
}
export const config = {
  matcher: '/_next/image',
}

[icyJoseph]

I'm trying this on Next 14.2.11 it doesn't work. Not able to intercept any requests that start with http://localhost:3000/_next/image?url=. It shows other requests in the console but nothing with next/image. Any suggestions? Here is what I have:

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

export function middleware(req: NextRequest): NextResponse {
  console.log('#### middleware.ts ####')

  const { pathname, searchParams } = req.nextUrl

  if (pathname.includes('/_next/image')) {
    const urlParam = searchParams.get('url')
    if (urlParam && urlParam.startsWith('%2Fassets')) {
      const decodedUrl = decodeURIComponent(urlParam)
      const newUrl = `https://image.google.com${decodedUrl}`
      return NextResponse.redirect(newUrl)
    }
  }
  return NextResponse.next()
}
export const config = {
  matcher: '/_next/image',
}

At the early 13 versions, this was broken. A PR fix is needed. For example:

• fix: _next/image intercepted by middleware #68271

[bestickley]

For anyone else reading this, it was fixed here: #75729