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

Bir Next.js uygulamasına AMP eklemek için kullanabileceğiniz iki yolu deneyin

Houssein Djirdeh

Neler öğreneceksiniz?

Bu codelab'de, AMP'yi bir Next.js uygulamasında kullanabileceğiniz iki yöntemi deneyebilirsiniz. Next.js uygulamanıza neden AMP desteği eklemek isteyebileceğinizi öğrenmek için AMP, Next.js uygulamanızda hızı nasıl garanti edebilir? başlıklı makaleyi inceleyin.

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, sayfanızın ana sürümünde AMP'nin destekleyemediği bir deneyim olduğunda Karma yaklaşım sıkça kullanılıyordu. Ana sürümde tam deneyime sahipken AMP sayfasında biraz kötü bir deneyim yaşandı. amp-script'in kullanıma sunulmasıyla birlikte Karma yaklaşıma daha az ihtiyaç duyulmaktadır. Ancak yine de ihtiyacınız olması ihtimaline karşı bu konuyu burada ele alacağız.

Next.js'nin sayfaları nasıl oluşturup sunacağını yapılandırmanın birden çok yolu vardır. config nesnesi kullanmak, bunları sayfa bazında değiştirmenize olanak tanır. Belirli bir sayfayı AMP sayfası olarak sunmak için 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üzenlenecek remiks'i tıklayın.

2. Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.

3. URL'nin sonuna ?amp=1 ekleyin. Sayfa aynı görünür, ancak Konsol'a bakarsanız 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 ile AMP sürümü arasında gözle görülür bir fark yoktur.

AMP bileşenlerini koşullu olarak sunma

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

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ün veya AMP sürümünün istendiğine bağlı olarak sayfadan farklı bir paragraf öğesi oluşturacak şekilde düzenleyin:

   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ükleyin:

   

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

   

5. AMP'nin resim etiketi (amp-img) yerine yenisini 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", otomatik olarak genişliğe ve yüksekliğe göre belirtilen bir en boy oranına sahip tamamen duyarlı bir resim oluşturur. AMP öğelerinin desteklenen düzenleri hakkında daha fazla bilgi için Düzen ve medya sorgularına ve bu öğenin optimizasyonları hakkında daha fazla bilgi için amp-img bölümüne göz atın.

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ı da destekler. Bu yaklaşımla, kullanıcılara ve arama motorlarına her zaman tek bir AMP sayfası sunulup oluşturulur.

1. Yalnızca AMP sayfalarını 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;