Next.js में एएमपी को इस्तेमाल करने का तरीका

Next.js ऐप्लिकेशन में एएमपी जोड़ने के दो तरीके आज़माएं

हुसैन जिरदेह

आपको क्या सीखने को मिलेगा?

इस कोडलैब की मदद से, Next.js ऐप्लिकेशन में एएमपी का इस्तेमाल करने के दो तरीके आज़माए जा सकते हैं. यह जानने के लिए कि Next.js ऐप्लिकेशन में एएमपी सपोर्ट को जोड़ने की वजह क्या हो सकती है, एएमपी से आपके Next.js ऐप्लिकेशन में फ़ास्टनेस की गारंटी कैसे मिल सकती है देखें.

हाइब्रिड एएमपी पेज बनाने का तरीका

हाइब्रिड एएमपी तरीका, किसी भी Next.js पेज का एएमपी वर्शन बनाता है. पहले हाइब्रिड तरीके का इस्तेमाल अक्सर तब किया जाता था, जब आपके पेज के मुख्य वर्शन पर कोई ऐसा अनुभव होता था जो एएमपी पर काम नहीं करता था. मुख्य वर्शन का पूरी तरह से इस्तेमाल किया गया था, जबकि एएमपी पेज का अनुभव थोड़ा खराब था. amp-script के आने से, हाइब्रिड व्यू की ज़रूरत कम ही है. हालांकि, ज़रूरत पड़ने पर हम यहां इसके बारे में बताएंगे.

Next.js, पेजों को कैसे रेंडर करता है और उन्हें किस तरह से दिखाता है, इसे कॉन्फ़िगर करने के कई तरीके हैं. config ऑब्जेक्ट का इस्तेमाल करके, हर पेज के हिसाब से इनमें बदलाव किए जा सकते हैं. किसी खास पेज को एएमपी पेज के तौर पर दिखाने के लिए, आपको ऑब्जेक्ट में amp प्रॉपर्टी एक्सपोर्ट करनी होगी:

import React from 'react'

export const config = { amp: 'hybrid' };

const Home = () => (
  <p>This is the home page</p>
);

export default Home;

1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.

2. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.

3. यूआरएल के आखिर में ?amp=1 जोड़ें. पेज वैसा ही दिखता है, लेकिन कंसोल में देखने पर आपको दिखेगा कि पेज का एएमपी वर्शन रेंडर किया जा रहा है.

पेज में सिर्फ़ एक <p> टैग है, इसलिए मुख्य पेज और उसके एएमपी वर्शन के बीच कोई अंतर नहीं दिखता है.

एएमपी कॉम्पोनेंट को शर्तों के साथ दिखाने का तरीका

एएमपी पेजों में कई एचटीएमएल एलिमेंट के बजाय, खुद के मान्य कॉम्पोनेंट का सेट होना चाहिए. यह पक्का करना ज़रूरी है कि एएमपी कॉम्पोनेंट सिर्फ़ एएमपी पेज के लिए शर्तों के साथ दिखाए जाते हैं. Next.js में useAmp नाम का एक हुक होता है. इससे, पेज के किस वर्शन का अनुरोध किया गया है, इसके आधार पर आपको शर्तों के साथ अलग-अलग एलिमेंट दिखाने की सुविधा मिलती है.

1. सोर्स देखने के लिए, सोर्स देखें दबाएं.

2. pages/index.js में बदलाव करें, ताकि यह पेज के लिए पैराग्राफ़ के अलग एलिमेंट को रेंडर करे. यह इस बात पर निर्भर करता है कि पेज के मुख्य वर्शन या एएमपी वर्शन का अनुरोध किया गया था या नहीं:

   import React from 'react';
   import { useAmp } from 'next/amp';
   
   export const config = { amp: 'hybrid' };
   
   const Home = () => (
     useAmp() ? (
       <p>This is the <strong>AMP</strong> version of the home page</p>
     ) : (
       <p>This is the main version of the home page</p>
     )
   );
   
   export default Home;
   

3. पेज का मुख्य वर्शन लोड करें:

   

4. पेज का एएमपी वर्शन लोड करने के लिए, यूआरएल के आखिर में ?amp=1 फिर से जोड़ें:

   

5. एएमपी से, इमेज टैग की जगह दूसरा इमेज टैग, amp-img रेंडर करने की कोशिश करें:

   import React from 'react';
   import { useAmp } from 'next/amp';
   
   export const config = { amp: 'hybrid' };
   
   const imgSrc = 'https://placekitten.com/1000/1000';
   
   const Image = () => (
     useAmp() ? (
       <amp-img alt="A cute kitten"
         src={imgSrc}
         width="1000"
         height="1000"
         layout="responsive">
       </amp-img>
     ) : (
       <img alt="A cute kitten"
         src={imgSrc}
         width="1000"
         height="1000">
       </img>
     )
   );
   
   const Home = () => (
     <div>
       <Image />
     </div>
   );
   
   export default Home;
   

   layout="responsive" अपने-आप पूरी तरह रिस्पॉन्सिव इमेज को रेंडर करता है. इसमें चौड़ाई और ऊंचाई के हिसाब से आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) होता है. एएमपी एलिमेंट के साथ काम करने वाले लेआउट के बारे में ज़्यादा जानने के लिए, लेआउट और मीडिया क्वेरी देखें. साथ ही, उस एलिमेंट के ऑप्टिमाइज़ेशन के बारे में ज़्यादा जानने के लिए, amp-img देखें.

6. पेज का मुख्य वर्शन फिर से देखें.

   

7. पेज का एएमपी वर्शन फिर से देखें.

   

सिर्फ़ एएमपी पेज बनाने का तरीका

Next.js, सिर्फ़ एएमपी वाले पेजों पर भी काम करता है. इस तरीके से, उपयोगकर्ताओं और सर्च इंजन को हमेशा एक ही एएमपी पेज दिखाया और रेंडर किया जाता है.

1. सिर्फ़ एएमपी वाले पेज को रेंडर करने के लिए, कॉन्फ़िगरेशन ऑब्जेक्ट में amp प्रॉपर्टी की वैल्यू को बदलकर true करें.

   import React from 'react'
   
   export const config = { amp: true };
   
   const Home = () => (
     <p>This is an AMP-only page</p>
   );
   
   export default Home;