Next.js'de AMP nasıl kullanılır?

Next.js uygulamasına AMP eklemenin iki yolunu deneyin

Houssein Djirdeh

Neler öğreneceksiniz?

Bu codelab'de, AMP'yi bir Next.js uygulamasında kullanmanın iki yolunu deneyebilirsiniz. AMP, Next.js uygulamanızda hızı nasıl garanti edebilir? başlıklı makaleden Next.js uygulamanıza AMP desteği eklemek isteyebilirsiniz.

Karma AMP sayfaları oluşturma

Karma AMP yaklaşımı, herhangi bir Next.js sayfasının eşlik eden AMP sürümünü oluşturur. Geçmişte Karma yaklaşım, modelinizin ana sürümünde bir deneyim olduğunda sıkça bir sayfaya bakın. Ana sürüm, AMP sayfasında tam deneyime sahipken biraz bozulmuş bir deneyim. amp-script kullanıma sunulduğunda ihtiyaç duyulmamaktadır ele alacağız. Ancak yine de ihtiyaç duyabileceğinizi düşünerek bu konuyu burada ele alacağız.

Next.js'nin sayfaları oluşturma ve sunma şeklini yapılandırmanın birden çok yolu vardır. config kullanarak nesne, bunları sayfa bazında değiştirmenize olanak tanır. Belirli bir sayfayı bir AMP sayfasında yer alıyorsa nesnedeki amp özelliğini dışa aktarmanız gerekir:

import React from 'react'

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

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

export default Home;

1. Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.

2. Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .

3. URL'nin sonuna ?amp=1 ekleyin. Sayfa aynı görünüyor, ancak Konsolda sayfanın AMP sürümünün oluşturulduğunu görürsünüz.

Sayfada yalnızca tek bir <p> etiketi olduğundan ana sayfa ve AMP sürümü.

AMP bileşenlerini koşullu olarak yayınlama

AMP sayfalarının, birçok HTML öğesi yerine kendi geçerli bileşen grubunun olması gerekir. İnsanların AMP bileşenlerinin yalnızca AMP sayfası için koşullu olarak sunulduğundan emin olmak önemlidir. Next.js, farklı öğeleri koşullu olarak yayınlamanıza olanak tanımak için useAmp adlı bir kanca sağlar Bu, sayfanın hangi sürümünün istendiğine bağlı olarak değişir.

1. Kaynağı görüntülemek için Kaynağı Görüntüle'ye basın.

2. pages/index.js öğesini, ana sürüm veya AMP sürümü istendi:

   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. Sayfanın ana sürümünü yükle:

   

4. Sayfanın AMP sürümünü yüklemek için URL'nin sonuna tekrar ?amp=1 ekleyin:

   

5. AMP'nin, resim etiketinin yerini alan amp-img resmini oluşturmayı deneyin:

   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", en boy oranıyla otomatik olarak tamamen duyarlı bir resim oluşturur genişlik ve yükseklikle belirtilir. Düzen ve medya sorguları hakkında AMP öğelerinin desteklenen düzenleri ve amp-img, bu öğelerin optimize edebilirsiniz.

6. Sayfanın ana sürümünü tekrar görüntüleyin.

   

7. Sayfanın AMP sürümünü tekrar görüntüleyin.

   

Yalnızca AMP sayfaları oluşturma

Next.js, yalnızca AMP sayfalarını destekler. Bu yaklaşımla tek bir AMP sayfası yayınlanır ve oluşturulur. kullanıcılara ve arama motorlarına sunmaya devam ediyor.

1. Yalnızca AMP olan bir sayfayı oluşturmak için yapılandırma nesnesindeki amp özelliğinin değerini true olarak değiştirin.

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