Cara menggunakan AMP di Next.js

Coba 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 menjamin kecepatan di aplikasi Next.js untuk mempelajari alasan Anda mungkin ingin menambahkan dukungan AMP ke aplikasi Next.js Anda.

Cara membuat halaman AMP Hybrid

Pendekatan AMP Hybrid membuat versi AMP yang menyertainya dari setiap halaman Next.js. Di masa lalu Pendekatan Hybrid sering digunakan ketika ada pengalaman pada versi utama komputer yang tidak dapat didukung oleh AMP. Versi utama memiliki pengalaman penuh, sedangkan halaman AMP memiliki pengalaman yang sedikit menurun. Dengan diperkenalkannya amp-script, tidak ada terlalu banyak kebutuhan untuk pendekatan Hybrid, tetapi kita akan membahasnya di sini untuk berjaga-jaga jika Anda masih memerlukannya.

Ada beberapa cara untuk mengonfigurasi cara Next.js merender dan menayangkan halaman. Menggunakan config memungkinkan Anda untuk memodifikasinya per halaman. Untuk menayangkan laman tertentu sebagai halaman AMP, Anda harus 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 to Edit agar project dapat diedit.

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

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

Halaman aktif dan pesan di Chrome DevTools Console yang menyatakan bahwa halaman didukung oleh AMP.

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

Cara menayangkan komponen AMP secara bersyarat

Halaman AMP harus memiliki kumpulan komponen yang valid sebagai pengganti banyak elemen HTML. Penting penting untuk memastikan bahwa komponen AMP ditayangkan secara bersyarat hanya untuk halaman AMP. Next.js menyediakan hook yang disebut useAmp untuk memungkinkan Anda menayangkan elemen yang berbeda secara kondisional 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 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:

    Screenshot versi utama halaman.

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

    Screenshot halaman versi AMP yang menampilkan teks yang berbeda dengan versi utama.

  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 ditentukan oleh {i>width<i} dan {i>height<i}. Lihat Tata Letak & kueri media untuk mempelajari tata letak elemen AMP yang didukung, dan gunakan amp-img untuk mempelajari pengoptimalan.

  6. Lihat kembali versi utama halaman.

    Screenshot yang menunjukkan bahwa gambar di versi utama halaman melebihi area pandang.

  7. Lihat kembali versi AMP halaman.

    Screenshot yang menunjukkan bahwa gambar dalam halaman versi AMP telah otomatis diubah ukurannya agar sesuai dengan area pandang.

Cara membuat halaman khusus AMP

Next.js juga mendukung halaman khusus AMP. Dengan pendekatan ini, satu halaman AMP ditayangkan dan dirender kepada 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;