Next.js: Experimental rewrites don't work on iOS devices

Created on 2 Jun 2020 · 4Comments · Source: vercel/next.js

Bug report

Describe the bug

The new experimental feature of rewrites messes up on iOS devices.

Given this rewrite domain.tld/a to other.tld/path/to.
If consumed with a laptop, Android, _et altri_ it redirects correctly.
If consumed with iOS (iPhone/iPad) it redirects to domain.tld/path/to (mixes the domain and pathname).

To Reproduce

Rewrites are here
Go to https://sospedra.me/r/rjpr with a laptop (you're gonna end up in Spotify)
Go to the same address with an iOS device (you're gonna end up in a nextjs 404)

Expected behaviour

It should redirect properly regarding the OS.

Additional context

I assume this has something to do with Vercel's machinery because it works great in yarn dev and yarn start. It only goes crazy when deployed.

needs investigation

Source

sospedra

👍1

Most helpful comment

@sospedra you can create a redirect in a similar way to how you are adding the rewrites in your next.config.js e.g.

module.exports = {
  experimental: {
    async redirects() {
      return [
        {
          source: '/r/rjpr',
          destination: 'https://open.spotify.com/playlist/26NYRcXPyIVrItOtlJ5ahO',
          permanent: false
        }
      ]
    }
  }
}

ijjk on 14 Jun 2020

👍2

All 4 comments

Hi, this appears to be due to the handling of the resource you are rewriting to and not from the rewrites feature itself. You are rewriting to Spotify which attempts to handle the link differently on iOS in production.

This should be a redirect instead of a rewrite to ensure the resource you are pointing the user to can work as expected.

I'm going to close this since it doesn't appear to be a bug in Next.js/Vercel, if this seems incorrect feel free to reply with additional info and we can look into it further

ijjk on 12 Jun 2020

I see what you mean @ijjk
Thanks for the analysis and reply.

I understand the issue is closed now, but may I ask if there's any way to do the redirect within the context of Vercel nextjs/now?🤔

Ty again

sospedra on 13 Jun 2020

@sospedra you can create a redirect in a similar way to how you are adding the rewrites in your next.config.js e.g.

module.exports = {
  experimental: {
    async redirects() {
      return [
        {
          source: '/r/rjpr',
          destination: 'https://open.spotify.com/playlist/26NYRcXPyIVrItOtlJ5ahO',
          permanent: false
        }
      ]
    }
  }
}

ijjk on 14 Jun 2020

👍2

Damn boy! Didn't know about rewrites/redirects
Super appreciated @ijjk that works like a charm ☺️

sospedra on 15 Jun 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings