Coba dua cara untuk menambahkan AMP ke aplikasi Next.js
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;
Klik Remix to Edit agar project dapat diedit.
Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh .
Tambahkan
?amp=1
di bagian akhir URL. Halaman tersebut terlihat sama, tetapi jika Anda melihat Anda akan melihat bahwa halaman versi AMP sedang dirender.
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.
Untuk melihat sumber, tekan Lihat Sumber.
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;
Muat versi utama halaman:
Tambahkan lagi
?amp=1
ke bagian akhir URL untuk memuat halaman versi AMP: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.Lihat kembali versi utama halaman.
Lihat kembali versi AMP halaman.
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.
Untuk merender halaman khusus AMP, ubah nilai properti
amp
di objek konfigurasi menjaditrue
.import React from 'react' export const config = { amp: true }; const Home = () => ( <p>This is an AMP-only page</p> ); export default Home;