Next.jsでiOS・Android・PCを正確に判定する方法｜User-Agentの落とし穴と実務での使い分け

# iPhoneの場合
Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 ...

# Androidの場合
Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 ...

# PCの場合（macOS Chrome）
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 ...

import { headers } from "next/headers";

// デバイス判定ユーティリティ
function getDeviceType(userAgent: string): "ios" | "android" | "web" {
  if (/iPhone|iPod/.test(userAgent)) return "ios";
  if (/Android/.test(userAgent)) return "android";
  return "web";
}

export default async function Page() {
  const headersList = await headers();
  const ua = headersList.get("user-agent") ?? "";
  const device = getDeviceType(ua);

  return (
    <div>
      <p>あなたのデバイス: {device}</p>
      {device === "ios" && (
        <a href="https://apps.apple.com/app/xxx">App Storeで開く</a>
      )}
      {device === "android" && (
        <a href="https://play.google.com/store/apps/details?id=xxx">
          Google Playで開く
        </a>
      )}
    </div>
  );
}

// middleware.ts（プロジェクトルートに配置）
import { NextRequest, NextResponse } from "next/server";

export function middleware(request: NextRequest) {
  // /app ページへのアクセスのみ対象
  const ua = request.headers.get("user-agent") ?? "";

  if (/iPhone|iPod/.test(ua)) {
    return NextResponse.redirect(
      "https://apps.apple.com/app/your-app-id"
    );
  }

  if (/Android/.test(ua)) {
    return NextResponse.redirect(
      "https://play.google.com/store/apps/details?id=your.app.id"
    );
  }

  // PC / その他はそのまま表示
  return NextResponse.next();
}

export const config = {
  matcher: ["/app/:path*"], // 特定パスのみに適用
};

// lib/device.ts

export type DeviceType = "ios" | "android" | "tablet" | "web";

export function getDeviceType(userAgent: string): DeviceType {
  const ua = userAgent.toLowerCase();

  // iPadの判定（後述の落とし穴を参照）
  if (/ipad/.test(ua)) return "tablet";

  // iPhoneの判定
  if (/iphone|ipod/.test(ua)) return "ios";

  // Androidタブレットの判定（"Android" を含むが "Mobile" を含まない）
  if (/android/.test(ua) && !/mobile/.test(ua)) return "tablet";

  // Androidスマホの判定
  if (/android/.test(ua)) return "android";

  return "web";
}

# iPadOS 13以降のUA（macOSと区別がつかない！）
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 ...

// Client Component側で判定する場合
function isIPad(): boolean {
  return (
    navigator.userAgent.includes("Macintosh") &&
    "ontouchend" in document
  );
}

// Botを除外する判定を追加
function isBot(ua: string): boolean {
  return /Googlebot|bingbot|Slurp|DuckDuckBot|Baiduspider|YandexBot|facebookexternalhit|Twitterbot/i.test(ua);
}

export function middleware(request: NextRequest) {
  const ua = request.headers.get("user-agent") ?? "";

  // Botはリダイレクトしない
  if (isBot(ua)) return NextResponse.next();

  // 以下、通常のデバイス判定...
}

// Client Hints の利用例（Middleware）
export function middleware(request: NextRequest) {
  const platform = request.headers.get("sec-ch-ua-platform"); // "Android", "iOS", "macOS" 等
  const isMobile = request.headers.get("sec-ch-ua-mobile");   // "?1" or "?0"

  // Chrome/Edge系でのみ取得可能
  if (platform && isMobile) {
    // 構造化データで正確に判定できる
  }
}