useAmp

Поддержка AMP — это одна из наших расширенных функций. Вы можете узнать больше о AMP здесь.

Чтобы включить AMP, добавьте следующую конфигурацию на вашу страницу:

export const config = { amp: true }

Конфигурация amp принимает следующие значения:

• true — страница будет только в формате AMP
• 'hybrid' — страница будет иметь две версии: одну с AMP и другую с HTML

Чтобы узнать больше о конфигурации amp, прочитайте следующие разделы.

Страница только с AMP

Рассмотрим следующий пример:

export const config = { amp: true }

function About(props) {
  return <h3>Моя AMP страница "О нас"!</h3>
}

export default About

Приведённая выше страница является страницей только с AMP, что означает:

• Страница не имеет клиентской среды выполнения Next.js или React
• Страница автоматически оптимизируется с помощью AMP Optimizer — инструмента оптимизации, который применяет те же преобразования, что и AMP-кэши (улучшает производительность до 42%)
• Страница имеет пользовательскую (оптимизированную) версию и версию для индексации поисковыми системами (неоптимизированную)

Гибридная AMP-страница

Рассмотрим следующий пример:

import { useAmp } from 'next/amp'

export const config = { amp: 'hybrid' }

function About(props) {
  const isAmp = useAmp()

  return (
    <div>
      <h3>Моя AMP страница "О нас"!</h3>
      {isAmp ? (
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="крутое изображение"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="крутое изображение" />
      )}
    </div>
  )
}

export default About

Приведённая выше страница является гибридной AMP-страницей, что означает:

• Страница отображается как традиционный HTML (по умолчанию) и как AMP HTML (при добавлении ?amp=1 к URL)
• AMP-версия страницы имеет только допустимые оптимизации, применяемые AMP Optimizer, чтобы быть индексируемой поисковыми системами

Страница использует useAmp для определения режима. Это React Hook, который возвращает true, если страница использует AMP, и false в противном случае.