Next.js 13 में क्लाइंट डिवाइस डिटेक्शन

कभी-कभी आपको यह जानने की आवश्यकता हो सकती है कि आपका वेब ऐप कहाँ चलाया जा रहा है, और उसके लिए किस प्रकार के उपकरण का उपयोग किया जा रहा है। क्या यह एक पीसी है? क्या यह एक मोबाइल डिवाइस है? और यहां तक ​​कि, यदि यह एक मोबाइल है, तो उसके लिए किस OS का उपयोग किया जा रहा है ताकि आप दृश्यों को समायोजित कर सकें और अपने ऐप को अधिक प्रतिक्रियाशील बना सकें या कुछ कार्यक्षमता को समाप्त कर सकें जो इस डिवाइस या अन्य पर काम नहीं करेगा।

Next.js में विकसित मेरे एक ऐप के साथ मुझे इस समस्या का सामना करना पड़ा । इसलिए, मैं नेट पर चेक करने गया। कुछ पुस्तकालय थे जिनका उपयोग उसके लिए किया जा सकता था, लेकिन मैं पुस्तकालयों का उपयोग नहीं करना चाहता था। मुझे पुस्तकालयों पर ज्यादा निर्भर रहना पसंद नहीं है। साथ ही, मुझे एक आलेख मिला जो डाइव प्रकार प्राप्त करने के लिए getInitialProps का उपयोग करता है, क्योंकि यह एक एसएसआर उपकरण है और यह पृष्ठ घटक प्रोप में डेटा लौटाता है। बहुत अच्छा लगा ।

तो, मैंने इसे आजमाया। मैं src/app फीचर के साथ Next.js 13 का इस्तेमाल कर रहा था। कोई फर्क नहीं पड़ता कि मैंने कितनी कोशिश की और कैसे कोशिश की। मैं इस चीज़ को काम करने में सक्षम नहीं था। और कुछ घंटों की खुदाई के बाद Google और यहां तक ​​​​कि यूट्यूब पर, मैंने देखा कि यह हमेशा पुराने पृष्ठों/घटक में लागू होता है, जिसका मतलब है कि यह पुराने संस्करण Next.js में है।

तो, मैंने खुद से सोचा , लेख जो getInitialProps() का उपयोग करता है, पृष्ठ अनुरोध में लौटाए गए शीर्षलेखों का उपयोग करता है, तो उसी दृष्टिकोण का उपयोग क्यों करें? इससे मुझे नेक्स्ट.जेएस के हेडर एपीआई की खोज करने में मदद मिली।

Next.js हेडर एपीआई

जैसा कि Next.js हेडर एपीआई प्रलेखन पृष्ठ में परिभाषित किया गया है , headersफ़ंक्शन आपको सर्वर घटक से आने वाले HTTP इनकमिंग हेडर को पढ़ने की अनुमति देता है।

साथ ही, उसी वेबपृष्ठ से, यह एपीआई वेब हेडर एपीआई को विस्तारित करता है । यह केवल पढ़ने के लिए है , जिसका अर्थ है कि आप आउटगोइंग अनुरोध शीर्षलेख setनहीं कर सकते हैं। एक डायनेमिक फंक्शन है जिसके रिटर्न वैल्यू को समय से पहले नहीं जाना जा सकता है। किसी लेआउट या पृष्ठ में इसका उपयोग अनुरोध समय पर गतिशील प्रतिपादन में मार्ग का चयन करेगा ।deleteheaders()

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

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

मैं अपने कोड संपादक के रूप में विजुअल स्टूडियो कोड का उपयोग कर रहा हूं और मेरा नया ऐप इस तरह दिखता है।

मैंने 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: // लोकलहोस्ट: 3000' कहते हैं। यही हम पाने की उम्मीद करते हैं।

हेडर फ़ंक्शन जोड़ना और एपीआई का उपयोग करना

हेडर फ़ंक्शन का उपयोग करने के लिए, हमें इसे 'अगली/हेडर' से आयात करने की आवश्यकता है, तो चलिए इसे करते हैं।

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

एक पीसी से पेज इस तरह दिखेगा।

मोबाइल से ऐसा दिखेगा।

बहुत बढ़िया। यही है ना

हेडर एपीआई के बारे में अधिक

आइए देखें कि हेडर एपीआई ऑब्जेक्ट में क्या है। मैं ऑब्जेक्ट के गुणों के माध्यम से पुनरावृति करने के लिए ऑब्जेक्ट की कुंजियों () विधि का उपयोग करूँगा और उन्हें स्क्रीन पर प्रदर्शित करूँगा।

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

यदि आप इसके बारे में और जानना चाहते हैं, तो आप हेडर्स एपीआई प्रलेखन पृष्ठ पर जा सकते हैं।

इस विषय के लिए बस इतना ही। मुझे आशा है कि यह आपके लिए उपयोगी था। कृपया, टिप्पणियों को छोड़ने के लिए स्वतंत्र महसूस करें और, कृपया, ताली को न भूलें, और यदि आप अनुयायी नहीं हैं, तो अन्य विषयों और अधिक सीखने के लिए मुझे फॉलो करना अच्छा होगा।

आपके पढ़ने के लिए धन्यवाद…