การตรวจจับอุปกรณ์ไคลเอ็นต์ใน Next.js 13

บางครั้งคุณอาจจำเป็นต้องรู้ว่าเว็บแอปของคุณกำลังทำงานอยู่ที่ใด และอุปกรณ์ประเภทใดที่ใช้งานอยู่ มันเป็นพีซีหรือไม่? เป็นอุปกรณ์เคลื่อนที่หรือไม่ และแม้กระทั่งถ้าเป็นมือถือ จะใช้ OS ใดเพื่อปรับมุมมองและทำให้แอปของคุณดูตอบสนองมากขึ้น หรือตัดการทำงานบางอย่างที่จะใช้งานไม่ได้กับอุปกรณ์นี้หรืออีกเครื่องหนึ่ง

ฉันประสบปัญหานี้กับหนึ่งในแอปของฉันที่พัฒนาในNext.js ก็เลยไปเช็คในเน็ต มีห้องสมุดบางแห่งที่สามารถใช้ได้ แต่ฉันไม่ต้องการใช้ห้องสมุด ฉันไม่ชอบพึ่งพาห้องสมุดมากนัก นอกจากนี้ ฉันยังพบบทความที่ใช้ getInitialProps เพื่อรับประเภทการดำน้ำ เนื่องจากเป็นเครื่องมือ SSR และส่งคืนข้อมูลในส่วนประกอบของหน้า นั่นฟังดูดีมาก

ดังนั้นฉันจึงลอง ฉันใช้ Next.js 13 กับฟีเจอร์ src/app ไม่ว่าฉันจะพยายามแค่ไหนและพยายามแค่ไหน ฉันไม่สามารถทำให้สิ่งนี้ทำงานได้ และหลังจากขุดค้นใน Google และแม้แต่บน YouTube สองสามชั่วโมง ฉันสังเกตเห็นว่าสิ่งนี้ถูกนำมาใช้ในหน้า/คอมโพเนนต์เก่าเสมอ ซึ่งหมายความว่ามีอยู่ใน Next.js เวอร์ชันเก่า

ดังนั้นฉันจึงคิดกับตัวเอง บทความที่ใช้ getInitialProps() ใช้ส่วนหัวที่ส่งคืนในคำขอหน้า แล้วทำไมจึงใช้วิธีเดียวกัน นั่นทำให้ฉันค้นพบส่วนหัวของ Next.js API

API ส่วนหัว Next.js

ตามที่กำหนดไว้ใน หน้าเอกสารประกอบของ API ส่วนหัว Next.js ฟังก์ชัน นี้headersจะอนุญาตให้คุณอ่านส่วนหัวคำขอ HTTP ขาเข้าจากคอมโพเนนต์ของเซิร์ฟเวอร์

นอกจากนี้ จากหน้าเว็บเดียวกัน API นี้ยังขยายWeb Headers API เป็นแบบอ่านอย่างเดียวหมายความว่าคุณไม่สามารถset/ deleteส่วนหัวของคำขอขาออก headers()เป็นฟังก์ชันไดนามิกซึ่งไม่สามารถทราบค่าที่ส่งคืนล่วงหน้าได้ การใช้ในรูปแบบหรือหน้าจะเลือกเส้นทางไปสู่การแสดงผลแบบไดนามิกตามเวลาที่ร้องขอ

// the headers function is imported from 'next/headers'
import { headers } from 'next/headers';

npx create-next-app@latest next-headers --ts

ฉันใช้Visual Studio Codeเป็นตัวแก้ไขโค้ด และนี่คือหน้าตาของแอปใหม่ของฉัน

ฉันเปิด src\app\page.tsx ซึ่งเป็นหน้าหลักแล้ว และฉันจะลบสิ่งที่ฉันไม่ต้องการออก นอกจากนี้ ฉันจะไปที่ 'src\app\globals.css' และลบหรือแสดงความคิดเห็นทั้งหมด เราไม่ต้องการให้เค้าโครงหน้าแปลก ๆ ปรากฏ โดยพื้นฐานแล้วฉันจะลบทุกอย่างและจะมีรหัสต่อไปนี้:

