5

The nextjs page /users/[userid] is statically rendered on build time in the vercel platform. Is there anyway to serve two different versions of that page through some configuration on vercel or nextjs according to the user-agent (device-type) ? (while keeping it static)

A mobile user requesting example.com/users/userid getting a different static page than the desktop user requesting the same path.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Ismael
  • 358
  • 3
  • 15
  • the context object can give you access to the user-agent header: https://nextjs.org/docs/api-reference/data-fetching/getInitialProps#context-object – 0xedb Feb 11 '21 at 01:52

1 Answers1

6

At the moment, this is not available. However, we are working on an update that should make it possible.

Stay tuned for updates on both the Vercel platform and Next.js.

EDIT: This is now possible with the use of the "has" property and "rewrites":

// next.config.js
module.exports = {
  async rewrites() {
    return {
      beforeFiles: [
        {
          source: '/some-page',
          destination: '/somewhere-else',
          has: [{
            type: 'header', 
            key: 'user-header',
            value: 'insert-regex-here'
          }],
        },
      ],
      // ...
    }
  },
}

EDIT2: This is now even easier with the use of Edge Middleware

paulogdm
  • 1,572
  • 14
  • 20
  • sweet! thanks for the info. Would you by any chance be able to disclose a very rough estimated timeline for this feature ? Just trying to gauge wether it's worth building an interim solution or not... – Ismael Feb 17 '21 at 18:18
  • 1
    I cannot. But you should give the team at least 7d – paulogdm Feb 17 '21 at 23:34
  • Updated the original comment to include Edge Middleware. It is a great option for this case! – paulogdm May 27 '22 at 20:32
  • Why `user-header` and not `User-Agent`? Anyway it does not work. Would you check? https://stackoverflow.com/questions/71968407/how-to-url-rewrite-based-on-host-in-next-js – János Jul 15 '22 at 17:36
  • Certainly. I believe the answer would also be better by using Edge Functions. Will do that soon. – paulogdm Jul 16 '22 at 18:12