Next.js-এ এএমপি কীভাবে ব্যবহার করবেন

একটি Next.js অ্যাপে এএমপি যোগ করার দুটি উপায় ব্যবহার করে দেখুন

Houssein Djirdeh

আপনি কি শিখবেন?

এই কোডল্যাবটি আপনাকে একটি Next.js অ্যাপে এএমপি ব্যবহার করার দুটি উপায় ব্যবহার করে দেখতে দেয়। আপনি কেন আপনার Next.js অ্যাপে এএমপি সমর্থন যোগ করতে চান তা জানতে কীভাবে AMP আপনার Next.js অ্যাপে দ্রুততার নিশ্চয়তা দিতে পারে তা দেখুন।

কীভাবে হাইব্রিড এএমপি পৃষ্ঠা তৈরি করবেন

হাইব্রিড এএমপি পদ্ধতি যেকোনো Next.js পৃষ্ঠার একটি সহগামী এএমপি সংস্করণ তৈরি করে। অতীতে হাইব্রিড পদ্ধতি প্রায়শই ব্যবহার করা হত যখন আপনার পৃষ্ঠার প্রধান সংস্করণে এমন একটি অভিজ্ঞতা ছিল যা AMP সমর্থন করতে পারে না। মূল সংস্করণে সম্পূর্ণ অভিজ্ঞতা ছিল যখন AMP পৃষ্ঠার অভিজ্ঞতা কিছুটা অবনমিত ছিল। amp-স্ক্রিপ্ট প্রবর্তনের সাথে হাইব্রিড পদ্ধতির প্রয়োজন কম, তবে আপনার এখনও এটির প্রয়োজন হলে আমরা এটি এখানে কভার করব।

Next.js কিভাবে পেজ রেন্ডার করে এবং পরিবেশন করে তা কনফিগার করার একাধিক উপায় আছে। একটি config অবজেক্ট ব্যবহার করে আপনি প্রতি পৃষ্ঠার ভিত্তিতে এগুলি পরিবর্তন করতে পারবেন। একটি AMP পৃষ্ঠা হিসাবে একটি নির্দিষ্ট পৃষ্ঠা পরিবেশন করার জন্য, আপনাকে অবজেক্টে 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. URL-এর শেষে ?amp=1 যোগ করুন। পৃষ্ঠাটি দেখতে একই রকম, কিন্তু আপনি যদি কনসোলে দেখেন তাহলে দেখতে পাবেন যে পৃষ্ঠাটির এএমপি সংস্করণ রেন্ডার করা হচ্ছে।

যেহেতু পৃষ্ঠাটিতে শুধুমাত্র একটি <p> ট্যাগ আছে, তাই মূল পৃষ্ঠা এবং এর এএমপি সংস্করণের মধ্যে কোনো পার্থক্য নেই।

কীভাবে শর্তসাপেক্ষে এএমপি উপাদান পরিবেশন করবেন

AMP পৃষ্ঠাগুলিতে অনেকগুলি HTML উপাদানের পরিবর্তে তাদের নিজস্ব বৈধ উপাদানগুলির সেট থাকা প্রয়োজন৷ এটি নিশ্চিত করা গুরুত্বপূর্ণ যে এএমপি উপাদানগুলি শুধুমাত্র এএমপি পৃষ্ঠার জন্য শর্তসাপেক্ষে পরিবেশন করা হয়। 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 সংস্করণ লোড করতে আবার URL-এর শেষে ?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. পৃষ্ঠাটির এএমপি সংস্করণটি আবার দেখুন।

   

কিভাবে AMP-শুধু পৃষ্ঠা তৈরি করবেন

Next.js শুধুমাত্র AMP পৃষ্ঠাগুলিকে সমর্থন করে। এই পদ্ধতির সাহায্যে, একটি একক AMP পৃষ্ঠা সর্বদা ব্যবহারকারী এবং সার্চ ইঞ্জিনকে পরিবেশন করা হয় এবং রেন্ডার করা হয়।

1. একটি AMP-শুধু পৃষ্ঠা রেন্ডার করতে, কনফিগার অবজেক্টের amp সম্পত্তির মান true এ পরিবর্তন করুন।

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