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

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

Houssein Djirdeh

आप क्या सीखेंगे?

इस कोडलैब की मदद से, आप 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. सोर्स देखने के लिए, View Source दबाएं.

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;