Jak używać stron AMP w Next.js

Wypróbuj 2 sposoby dodawania stron AMP do aplikacji Next.js

Houssein Djirdeh

Czego się nauczysz?

Dzięki temu ćwiczeniu w Codelabs możesz wypróbować 2 sposoby wykorzystania stron AMP w aplikacji Next.js. Sprawdź, jak AMP może zagwarantować szybkość działania aplikacji Next.js, aby dowiedzieć się, dlaczego warto dodać obsługę AMP do swojej aplikacji Next.js.

Jak tworzyć hybrydowe strony AMP

Metoda Hybrydowa AMP tworzy odpowiednią wersję AMP dowolnej strony Next.js. W przeszłości podejście hybrydowe było często stosowane, gdy główna wersja strony nie była obsługiwana przez AMP. Główna wersja działała w pełni, natomiast strona AMP działała trochę gorzej. Dzięki wprowadzeniu komponentu amp-script zmniejszyliśmy potrzebę korzystania z metody hybrydowej, ale omówimy ją tutaj na wypadek, gdyby nadal była potrzebna.

Istnieje wiele sposobów konfigurowania sposobu renderowania i wyświetlania stron za pomocą Next.js. Korzystając z obiektu config, możesz je modyfikować w odniesieniu do poszczególnych stron. Aby wyświetlać konkretną stronę jako stronę AMP, musisz wyeksportować w obiekcie właściwość amp:

import React from 'react'

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

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

export default Home;

1. Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.

2. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran .

3. Dodaj ?amp=1 na końcu adresu URL. Strona wygląda tak samo, ale jeśli spojrzysz na Konsolę, zobaczysz, że jej wersja AMP jest renderowana.

Strona zawiera tylko 1 tag <p>, więc nie ma widocznej różnicy między stroną główną a jej wersją AMP.

Jak warunkowo wyświetlać komponenty AMP

Strony AMP muszą mieć własny zestaw prawidłowych komponentów zamiast wielu elementów HTML. Ważne jest, aby upewnić się, że komponenty AMP są warunkowo wyświetlane tylko w przypadku strony AMP. Next.js udostępnia zaczynnik o nazwie useAmp, który umożliwia warunkowe wyświetlanie różnych elementów w zależności od żądanej wersji strony.

1. Aby wyświetlić źródło, kliknij Wyświetl źródło.

2. Edytuj element pages/index.js tak, aby renderował inny element akapitu na stronie w zależności od tego, czy zażądano wersji głównej czy AMP:

   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. Wczytaj główną wersję strony:

   

4. Ponownie dodaj ?amp=1 na końcu adresu URL, aby wczytać wersję AMP strony:

   

5. Spróbuj wyrenderować AMP zastępujący tag obrazu 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" automatycznie renderuje w pełni elastyczny obraz o współczynniku proporcji określonym przez szerokość i wysokość. W sekcji Zapytania dotyczące układu i multimediów znajdziesz więcej informacji o obsługiwanych układach elementów AMP, a w sekcji amp-img dowiesz się więcej o optymalizacji tych elementów.

6. Ponownie wyświetl główną wersję strony.

   

7. Ponownie wyświetl wersję AMP strony.

   

Jak tworzyć strony tylko w wersji AMP

Next.js obsługuje też strony tylko AMP. Dzięki temu użytkownicy i wyszukiwarki zawsze widzą jedną stronę AMP.

1. Aby wyrenderować stronę tylko AMP, zmień wartość właściwości amp w obiekcie konfiguracji na true.

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