Deteksi Perangkat Klien di Next.js 13

Terkadang Anda mungkin perlu mengetahui di mana aplikasi web Anda dijalankan, dan jenis perangkat apa yang digunakan untuk itu. Apakah ini komputer? apakah itu perangkat seluler? dan bahkan, jika itu ponsel, OS apa yang digunakan untuk itu sehingga Anda dapat menyesuaikan tampilan dan membuat aplikasi Anda terlihat lebih responsif atau menghilangkan beberapa fungsi yang tidak akan berfungsi di perangkat ini atau perangkat lainnya.

Saya menghadapi masalah ini dengan salah satu aplikasi saya yang dikembangkan di Next.js . Jadi, saya pergi memeriksa di internet. Ada beberapa perpustakaan yang bisa digunakan untuk itu, tapi saya tidak ingin menggunakan perpustakaan. Saya tidak suka terlalu bergantung pada perpustakaan. Selain itu, saya menemukan sebuah artikel yang menggunakan getInitialProps untuk mendapatkan tipe dives, karena ini adalah alat SSR dan mengembalikan data dalam props komponen halaman. Kedengarannya bagus .

Jadi, saya mencobanya. Saya menggunakan Next.js 13 dengan fitur src/app. Tidak peduli berapa banyak saya mencoba dan bagaimana saya mencobanya. Saya tidak bisa membuat benda ini berfungsi. Dan setelah beberapa jam menggali di google dan bahkan di youtube, saya perhatikan bahwa ini selalu diterapkan di halaman/ komponen lama, yang artinya, di Next.js versi lama .

Jadi, saya berpikir sendiri , artikel yang menggunakan getInitialProps() menggunakan header yang dikembalikan dalam permintaan halaman, jadi mengapa menggunakan pendekatan yang sama? Itu membuat saya menemukan API header Next.js .

Next.js header API

Sebagaimana didefinisikan dalam halaman dokumentasi Next.js header API , headersfungsi ini memungkinkan Anda membaca header permintaan masuk HTTP dari komponen server.

Selain itu, dari halaman web yang sama, API ini memperluas Web Headers API . Ini hanya-baca , artinya Anda tidak dapat set/ deleteheader permintaan keluar. headers()adalah Fungsi Dinamis yang nilai yang dikembalikan tidak dapat diketahui sebelumnya. Menggunakannya dalam tata letak atau halaman akan memilih rute ke perenderan dinamis pada waktu permintaan.

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

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

Saya menggunakan Visual Studio Code sebagai editor kode saya dan seperti inilah tampilan aplikasi baru saya.

Saya telah membuka src\app\page.tsx, yang merupakan halaman utama dan saya akan menghapus hal-hal yang tidak saya perlukan. Juga, saya akan membuka 'src\app\globals.css' dan menghapus atau mengomentari semuanya. Kami tidak ingin tata letak halaman yang aneh muncul . Jadi, pada dasarnya, saya akan menghapus semuanya dan akan memiliki kode berikut:

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

Jadi, mari jalankan aplikasi menggunakan 'npm run dev' lalu panggil halaman di browser sebagai 'http://localhost:3000'. Inilah yang kami harapkan untuk didapatkan.

Menambahkan fungsi header dan menggunakan API

Untuk menggunakan fungsi headers, kita perlu mengimpornya dari 'next/headers', jadi mari kita lakukan.

import { headers } from 'next/headers';

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

Saya akan menambahkan kode di bawah ini:

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>
  )
}

Dari kode dan hasil di atas, saya akan menyesuaikan sedikit kode untuk memeriksa apakah itu perangkat seluler atau bukan.

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>
  )
}

Dari PC, halaman akan terlihat seperti ini.

Dari ponsel, akan terlihat seperti ini.

Luar biasa. Bukan?

Lebih lanjut tentang API header

Mari kita lihat isi objek headers API. Saya akan menggunakan metode keys() objek untuk mengulangi properti objek dan akan menampilkannya di layar.

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>
  )
}

Jika Anda ingin tahu lebih banyak tentang ini, Anda bisa membuka halaman dokumentasi API header .

Itu saja untuk subjek ini. Saya harap ini bermanfaat bagi Anda. Tolong, jangan ragu untuk meninggalkan komentar dan, tolong, jangan lupa tepuk tangan , dan jika Anda bukan pengikut, alangkah baiknya mengikuti saya untuk mata pelajaran lain dan lebih banyak pembelajaran.

Terima kasih telah membaca…