Wykrywanie urządzeń klienckich w Next.js 13

Czasami możesz potrzebować wiedzieć, gdzie jest uruchamiana Twoja aplikacja internetowa i jakiego rodzaju urządzenie jest do tego używane. Czy to komputer? czy to urządzenie mobilne? a nawet, jeśli jest to telefon komórkowy, jaki system operacyjny jest do tego używany, abyś mógł dostosować widoki i sprawić, by Twoja aplikacja wyglądała bardziej responsywnie lub wyeliminować niektóre funkcje, które nie będą działać na tym lub innym urządzeniu.

Napotkałem ten problem w jednej z moich aplikacji opracowanych w Next.js . Poszedłem więc sprawdzić w sieci. Było kilka bibliotek, których można do tego użyć, ale nie chciałem ich używać. Nie lubię zbytnio polegać na bibliotekach. Znalazłem również artykuł, który używa getInitialProps do uzyskania typu nurkowania, ponieważ jest to narzędzie SSR i zwraca dane w rekwizytach komponentu strony. To brzmiało świetnie .

Więc spróbowałem. Używałem Next.js 13 z funkcją src/app. Bez względu na to, jak bardzo się starałem i jak próbowałem. Nie byłem w stanie uruchomić tego czegoś. I po kilku godzinach kopania w google, a nawet na youtube, zauważyłem, że jest to zawsze zaimplementowane w starych stronach/komponencie, co oznaczało, że jest w starszej wersji Next.js .

Więc pomyślałem sobie , artykuł, który używał getInitialProps() używał nagłówków zwróconych w żądaniu strony, więc po co stosować to samo podejście? To doprowadziło mnie do odkrycia API nagłówków Next.js .

Interfejs API nagłówków Next.js

Zgodnie z definicją na stronie dokumentacji interfejsu API nagłówków Next.js funkcja headersumożliwia odczytywanie nagłówków przychodzących żądań HTTP z komponentu serwera.

Ponadto z tej samej strony internetowej ten interfejs API rozszerza interfejs API Web Headers . Jest tylko do odczytu , co oznacza, że ​​nie można set/ deletenagłówków żądań wychodzących. headers()jest funkcją dynamiczną , której zwracanych wartości nie można znać z wyprzedzeniem. Użycie go w układzie lub stronie spowoduje wybranie trasy do dynamicznego renderowania w czasie żądania.

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

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

Używam Visual Studio Code jako mojego edytora kodu i tak wygląda moja nowa aplikacja.

Otworzyłem src\app\page.tsx, czyli stronę główną i usunę rzeczy, których nie potrzebuję. Pójdę też do „src\app\globals.css” i usunę lub skomentuję wszystko. Nie chcemy, aby pojawiały się dziwne układy stron . Zasadniczo usunę wszystko i będę miał następujący kod:

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

Uruchommy więc aplikację za pomocą „npm run dev”, a następnie wywołajmy stronę w przeglądarce jako „http://localhost:3000”. To jest to, co spodziewamy się uzyskać.

Dodawanie funkcji nagłówków i korzystanie z API

Aby użyć funkcji nagłówków, musimy zaimportować ją z „next/headers”, więc zróbmy to.

import { headers } from 'next/headers';

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

Dodam poniższy kod:

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

Na podstawie powyższego kodu i wyników dostosuję trochę kod, aby sprawdzić, czy jest to urządzenie mobilne, czy nie.

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

Na komputerze strona będzie wyglądać tak.

Z telefonu komórkowego będzie to wyglądać tak.

Wspaniały. prawda?

Więcej o interfejsie API nagłówków

Rzućmy okiem na to, co zawiera obiekt API nagłówków. Użyję metody keys() obiektu, aby przejrzeć właściwości obiektu i wyświetlić je na ekranie.

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

Jeśli chcesz wiedzieć jeszcze więcej na ten temat, możesz przejść do strony dokumentacji interfejsu API nagłówków .

To tyle w tym temacie. Mam nadzieję, że było to dla Ciebie przydatne. Proszę, nie krępujcie się zostawiać komentarzy i proszę, nie zapomnijcie o oklaskach , a jeśli nie jesteście obserwatorami, miło będzie śledzić mnie na inne tematy i więcej nauki.

Dziękuję za przeczytanie…