BackНазад к блогу

Next.js 8.1

В Next.js 8.1 появилась поддержка AMP на уровне отдельных страниц, что позволяет постепенно внедрять AMP.

Сегодня мы рады объявить о расширении возможностей Next.js для создания AMP-страниц.

Что такое AMP?

AMP (Accelerated Mobile Pages) — это стандарт для создания высокопроизводительных веб-сайтов, который минимизирует нагрузку при рендеринге и может индексироваться в известных поисковых системах с расширенным поведением. Например, AMP-страницы загружаются напрямую в мобильные результаты поиска Google и помечаются значком молнии.

Результат поиска Next.js в Google

Результат поиска Next.js в Google

AMP HTML — это более строгая версия HTML, которая накладывает ряд ограничений для достижения более надежной производительности и лучшей масштабируемости. Некоторые HTML-теги заменяются на специальные AMP-теги, чтобы обеспечить лучший опыт по сравнению с соответствующими HTML-тегами. Например, тег amp-img предоставляет полную поддержку srcset, даже в браузерах, которые её ещё не поддерживают.

AMP-страницы автоматически обнаруживаются поддерживающими их поисковыми системами. Эти поисковые системы обычно реализуют AMP Cache (например, Google и Bing). AMP Cache помогает страницам загружаться быстрее из результатов поиска.

AMP в Next.js

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

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

Гибридные AMP-страницы позволяют иметь AMP-версию традиционной страницы, чтобы поисковые системы могли показывать AMP-версию в мобильных результатах поиска, сохраняя при этом основную версию страницы. Это позволяет использовать AMP в вашем приложении, сохраняя при этом такие функции Next.js, как клиентская маршрутизация для основного пользовательского опыта.

Чтобы включить гибридную AMP-страницу, используйте функцию withAmp с параметром hybrid: true:

pages/index.js
function HomePage() {
  return <p>Welcome to AMP + Next.js.</p>;
}
 
export default withAmp(HomePage, { hybrid: true });

Один из примеров использования гибридного AMP в продакшене — Reddit. Каждая ветка хранится в Google AMP Cache, чтобы обеспечить быстрый пользовательский опыт в мобильном вебе, сохраняя при этом полную версию Reddit для десктопов и последующей навигации.

Пример использования AMP в Reddit для улучшения SEO

Пример использования AMP в Reddit для улучшения SEO

Пример Reddit в AMP-просмотрщике

Пример Reddit в AMP-просмотрщике

AMP-страницы как основная версия

AMP-страницы как основная версия обслуживаются как для основного трафика сайта, так и для поискового трафика. Используя AMP как основную версию, мы привносим быстрый опыт AMP на основной сайт, включая десктопы.

Для реализации AMP как основной версии оберните страницы функцией withAmp:

pages/index.js
import { withAmp } from 'next/amp';
function HomePage() {
  return <p>Welcome to AMP + Next.js.</p>;
}
 
export default withAmp(HomePage);

Если вам не нужен рантайм Next.js, использование AMP как основной версии может ускорить разработку. AMP как основная версия требует использования только AMP-совместимых компонентов для построения страниц. AMP как основная версия уже используется в продакшене на nextjs.org/docs и nextjs.org/blog.

Различие режимов рендеринга AMP в компонентах

Любой React-компонент в вашем проекте может использовать useAmp для определения режима рендеринга (AMP или не-AMP). Это позволяет реализовать компонент <Image>, который разделяет логику между <img> и <amp-img>:

components/image.js
import { useAmp } from 'next/amp';
 
export function Image({ src, width, height }) {
  const isAmp = useAmp();
  return isAmp ? (
    <amp-img src={src} width={width} height={height} />
  ) : (
    <img src={src} width={width} height={height} />
  );
}
pages/index.js
import { withAmp } from 'next/amp';
import { Image } from '../components/image';
 
function HomePage() {
  return (
    <>
      <p>Hello! Welcome to AMP + Next.js.</p>
      <Image src="https://placehold.it/120" width="120" height="120" />
    </>
  );
}
 
export default withAmp(HomePage, { hybrid: true });

Автоматическая перезагрузка для разработки AMP

В режиме разработки вместо hot-module-replacement мы отслеживаем изменения на текущей странице и перезагружаем её только при изменениях. Мы используем полную перезагрузку вместо hot-module-replacement, чтобы гарантировать, что вы всегда видите свежий серверный рендеринг вашей AMP-страницы.

Валидация AMP

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

Страницы также проверяются во время next export, и любые проблемы выводятся в терминал. Ошибки AMP приведут к завершению next export с ошибкой, так как экспорт не будет валидным AMP.

Научитесь использовать AMP с Next.js

В дополнение к изучению Next.js мы добавили новый раздел о использовании AMP в Next.js.

Либо начните с примера AMP:

npx create-next-app --example amp amp-app