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*',
},

_"What is the right way to check wether Facebook crawler called the page?"_ - easiest way is to check the User Agent, https://developers.facebook.com/docs/sharing/webmasters/crawler — CBroe, Jul 15 '22 at 12:50
Does this answer your question: [Rewrites based on the user-agent in nextjs](https://stackoverflow.com/questions/69909029/rewrites-based-on-the-user-agent-in-nextjs)? — juliomalves, Jul 15 '22 at 17:41
@juliomalves, I tried with middleware also, but raised an other issue, do you have any idea? https://stackoverflow.com/questions/72998619/why-next-js-raise-only-in-production-router-external-target-handshake-error — János, Jul 15 '22 at 19:07

João Baraky · Answer 1 · 2023-02-15T11:37:14.997

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.

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

1 Answers1

Linked