Is it possible to serve different versions of a static page with nextjs on vercel according to useragent (device type)?

user_11401702 0
Viewed 512

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.

vercel next.js reactjs
1 Answers

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

user_26656550
Related