Next.js Discord

Discord Forum

Image component error with middleware

Unanswered
Ichneumonid wasp posted this in #help-forum
Open in Discord
Ichneumonid waspOP
I've got an API endpoint to serve images and other files. A middleware checks the user's permissions to authorize or deny the access.
Now, when an image loads in the Image component (without the unoptimized property), the middleware won't let it get the image so it will cache the fallback picture.
Is there a way for the Image component to skip the middleware?

3 Replies

aren't your api endpoints excluded from the middleware?
Next docs teach us to exclude the api routes: https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher

    /*
     * Match all request paths except for the ones starting with:


     * - api (API routes)


     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
@Ichneumonid wasp does this information helped you?