Next.js 8.1

Hoy estamos emocionados de anunciar que hemos extendido la experiencia de Next.js para la creación de páginas AMP.

• ¿Qué es AMP?
• AMP en Next.js
• Páginas híbridas AMP
• Páginas AMP-first
• Validación AMP

¿Qué es AMP?

AMP es un estándar para construir sitios web de alto rendimiento que minimiza la sobrecarga de renderizado y puede ser indexado en motores de búsqueda conocidos con comportamiento mejorado. Por ejemplo, las páginas AMP se cargan directamente en los resultados de búsqueda móvil de Google y están marcadas con un icono de rayo.

Resultado de búsqueda de Next.js en Google

AMP HTML es una versión más estricta de HTML que impone algunas restricciones para lograr un rendimiento más confiable y mejor escalabilidad. Algunas etiquetas HTML se reemplazan con etiquetas HTML específicas de AMP para proporcionar una mejor experiencia que su correspondiente etiqueta HTML. Por ejemplo, la etiqueta amp-img proporciona soporte completo para srcset incluso en navegadores que aún no lo admiten.

Las páginas AMP son descubiertas automáticamente por los motores de búsqueda que lo admiten. Estos motores de búsqueda generalmente implementan un AMP Cache (por ejemplo, Google y Bing). Los AMP Caches ayudan a que la página se renderice más rápido desde sus resultados de búsqueda.

AMP en Next.js

Hoy estamos emocionados de anunciar que hemos extendido la experiencia de Next.js para la creación de páginas AMP. Esto significa que ahora puede aprovechar el poder de los componentes React para crear páginas AMP. El soporte para AMP se define por página, lo que permite la adopción gradual de AMP. Hay dos formas de habilitar AMP en Next.js: una página híbrida AMP o una página AMP-first.

Páginas híbridas AMP

Las páginas híbridas AMP le permiten tener una versión AMP complementaria de una página tradicional para que los motores de búsqueda puedan mostrar la versión AMP de la página en los resultados de búsqueda móviles mientras mantienen la versión existente de la página. Esto permite el uso de AMP en su aplicación mientras sigue aprovechando funciones de Next.js como el enrutamiento del lado del cliente para la experiencia principal del usuario.

Para habilitar una página híbrida AMP, use la función withAmp mientras proporciona la opción hybrid: true:

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

Un ejemplo del patrón híbrido AMP utilizado en producción es Reddit. Cada hilo se almacena en el Google's AMP Cache para proporcionar una experiencia de usuario rápida en la web móvil mientras sigue proporcionando la versión completa de Reddit para escritorios y navegación posterior.

Imagen de Reddit usando AMP para mejor SEO

Imagen de Reddit en el visor AMP

Páginas AMP-First

Las páginas AMP-first se sirven al tráfico principal del sitio web, así como al tráfico de motores de búsqueda. Al usar páginas AMP-first, llevamos la experiencia rápida de AMP al sitio web principal, incluidos los escritorios.

Para implementar páginas AMP-first, envuelve las páginas con la función withAmp:

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

Si no necesita el tiempo de ejecución de Next.js, usar páginas AMP-first podría ayudar a acelerar el desarrollo. AMP-First requiere que solo use componentes compatibles con AMP para construir sus páginas. Las páginas AMP-First están actualmente en producción en nextjs.org/docs y nextjs.org/blog.

Distinción de renderizado AMP en componentes

Cualquier componente React en su proyecto puede aprovechar useAmp para distinguir entre el modo de renderizado AMP y no AMP. Esto le permite implementar un componente <Image> que comparte lógica entre <img> y <amp-img>:

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} />
  );
}

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 });

Recarga automática para desarrollo AMP

En desarrollo, en lugar de usar hot-module-replacement, rastreamos cualquier cambio en la página en la que se encuentra actualmente y solo recargamos la página cuando ha sido modificada. La razón por la que usamos recarga completa en lugar de hot-module-replacement es para asegurarnos de que siempre vea una representación del lado del servidor fresca de su página AMP.

Validación AMP

Para ayudar a garantizar que solo se produzcan páginas AMP válidas, las validamos automáticamente con amphtml-validator durante el desarrollo. Los errores y advertencias aparecerán en la terminal donde inició Next.js.

Las páginas también se validan durante next export y cualquier problema se imprimirá en la terminal. Cualquier error de AMP hará que next export falle porque la exportación no es AMP válida.

Aprenda a usar AMP con Next.js

Además de aprender a usar Next.js, hemos agregado una nueva sección para aprender a usar AMP en Next.js.

Alternativamente, comience usando el ejemplo AMP:

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