Cómo usar AMP en Next.js

Prueba las dos formas en las que puedes agregar AMP a una app de Next.js

Houssein Djirdeh

Para seguir este codelab, abre este error en una segunda pestaña.

¿Qué aprenderás?

Este codelab te permite probar las dos formas en que puedes usar AMP en una app de Next.js. Consulta Cómo AMP puede garantizar la rapidez en tu app de Next.js para descubrir los motivos agregar compatibilidad con AMP a tu app de Next.js.

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

Precaución: El enfoque solo para AMP es la ruta recomendada para usar AMP con Next.js. El enfoque de AMP híbrido descrito en esta sección tiene un costo de mantenimiento más alto que el enfoque solo de AMP porque requiere que mantenga dos versiones de cada página. Solo debes usar el enfoque híbrido si tienes la certeza de que el enfoque solo de AMP no funcionará.

El enfoque de AMP híbrido 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 tu página que AMP no podía admitir. La versión principal tenía la experiencia completa, mientras que la página de AMP tenía una experiencia ligeramente degradada. Con la introducción de amp-script, no se necesita menos. para el enfoque híbrido, pero lo veremos aquí en caso de que aún lo necesites.

Existen varias formas de configurar cómo Next.js procesa y entrega páginas. Usa un config del objeto te permite modificarlos por página. Para entregar 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 para editar para que el proyecto se pueda editar.

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 miras en en la consola, verás que se está renderizando la versión de AMP de la página.

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

Cómo publicar componentes de AMP de manera condicional

Las páginas de AMP deben tener su propio conjunto de componentes válidos en lugar de muchos elementos HTML. Es importante para asegurarse de que los componentes de AMP se publiquen de forma condicional solo para la página de AMP. Next.js proporciona un hook llamado useAmp para permitirte entregar diferentes elementos de forma condicional. 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, en función de si se solicitó la versión principal o la versión 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 totalmente responsiva con una relación de aspecto. especificadas por ancho y alto. Consulta Diseño y consultas de medios para obtener más información los diseños compatibles de los elementos de AMP y amp-img para obtener más información sobre los elementos optimizaciones.

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, se publica y renderiza una sola página de AMP a los usuarios y 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;