Как использовать AMP в Next.js

Попробуйте два способа добавления AMP в приложение Next.js.

Houssein Djirdeh

Чтобы следовать этой кодовой лаборатории, откройте этот глюк на второй вкладке.

Чему вы научитесь?

Эта лаборатория кода позволяет вам опробовать два способа использования AMP в приложении Next.js. Узнайте , как AMP может гарантировать скорость работы вашего приложения Next.js, и узнайте, почему вам может понадобиться добавить поддержку AMP в ваше приложение Next.js.

Как создавать гибридные AMP-страницы

Внимание: рекомендуется использовать только AMP с Next.js. Подход с использованием гибридного AMP, описанный в этом разделе, требует более высоких затрат на обслуживание, чем подход, основанный только на AMP, поскольку он требует поддержки двух версий каждой страницы. Вам следует использовать гибридный подход только в том случае, если вы уверены, что подход, основанный только на AMP, не будет работать.

Подход Hybrid AMP создает сопровождающую AMP-версию любой страницы Next.js. Раньше гибридный подход часто использовался, когда на основной версии вашей страницы было что-то, что AMP не поддерживал. Основная версия имела полный функционал, в то время как AMP-страница имела немного ухудшенный интерфейс. С появлением amp-script потребность в гибридном подходе стала меньше, но мы рассмотрим его здесь на тот случай, если он вам все еще понадобится.

Существует несколько способов настройки того, как Next.js отображает и обслуживает страницы. Использование объекта config позволяет вам изменять их для каждой страницы. Чтобы использовать определенную страницу в качестве страницы AMP, вам необходимо экспортировать свойство amp в объект:

import React from 'react'

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

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

export default Home;

1. Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.

2. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .

3. Добавьте ?amp=1 в конец URL-адреса. Страница выглядит так же, но если вы посмотрите в консоли, вы увидите, что отображается версия страницы AMP.

Поскольку на странице есть только один тег <p> , видимой разницы между главной страницей и ее версией AMP нет.

Как условно обслуживать компоненты AMP

Страницы AMP должны иметь собственный набор допустимых компонентов вместо множества элементов HTML. Важно убедиться, что компоненты AMP условно обслуживаются только для страницы AMP. Next.js предоставляет хук под названием useAmp , позволяющий условно обслуживать разные элементы в зависимости от того, какая версия страницы была запрошена.

1. Чтобы просмотреть источник, нажмите «Просмотреть источник» .

2. Отредактируйте pages/index.js так, чтобы он отображал на странице другой элемент абзаца в зависимости от того, была ли запрошена основная версия или версия 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. Загрузите основную версию страницы:

   

4. Добавьте ?amp=1 в конец URL-адреса еще раз, чтобы загрузить версию страницы AMP:

   

5. Попробуйте отобразить замену 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" автоматически отображает полностью адаптивное изображение с соотношением сторон, заданным шириной и высотой. Ознакомьтесь с разделом «Макет и медиа-запросы», чтобы узнать больше о поддерживаемых макетах элементов AMP, а также с разделом amp-img , чтобы узнать больше об оптимизации этого элемента.

6. Просмотрите основную версию страницы еще раз.

   

7. Просмотрите AMP-версию страницы еще раз.

   

Как создавать страницы только для AMP

Next.js также поддерживает страницы только AMP. При таком подходе одна AMP-страница постоянно обслуживается и отображается для пользователей и поисковых систем.

1. Чтобы отобразить страницу только для AMP, измените значение свойства amp в объекте конфигурации на true .

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