1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

1人フロントエンドAdvent Calendar 2024

Day 22

Next.jsが提供するuserAgentでユーザーの情報を取得する

Posted at

Next.jsにはuserAgentを用いて、リクエストからユーザーエージェントを獲得する方法が提供されています。

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

export function middleware(request: Request) {
  const ua = userAgent(request);
  console.log(ua);
  ...
  return NextResponse.next();
}

Route Handlermiddlewareの引数のrequestnext/serverが提供するuserAgentで囲むとユーザーエージェントについての情報を取得できます。

取得した値からは7種類の情報を読み取れます。いずれもrequest.headers.get('user-agent')の情報を利用して獲得しています。

1つ目はisBotです。リクエストが既知のBotによるものかを確認します。
Next.jsのバージョン15.1.0の段階では以下のものを検知します。

GooglebotMediapartners-GoogleAdsBot-GooglegoogleweblightStorebot-GoogleGoogle-PageRendererGoogle-InspectionToolBingbotBingPreviewSlurpDuckDuckBotbaiduspideryandexsogouLinkedInBotbitlybotumblrvkSharequora link previewfacebookexternalhitfacebookcatalogTwitterbotapplebotredditbotSlackbotDiscordbotWhatsAppSkypeUriPreviewia_archiver

isBotはNext.jsが独自に実装していまが、それ以外の情報はua-parser-jsを用いています。

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

export function middleware(request: Request) {
  const ua = userAgent(request);
  // true or false
  console.log(ua.isBot);
  ...
  return NextResponse.next();
}

2つ目はuaです。request.headers.get('user-agent')と同じ情報をそのまま渡します。

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

export function middleware(request: Request) {
  const ua = userAgent(request);
  // 例: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
  console.log(ua.ua);
  ...
  return NextResponse.next();
}

3つ目はbrowserです。オブジェクトでブラウザ名とバージョン、メジャーバージョンを返します。

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

export function middleware(request: Request) {
  const ua = userAgent(request);
  // 例: { name: 'Chrome', version: '131.0.0.0', major: '131' }
  console.log(ua.browser);
  ...
  return NextResponse.next();
}

4つ目はdeviceです。デバイスの情報をベンダーとモデル、種類に分けて提供します。
ベンダーはAppleとかSonyGoogleTeslaなどの情報です。
種類はゲーム機等を意味するconsoleiPad等を意味するtabletiPhoneGalaxyなどを意味するmobile等の情報です。PCに値するものはないようです。

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

export function middleware(request: Request) {
  const ua = userAgent(request);
  // 例: { vendor: 'Apple', model: 'Macintosh', type: undefined }
  console.log(ua.device);
  ...
  return NextResponse.next();
}

5つ目はengineです。エンジンはレンダリングエンジン名とバージョンを返します。
エンジン名とはWebKitGeckoなどです。

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

export function middleware(request: Request) {
  const ua = userAgent(request);
  // 例: { name: 'Blink', version: '131.0.0.0' }
  console.log(ua.engine);
  ...
  return NextResponse.next();
}

6つ目はosです。osの名前を種類を返します。

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

export function middleware(request: Request) {
  const ua = userAgent(request);
  // 例: { name: 'Mac OS', version: '10.15.7' }
  console.log(ua.os);
  ...
  return NextResponse.next();
}

7つ目はcpuです。CPUのアーキテクチャを返します。architectureだけをキーに持ちます。arm64 Intel x86を使っている場合はia32のように返します。
Apple製品はarm64くらいしか対応していないかも知れません(手元にあるiPhone15・M2チップのMacBook Air・Intel MacBookPro・数年前のiPad Proで試しましたところM2チップのMacBook Airだけ動きました)。

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

export function middleware(request: Request) {
  const ua = userAgent(request);
  // 例: { architecture: undefined }
  console.log(ua.cpu);
  ...
  return NextResponse.next();
}

以上がuserAgentで確認できることです。内部での依存はありますが、開発に利用するパッケージが他のライブラリに依存することなくユーザーの情報を取得できるのは嬉しいです。

これを用いることで、環境によって異なるサービスを提供することができますが、それは良い行いではありません。できる限り機能をベースに提供する内容を変更しましょう。
詳しくはMDNのユーザーエージェント文字列を用いたブラウザーの判定を読んでください。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?