Cómo crear páginas AMP en Next.js

Ejemplos

Con Next.js puede convertir cualquier página React en una página AMP, con una configuración mínima y sin salir de React.

Puede leer más sobre AMP en el sitio oficial amp.dev.

Habilitar AMP

Para habilitar el soporte AMP en una página y conocer las diferentes configuraciones de AMP, consulte la documentación de la API para next/amp.

Limitaciones

Solo se admite CSS-in-JS. Los Módulos CSS no son compatibles con las páginas AMP actualmente. Puede contribuir al soporte de Módulos CSS en Next.js.

La comunidad AMP proporciona muchos componentes para hacer las páginas AMP más interactivas. Next.js importará automáticamente todos los componentes usados en una página y no es necesario importar manualmente los scripts de componentes AMP:

export const config = { amp: true }

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

  return (
    <div>
      <p>Alguna hora: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

El ejemplo anterior utiliza el componente amp-timeago.

Por defecto, siempre se importa la última versión de un componente. Si desea personalizar la versión, puede usar next/head, como en el siguiente ejemplo:

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>Alguna hora: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

Validación AMP

Las páginas AMP se validan 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 la exportación HTML estática y cualquier advertencia/error se imprimirá en la terminal. Cualquier error AMP hará que la exportación termine con código de estado 1 porque la exportación no es AMP válida.

Validadores personalizados

Puede configurar un validador AMP personalizado en next.config.js como se muestra a continuación:

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

Omitir validación AMP

Para desactivar la validación AMP agregue el siguiente código a next.config.js:

experimental: {
  amp: {
    skipValidation: true
  }
}

AMP en exportación HTML estática

Al usar la exportación HTML estática para prerrenderizar páginas, Next.js detectará si la página admite AMP y cambiará el comportamiento de exportación en consecuencia.

Por ejemplo, la página híbrida AMP pages/about.js generaría:

out/about.html - Página HTML con runtime React del lado del cliente
out/about.amp.html - Página AMP

Y si pages/about.js es una página solo AMP, entonces generaría:

out/about.html - Página AMP optimizada

Next.js insertará automáticamente un enlace a la versión AMP de su página en la versión HTML, así que no tiene que hacerlo manualmente, de esta manera:

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

Y la versión AMP de su página incluirá un enlace a la página HTML:

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

Cuando trailingSlash está habilitado, las páginas exportadas para pages/about.js serían:

out/about/index.html - Página HTML
out/about.amp/index.html - Página AMP

TypeScript

AMP actualmente no tiene tipos integrados para TypeScript, pero está en su hoja de ruta (#13791).

Como solución alternativa, puede crear manualmente un archivo llamado amp.d.ts dentro de su proyecto y agregar estos tipos personalizados.