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 wypróbujesz 2 sposoby korzystania ze stron AMP w aplikacji Next.js. Dowiedz się, jak strony AMP mogą zagwarantować szybkość działania aplikacji Next.js, aby dowiedzieć się, dlaczego warto włączyć obsługę AMP do aplikacji Next.js.

Jak tworzyć hybrydowe strony AMP

Korzystanie z hybrydowej strony AMP powoduje utworzenie wersji AMP każdej strony Next.js. W przeszłości podejście hybrydowe było często stosowane w przypadku doświadczeń związanych z główną wersją kampanii której nie obsługuje AMP. Wersja główna była kompletna, a strona AMP miała co nieco gorsze. Dzięki wprowadzeniu rozszerzenia amp-script nie trzeba już metody hybrydowej, ale omówimy ją tutaj na wszelki wypadek.

Istnieje wiele sposobów konfigurowania sposobu, w jaki Next.js będzie renderować i wyświetlać strony. Korzystanie z: config umożliwia zmianę ich dla poszczególnych stron. Aby wyświetlać określoną stronę jako strony AMP, musisz wyeksportować właściwość amp w obiekcie:

import React from 'react'

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

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

export default Home;

1. Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.

2. Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran

3. Dodaj ?amp=1 na końcu adresu URL. Strona wygląda tak samo, ale jeśli spojrzysz na Zobaczysz w konsoli, że renderowana jest wersja AMP strony.

Strona zawiera tylko jeden tag <p>, więc nie ma widocznej różnicy między tagami stronie głównej i jej wersji AMP.

Warunkowe wyświetlanie komponentów AMP

Strony AMP muszą mieć własny zestaw prawidłowych komponentów zamiast wielu elementów HTML. Jest musisz się upewnić, że komponenty AMP są warunkowo wyświetlane tylko na potrzeby strony AMP. Next.js udostępnia haczyk 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 pole pages/index.js, aby wyrenderował na stronie inny element akapitu w zależności od tego, żądana wersja główna lub 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, by wczytać wersję AMP strony:

   

5. Spróbuj wyrenderować tag graficzny (amp-img) używający strony AMP:

   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 określonym współczynniku proporcji określane przez szerokość i wysokość. Wypróbuj Układy zapytania o media, by dowiedzieć się więcej obsługiwane układy elementów AMP, a amp-img, by dowiedzieć się więcej i optymalizacji.

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

   

7. Ponownie wyświetl wersję AMP strony.

   

Jak tworzyć strony tylko AMP

Next.js obsługuje też strony tylko AMP. Dzięki temu wyświetlana i renderowana jest jedna strona AMP są dostępne dla użytkowników i wyszukiwarek.

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

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