AMP

Примеры

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

Подробнее об AMP вы можете узнать на сайте amp.dev.

Включение AMP

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

Ограничения

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

Добавление компонентов AMP

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

export const config = { amp: true }
 
function MyAmpPage() {
  const date = new Date()
 
  return (
    <div>
      <p>Some time: {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>Some time: {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, то она выведет:

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 в вашем проекте и добавить эти пользовательские типы.

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/pages/building-your-application/configuring/amp