Nextjs
What is a user agent, and how to use the user agent API in Nextjs?
Understand user agents with an example.
In simple terms, the user agent is a long string that contains information about the user’s machine. In other words, it represents the user, for example, which operating system, browsers, devices, engines, and CPU architecture are currently being used to access our services.
Based on that, you can redirect the user to a mobile website or desktop. Maybe you redirect the user to a software download page according to the user’s operating system. With that, we improve the user experience.
Most importantly, we prevent bad bots and web crawlers from accessing our website, adding an extra layer of protection to our application.
Nextjs provides a built-in user agent API that extends the Web Request API and provides additional properties and methods for working with the user agent.
By default, the user agent gives a long string that contains information about the user. But the problem is we can not work with plain string. It takes too much time to test managing and write code to retrieve the information related to our requirements.
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36To solve this issue, the Nextjs user agent API converts long strings to objects, allowing developers to work more quickly and freely with the user agent.
Nextjs user agent API converts the following string to an object.
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36Nextjs user agent API returns the following object with user information.
{"os":{"name":"Linux","version":"x86_64"},"cpu":{"architecture":"amd64"},"isBot":false,"ua":"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36","browser":{"name":"Chrome","version":"122.0.0.0","major":"122"},"device":{},"engine":{"name":"Blink","version":"122.0.0.0"}}How to work with a user agent in nextjs?
To work with a user agent in nextjs is a straightforward process. Nextjs provides an inbuilt user Agent API/Function that helps us.
// middleware.ts
import { NextResponse, userAgent } from 'next/server';
import type { NextRequest } from 'next/server'
export function middleware(request: NextRequest) {
const { os, cpu, isBot, ua, browser, device, engine } = userAgent(request)
if(os.name === "Linux"){
// redirect the user
} else{
// redirect the user
}
return NextResponse.next()
}Some developers think user agents API only works with nextjs middleware, but that is wrong. You can also use a user agent API inside the API Routes.
// app/api/user-agent/route.ts
import { userAgent } from "next/server"
import type { NextRequest } from "next/server"
export async function GET(request: NextRequest) {
const { os, cpu, isBot, ua, browser, device, engine } = userAgent(request)
return Response.json({ os, cpu, isBot, ua, browser, device, engine })
}Nextjs user agent API only works with APIs. You can not use that outside. For client-side components, I recommended using a ready-made reactjs hook library.
There are many libraries or packages available on the Internet that work with the user agent. Check out the list.
If it does not solve your problem, build your custom hook using the navigator web API.
Is the user Agent nextjs API effective for bot tracking?
Yes, The user agent nextjs API tracks a limited number of bots. The isbot library is better for advanced use cases.
How to test the user agent in localhost?
You can use the user-agent Chrome extension to test the user agent locally.
Conclusion
User-agent API is essential in terms of security. Lots of developers use User-agent API with middleware.
It helps when you work with a user agent in nextjs. This article shares what I learned when I worked recently with the user agent.
To learn more about frontend developers, reactjs, nextjs, and Linux stuff, follow the frontend web publication on Medium and other updates. You can also follow me on Twitter (X) and Medium.
