^{Quickstarts > Using Express / Next.js}

Using Express / Next.js

Express and Next.js provide access to incoming request headers on the server. UAParser.js can parse these headers to identify the browser, OS, device, and other client details.

Installation

Install the required packages using npm:

Express

$ npm install express ua-parser-js

Next.js

$ npm install ua-parser-js

Usage

Pass the incoming request headers to UAParser.js:

Express

import express from 'express';
import { UAParser } from 'ua-parser-js';

const app = express();

app.get('/', (req, res) => {
    const { browser, device } = UAParser(req.headers);
    const isMobile = device.is('mobile');

    res.send(
        `${isMobile ? 'Mobile' : 'Desktop'} visitor using ${browser.name}`
    );
});

app.listen(3000, () => {
    console.log('Server running at http://localhost:3000');
});

Next.js

import { headers } from 'next/headers';
import { UAParser } from 'ua-parser-js';

export default async function Page() {
    const requestHeaders = await headers();
    const { browser, device } = UAParser(requestHeaders);
    const isMobile = device.is('mobile');

    return (
        <p>
            {isMobile ? 'Mobile' : 'Desktop'} visitor using {browser.name}
        </p>
    );
}

TIP

UAParser.js reads the User-Agent and available Sec-CH-UA-* headers from the request headers.

WARNING

headers() is asynchronous in Next.js 15 and later. In Next.js 14 and earlier, omit async and await. Reading headers makes the page dynamically rendered.

References

• Express request API🡥
• Next.js headers() API🡥