Cara menggunakan AMP di Next.js

Cobalah dua cara untuk menambahkan AMP ke aplikasi Next.js

Houssein Djirdeh

Apa yang akan Anda pelajari?

Codelab ini memungkinkan Anda mencoba dua cara menggunakan AMP di aplikasi Next.js. Lihat Cara AMP dapat menjamin kecepatan di aplikasi Next.js untuk mempelajari alasan Anda perlu menambahkan dukungan AMP ke aplikasi Next.js.

Cara membuat halaman AMP Hybrid

Pendekatan AMP Hybrid membuat versi AMP yang menyertai halaman Next.js. Sebelumnya, pendekatan Hybrid sering digunakan saat ada pengalaman di versi utama halaman Anda yang tidak dapat didukung oleh AMP. Versi utama memiliki pengalaman penuh, sedangkan halaman AMP memiliki pengalaman yang sedikit mengalami penurunan. Dengan diperkenalkannya amp-script, pendekatan Hybrid tidak begitu diperlukan, tetapi kita akan membahasnya di sini kalau-kalau Anda masih membutuhkannya.

Ada beberapa cara untuk mengonfigurasi cara Next.js merender dan menayangkan halaman. Penggunaan objek config memungkinkan Anda mengubahnya per halaman. Agar dapat menayangkan halaman tertentu sebagai halaman AMP, Anda perlu mengekspor properti amp dalam objek:

import React from 'react'

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

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

export default Home;

1. Klik Remix untuk Mengedit agar project dapat diedit.

2. Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .

3. Tambahkan ?amp=1 di akhir URL. Halaman terlihat sama, tetapi jika Anda melihat di Konsol, Anda akan melihat bahwa versi AMP halaman sedang dirender.

Karena halaman hanya memiliki satu tag <p>, tidak ada perbedaan yang terlihat antara halaman utama dan versi AMP-nya.

Cara menayangkan komponen AMP secara bersyarat

Halaman AMP harus memiliki kumpulan komponen validnya sendiri sebagai pengganti banyak elemen HTML. Penting untuk memastikan bahwa komponen AMP ditayangkan secara bersyarat hanya untuk halaman AMP. Next.js menyediakan hook yang disebut useAmp agar Anda dapat menayangkan berbagai elemen secara bersyarat, bergantung pada versi halaman yang diminta.

1. Untuk melihat sumber, tekan Lihat Sumber.

2. Edit pages/index.js agar dapat merender elemen paragraf yang berbeda ke halaman, bergantung pada apakah versi utama atau versi AMP yang diminta:

   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. Muat versi utama halaman:

   

4. Tambahkan lagi ?amp=1 ke bagian akhir URL untuk memuat versi AMP halaman:

   

5. Coba rendering pengganti tag gambar di AMP, 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" otomatis merender gambar yang sepenuhnya responsif dengan rasio aspek yang ditentukan berdasarkan lebar dan tinggi. Lihat Kueri tata letak & media untuk mempelajari tata letak elemen AMP yang didukung lebih lanjut, dan amp-img untuk mempelajari pengoptimalan elemen tersebut lebih lanjut.

6. Lihat kembali versi utama halaman.

   

7. Lihat halaman versi AMP lagi.

   

Cara membuat halaman khusus AMP

Next.js juga mendukung halaman khusus AMP. Dengan pendekatan ini, satu halaman AMP akan selalu ditayangkan dan dirender ke pengguna dan mesin telusur.

1. Untuk merender halaman khusus AMP, ubah nilai properti amp di objek konfigurasi menjadi true.

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