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>My AMP About Page!</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>My AMP About Page!</h3>
      {isAmp ? (
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="a cool image"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="a cool image" />
      )}
    </div>
  )
}

export default About

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

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

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