How to url-rewrite based on host in Next.js?

Question

When Facebook scraper send request, I would return an AWS S3 image. How can I filter request and'rewrite' to AWS S3? I tried this in next.config.js:

async rewrites() {
        return [
            {
                source: '/:organizationShortId/:postId/:tempUserShortId/:imgId',
                has: [
                    {
                        type: 'host',
                        value: 'facebook.com',
                    },
                ],
                destination:
                    'https://t44-post-cover.s3.eu-central-1.amazonaws.com/:imgId-patch',
            },
        ]
    },

I tested without has field, it worked, but something wrong with has do you see maybe?

Fundamentals are here: https://nextjs.org/docs/api-reference/next.config.js/rewrites

How can I log with Vercel the incoing requests? I have LogDNA, that would be the msot conveninet send request there.

---

I also tried sort based on user agent, did not help, reqrite not activated

{
    type: 'header',
    key: 'User-Agent',
    value: 'facebook*',
},

tried this also, to test syntacs, because I am testing from Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

{
    type: 'header',
    key: 'User-Agent',
    value: '(?Mozilla.*)',
},

So how can I write this pattern matching expression, either for host or for user agent.

tried also, without success

{
    type: 'header',
    key: 'user-header',
    value: 'Mozilla*',
},

Answer 1

Now you can use the Next.js Middleware to handle it. You will have more freedom, since it's not just an object.

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  const externalUrl = 'https://t44-post-cover.s3.eu-central-1.amazonaws.com/'
  if (request.headers.get('user-agent').includes('mozilla'))
    return NextResponse.redirect(new URL(req.nextUrl.pathname, externalUrl))
}

// Matching Paths" below to learn more
export const config = {
  matcher: '/:organizationShortId/:postId/:tempUserShortId/:imgId',
}

You can take a look on nextjs docs about middleware and I've also wrote this medium article with some related content that might help.