export default function Home() {
  return (
    <div>
      <h1>Using Next.js headers API</h1>
    </div>
  )
}

ดังนั้น ให้เรียกใช้แอปโดยใช้ 'npm run dev' แล้วเรียกเพจในเบราว์เซอร์ว่า 'http://localhost:3000' นี่คือสิ่งที่เราคาดว่าจะได้รับ

การเพิ่มฟังก์ชันส่วนหัวและการใช้ API

หากต้องการใช้ฟังก์ชันส่วนหัว เราจำเป็นต้องนำเข้าจาก 'ถัดไป/ส่วนหัว' ดังนั้นมาดำเนินการกัน

import { headers } from 'next/headers';

export default function Home() {
  return (
    <div>
      <h1>Using Next.js headers API</h1>
    </div>
  )
}

ฉันจะเพิ่มรหัสด้านล่าง:

const headersList = headers();

// Get the user-agent property value and assign it to a constant
const userAgent = headersList.get('user-agent');

import { headers } from 'next/headers';

export default function Home() {
  
  // call the function and assign the headers to a constant
  const headersList = headers();
  const userAgent = headersList.get('user-agent');

  return (
    <div>
      <h1>Using Next.js headers API</h1>
      <h2>{`Device details: ${userAgent}`}</h2>
    </div>
  )
}

จากโค้ดและผลลัพธ์ข้างต้น ผมจะปรับโค้ดเล็กน้อยเพื่อตรวจสอบว่าเป็นที่มือถือหรือไม่

import { headers } from 'next/headers';

export default function Home() {
  
  // call the function and assign the headers to a constant
  const headersList = headers();
  const userAgent = headersList.get('user-agent');

  // Let's check if the device is a mobile device
  let isMobileView = userAgent!.match(
    /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
  );

  console.log('User agent: ', userAgent);
  // headersList.forEach((value, key) => {
  //   console.log(`${key} ==> ${value}`);
  // }); 

  return (
    <div>
      <h1>Using Next.js headers API</h1>
      <h2>{isMobileView ? 'You are using a mobile device.' : 'You are using a PC.'}</h2>
    </div>
  )
}

จาก PC หน้าตาจะเป็นแบบนี้

จากมือถือก็จะประมาณนี้ครับ

สุดยอด. ไม่ใช่เหรอ?

เพิ่มเติมเกี่ยวกับ API ส่วนหัว

มาดูกันว่าวัตถุ API ส่วนหัวประกอบด้วยอะไรบ้าง ฉันจะใช้เมธอดของคีย์ () ของวัตถุเพื่อวนซ้ำคุณสมบัติของวัตถุและจะแสดงบนหน้าจอ

import { headers } from 'next/headers';

export default function Home() {
  
  // call the function and assign the headers to a constant
  const headersList = headers();
  const userAgent = headersList.get('user-agent');

  // 
  let isMobileView = userAgent!.match(
    /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
  );

  console.log('User agent: ', userAgent);

  return (
    <div>
      <h1>Using Next.js headers API</h1>
      <h2>{isMobileView ? 'You are using a mobile device.' : 'You are using a PC.'}</h2>
      {
        // create an array from the iterable returned by the keys() method
        // and use the map() methode to return ReactNode objects 
        // to display on the page.
        Array.from(headersList.keys()).map((key: string) => {
          return <h3>{`${key}: ${headersList.get(key)}`}</h3>;
        })
      }
    </div>
  )
}

หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ คุณสามารถไปที่หน้าเอกสารประกอบ API ของส่วนหัว

เพียงเท่านี้สำหรับหัวข้อนี้ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ โปรดอย่าลังเลที่จะแสดงความคิดเห็น และโปรดอย่าลืมปรบมือ และหากคุณไม่ใช่ผู้ติดตาม จะเป็นการดีหากติดตามฉันสำหรับวิชาอื่นๆ และการเรียนรู้เพิ่มเติม

ขอบคุณสำหรับการอ่านของคุณ…