Создание AMP-страниц в Next.js

Примеры

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

Подробнее об AMP можно прочитать на официальном сайте amp.dev.

Включение AMP

Чтобы включить поддержку AMP для страницы и узнать о различных конфигурациях AMP, ознакомьтесь с API документацией next/amp.

Ограничения

Поддерживается только CSS-in-JS. CSS Modules в настоящее время не поддерживаются на AMP-страницах. Вы можете добавить поддержку CSS Modules в Next.js.

Сообщество AMP предоставляет множество компонентов для создания интерактивных AMP-страниц. Next.js автоматически импортирует все компоненты, используемые на странице, и нет необходимости вручную импортировать скрипты AMP-компонентов:

export const config = { amp: true }

function MyAmpPage() {
  const date = new Date()

  return (
    <div>
      <p>Некоторое время: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

В приведенном выше примере используется компонент amp-timeago.

По умолчанию всегда импортируется последняя версия компонента. Если вы хотите настроить версию, можно использовать next/head, как в следующем примере:

import Head from 'next/head'

export const config = { amp: true }

function MyAmpPage() {
  const date = new Date()

  return (
    <div>
      <Head>
        <script
          async
          key="amp-timeago"
          custom-element="amp-timeago"
          src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
        />
      </Head>

      <p>Некоторое время: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

Валидация AMP

AMP-страницы автоматически проверяются с помощью amphtml-validator во время разработки. Ошибки и предупреждения будут отображаться в терминале, где был запущен Next.js.

Страницы также проверяются во время статического экспорта HTML, и любые предупреждения/ошибки будут выведены в терминал. Любые ошибки AMP приведут к завершению экспорта с кодом состояния 1, так как экспорт не является валидным AMP.

Пользовательские валидаторы

Вы можете настроить пользовательский AMP-валидатор в next.config.js, как показано ниже:

module.exports = {
  amp: {
    validator: './custom_validator.js',
  },
}

Отключение валидации AMP

Чтобы отключить валидацию AMP, добавьте следующий код в next.config.js:

experimental: {
  amp: {
    skipValidation: true
  }
}

AMP при статическом экспорте HTML

При использовании статического экспорта HTML для предварительного рендеринга страниц Next.js определяет, поддерживает ли страница AMP, и изменяет поведение экспорта соответственно.

Например, гибридная AMP-страница pages/about.js будет экспортирована как:

out/about.html — HTML-страница с клиентским React-рантаймом
out/about.amp.html — AMP-страница

А если pages/about.js является AMP-only страницей, то будет экспортирована:

out/about.html — Оптимизированная AMP-страница

Next.js автоматически добавит ссылку на AMP-версию вашей страницы в HTML-версию, так что вам не придется делать это вручную:

<link rel="amphtml" href="/about.amp.html" />

И AMP-версия вашей страницы будет содержать ссылку на HTML-страницу:

<link rel="canonical" href="/about" />

Когда включена опция trailingSlash, экспортированные страницы для pages/about.js будут выглядеть так:

out/about/index.html — HTML-страница
out/about.amp/index.html — AMP-страница

TypeScript

В настоящее время AMP не имеет встроенных типов для TypeScript, но это запланировано (#13791).

В качестве временного решения вы можете вручную создать файл amp.d.ts в вашем проекте и добавить эти пользовательские типы.