useAmp

El soporte para AMP es una de nuestras características avanzadas, puedes leer más sobre AMP aquí.

Para habilitar AMP, agrega la siguiente configuración a tu página:

export const config = { amp: true }

La configuración amp acepta los siguientes valores:

• true - La página será exclusivamente AMP
• 'hybrid' - La página tendrá dos versiones, una con AMP y otra con HTML

Para aprender más sobre la configuración amp, lee las secciones a continuación.

Página AMP Única

Observa el siguiente ejemplo:

export const config = { amp: true }

function About(props) {
  return <h3>¡Mi página AMP About!</h3>
}

export default About

La página anterior es una página exclusivamente AMP, lo que significa:

• La página no tiene tiempo de ejecución (runtime) de Next.js o React en el cliente
• La página se optimiza automáticamente con AMP Optimizer, un optimizador que aplica las mismas transformaciones que las cachés AMP (mejora el rendimiento hasta en un 42%)
• La página tiene una versión accesible para usuarios (optimizada) y una versión indexable por motores de búsqueda (no optimizada)

Página Híbrida AMP

Observa el siguiente ejemplo:

import { useAmp } from 'next/amp'

export const config = { amp: 'hybrid' }

function About(props) {
  const isAmp = useAmp()

  return (
    <div>
      <h3>¡Mi página AMP About!</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

La página anterior es una página híbrida AMP, lo que significa:

• La página se renderiza como HTML tradicional (por defecto) y como HTML AMP (agregando ?amp=1 a la URL)
• La versión AMP de la página solo tiene optimizaciones válidas aplicadas con AMP Optimizer para que sea indexable por motores de búsqueda

La página utiliza useAmp para diferenciar entre modos. Es un Hook de React que devuelve true si la página está usando AMP, y false en caso contrario.