Next.config.js redirects works correctly on local and Vercel, but not on Netlify

Support
,
1

I config my my next.config.js to redirect url if the query param fbclid or the header referer is present.
My Next.js site redirects correctly on localhost and vercel, but doesn’t redirect at all if deployed on Netlify.
I do not have a netlify.toml in the root dir or _redirects in public folder.
Do I miss something, or Netlify Next.js Runtime having a bug at the moment?

My repo: GitHub - ducbao414/cms-wordpress-app at swifty-dragon
My Netlify site: https://roaring-empanada-f826a3.netlify.app/

Here’s the same site deployed on Vercel. with all the redirections work correctly.
You can test it by appending ?fbclid=anyvalue to a post url or post the post url on facebook and click on.
Here are my next.config.js redirects.

async redirects() {
    return [
      {
        source: '/posts/:path*',
        has: [
          {
            type: 'query',
            key: 'fbclid'
          }
        ],
        destination: 'https://swiftydragon.com/posts/:path*',
        permanent: false,
      },
      {
        source: '/posts/:path*',
        has: [
          {
            type: 'header',
            key: 'referer',
          }
        ],
        destination: 'https://swiftydragon.com/posts/:path*',
        permanent: false,
      },
    ]
  }
2

@ducbao414 Have you read this documentation?

3

Thanks for your quick response.
Yes, I did read the guide. My redirections need to rely on whether the referer header is present, so I think netlify.toml and _redirects are out of the options. Need to use next.config.js redirects.
The netlify.toml redirect has a conditions option, but only supports for Country, Role, Cookie, therefore I don’t think I can use it.

4

Excellent, just making sure you were aware that there is documentation that’s specifically related to that feature.

There’s this recent-ish issue related to redirects, not sure if it applies to your situation:

5

Thanks. I did read the thread. It seems the user was using _redirects file but did not put it in the public folder, so the redirection didn’t work.
In contrast to my issue, I’m not using netlify.toml or _redirects file (cause these things don’t support conditional redirection based on headers).
Instead, I’m using next.config.js, which is supposed to work under the recent Netlify Nextjs Runtime. But it doesn’t. My deployment on Vercel worked out of the box. Wonder whether I missed something on Netlify or there’s currently a bug with Netlify Nextjs Runtime.

6

Here’s the same site deployed on Vercel. with all the redirections work correctly.
You can test it by appending ?fbclid=anyvalue to a post url or post the post url on facebook and click on.

Steps to reproduce

I apologize, but the issue can’t be reproduced consistently. It happens intermittently. Sometimes it redirects correctly, the other times it doesn’t.

Example (if the below post url redirection worked at the time you try, please use other post urls):
https://roaring-empanada-f826a3.netlify.app/posts/expedita-aut-autem-ab-repellendus?fbclid=anyvalue

Expected behaviour: since the link includes a fbclid query param, it should be redirected to https://swiftydragon.com/posts/expedita-aut-autem-ab-repellendus?fbclid=anyvalue

7

Sorry to be rude, but there are many issues with Nextjs on Netlify. Should just use Vercel instead. Deployments on Vercel work out of the box.
Also, the email support is nonexistent despite being on Pro plan. I did send an email request but there’s no response.

8

@ducbao414 Since Vercel create Next I think you’ll find that Netlify will always be playing a bit of catch up with it.

It may even be part of the reason why Netlify have acquired Gatsby, whereby they could cause the same dynamic with their competitors.

Support wise the last I heard from Netlify they consider the non-enterprise plans to be largely self-service “hobbyist” plans, which I posted about here:

9

Thanks for the info.
Been using DigitalOcean, Vultr, and CloudfFlare for years so I completely understand the part about self-serving.
I’ve just found it’s kind of misleading that Netlify includes the ‘email support’ feature as a selling point for Pro plan compared with the free plan, when in reality, there’s no response time guaranteed. It seems like an unscrupulous selling tactic.

Grateful for your help. Without valued community members like you, I would ditch Netlify on Day 1.

11

Hi @ducbao414,

I believe I have narrowed down the issue, but just want to run this by the devs before I post about it. We’ll let you know once we have more info.

I’m closing your helpdesk ticket in favour of this thread.

12

As confirmed with the devs, this is currently not possible. This is because Next.js ISR uses Netlify On Demand Builders under-the-hood and they don’t provide access to Query Parameters or Request Headers.

An alternative would be to use Next.js Middleware for this, as that runs on Netlify Edge Functions. You can also use Edge Functions directly, by the way, but if you wish to keep your app in the Next.js context, middleware would be the best option.

13

Thanks for the explanation. Appreciate.