Cómo usar AMP en Next.js

Prueba las dos maneras de agregar AMP a una app de Next.js.

Houssein Djirdeh

¿Qué aprenderás?

Este codelab te permite probar las dos maneras de usar AMP en una app de Next.js. Consulta Cómo AMP puede garantizar la rapidez en tu app de Next.js para descubrir por qué es recomendable agregar compatibilidad con AMP a tu app de Next.js.

Cómo crear páginas de AMP híbridas

El enfoque de AMP híbrida crea una versión de AMP complementaria de cualquier página de Next.js. En el pasado, el enfoque híbrido se usaba con frecuencia cuando había una experiencia en la versión principal de la página que AMP no podía admitir. La versión principal tuvo la experiencia completa, mientras que la página de AMP tuvo una experiencia ligeramente deteriorada. Con la introducción de amp-script, el enfoque híbrido no es tan necesario, pero lo abordaremos aquí en caso de que aún lo necesites.

Existen varias formas de configurar la forma en que Next.js renderiza y publica páginas. Si usas un objeto config, podrás modificarlas por página. Para publicar una página específica como una página de AMP, debes exportar la propiedad amp en el objeto:

import React from 'react'

export const config = { amp: 'hybrid' };

const Home = () => (
  <p>This is the home page</p>
);

export default Home;

1. Haz clic en Remix to Edit para que el proyecto sea editable.

2. Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa .

3. Agrega ?amp=1 al final de la URL. La página se ve igual, pero si observas en Console, verás que se está renderizando la versión de AMP de la página.

Como la página solo tiene una etiqueta <p>, no hay diferencia visible entre la página principal y su versión de AMP.

Cómo publicar condicionalmente componentes de AMP

Las páginas de AMP deben tener su propio conjunto de componentes válidos en lugar de muchos elementos HTML. Es importante asegurarse de que los componentes de AMP se publiquen de manera condicional solo para la página de AMP. Next.js proporciona un hook llamado useAmp para que puedas entregar de forma condicional diferentes elementos según la versión de la página que se solicitó.

1. Para ver la fuente, presiona Ver fuente.

2. Edita pages/index.js para que renderice un elemento de párrafo diferente en la página según si se solicitó la versión principal o la versión de AMP:

   import React from 'react';
   import { useAmp } from 'next/amp';
   
   export const config = { amp: 'hybrid' };
   
   const Home = () => (
     useAmp() ? (
       <p>This is the <strong>AMP</strong> version of the home page</p>
     ) : (
       <p>This is the main version of the home page</p>
     )
   );
   
   export default Home;
   

3. Carga la versión principal de la página:

   

4. Vuelve a agregar ?amp=1 al final de la URL para cargar la versión de AMP de la página:

   

5. Intenta renderizar el reemplazo de AMP de la etiqueta de imagen, amp-img:

   import React from 'react';
   import { useAmp } from 'next/amp';
   
   export const config = { amp: 'hybrid' };
   
   const imgSrc = 'https://placekitten.com/1000/1000';
   
   const Image = () => (
     useAmp() ? (
       <amp-img alt="A cute kitten"
         src={imgSrc}
         width="1000"
         height="1000"
         layout="responsive">
       </amp-img>
     ) : (
       <img alt="A cute kitten"
         src={imgSrc}
         width="1000"
         height="1000">
       </img>
     )
   );
   
   const Home = () => (
     <div>
       <Image />
     </div>
   );
   
   export default Home;
   

   layout="responsive" renderiza automáticamente una imagen completamente responsiva con una relación de aspecto especificada por el ancho y la altura. Consulta Consultas de diseño y medios para obtener más información sobre los diseños compatibles de los elementos de AMP y sobre amp-img para obtener más información sobre las optimizaciones de ese elemento.

6. Vuelve a ver la versión principal de la página.

   

7. Vuelve a ver la versión de AMP de la página.

   

Cómo crear páginas solo de AMP

Next.js también admite páginas solo de AMP. Con este enfoque, una sola página de AMP se publica y se renderiza para los usuarios y los motores de búsqueda en todo momento.

1. Para renderizar una página solo de AMP, cambia el valor de la propiedad amp en el objeto de configuración a true.

   import React from 'react'
   
   export const config = { amp: true };
   
   const Home = () => (
     <p>This is an AMP-only page</p>
   );
   
   export default Home;