Personalization & A/B Tests with Next.js Edge Middleware

Technical Questions
1

Thanks for a great talk on Next.js Conf about Personalization and Edge Middleware (unfortunately it’s unlisted) and for this stream about Edge with Vercel and Builder:

Our main question is:
Is it possible to use Next.js Edge Middleware outside of Vercel Edge Network?
If yes, can you share any examples, links, articles, docs on how to do this?

We currently run Next.js 12 App with Builder.io and Custom build components.
The App runs on GCP Cloud Run.

We would like to add personalization (Builder custom targeting with user-specific data, like isAuthenticated, isClubMember) and Builder A/B testing.

But we don’t want to use SSR to get user data on the server (we use Static and ISR for performance). AFAIK we can use Edge Middleware to get user-specific data before the request will reach our App and manipulate the request in a way that will allow our App to serve a specific version of the page to specific users, for example by running:

builder.setUserAttributes({
    isLoggedInUser: true
  });

We have found your example on github:

And some examples from Next.js:

But I can’t find information if it’s possible to run Edge Middleware on GCP or to use Vercel’s Edge Network for Edge Middleware but keep our app on GCP.
All articles and examples are about deploying it on Vercel.

I have found a tweet about running Edge Middleware on CloudFlare and this article about Netlify’s Next.js Advanced Middleware: Next.js Advanced Middleware: On the better runtime by Netlify

So I guess if it’s possible on CloudFlare and Netlify it should be also possible on GCP. But can’t find any details :slight_smile:

All help is highly appreciated!

Lucas

2

Hi @LucasMatuszewski thank you for reaching out! The short answer is I believe no, you cannot use edge middlewear outside of Vercel.

You can see documentation on middlewear limitations here:

And here:

But there might be work arounds or other ways to achieve this…but to be honest I think Vercel would probably be more likely able to help you with that. Have you reached out or spoken to anyone on their support teams?

3

Sorry, I have mixed names…

  • Next.js has a Middleware function run before the request reaches the app,
  • Edge Middleware is a brand name of a Vercel service that runs Next.js middleware functions on the Edge Network.

In most of the examples, articles, and on Next.js Conf “Edge Middleware” name is used and this probably made me confused :wink:

Now I know that Next.js app together with the middleware function can be deployed anywhere. We have deployed it on Google Cloud Run and it works.

Of course, I understand that keeping middleware together with our App in the normal Docker container is not best for performance, so Vercel Edge Middleware could boost our performance.

1 Like