Did they tell you about userAgent in NextJS?

I just discovered it today and will try it while writing about it.

Photo by Denny Müller on Unsplash

Last week, I decided to dive into NextJS and build my skills around it.

While learning, I’m also simplifying concepts by writing Medium stories to share my experience.

This is especially helpful if you’re new to this framework and want to learn more about it.

Today, I discovered that NextJS has a feature related to user agents.

But before we discuss how NextJS handles user agents, let’s start with the basics:

Do you know what a user agent is in web development?

What’s a user agent?

From MDN:

The User-Agent request header is a characteristic string that lets servers and network peers identify the application, operating system, vendor, and/or version of the requesting user agent.

When we make a GET request we send information within the request header so the server can tailor the response.

This is an example of an HTTP message showing a request header:

GET /home.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/testpage.html
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0

If you look at line 3, you’ll see a property called User-Agent. This contains information about the browser and the device.

Now, let’s explore how NextJS handles user agents.

NextJS enhances this functionality by providing a helper function called userAgent. This function offers us additional properties:

1. Browser
2. CPU
3. Device
4. Engine
5. isBot
6. OS
7. UA

Let’s create a basic Nextjs API:

Basic NextJS API

In this API route, we wrap the request with the userAgent function, then send the user agent information.

On our Home page, we define a function called getData that calls this API and returns the data:

Calling the API

But!

Undefined resutls!

Did you figure out why we don’t have information?

Since we’re working with a Server Component in a Node.js environment, this information is only available if we make the request from a client component:

Converting the Home page to client component

Now, we have what we need:

Because we need this information for all the requests, we will use NextJS middleware

import { NextRequest, NextResponse, userAgent } from 'next/server'

export function middleware(request: NextRequest) {
  const url = request.nextUrl
  const { device } = userAgent(request)
  const viewport = device.type === 'mobile' ? 'mobile' : 'desktop'
  url.searchParams.set('viewport', viewport)
  return NextResponse.rewrite(url)
}

Before your leave

Thank you for your reading, if you have questions, please ask without hesitation, and I’ll answer them with pleasure.