Prueba las dos formas en las que puedes agregar AMP a una app de Next.js
¿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
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;
Haz clic en Remix para editar para que el proyecto se pueda editar.
Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
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.
![La página en vivo y un mensaje en la consola de Herramientas para desarrolladores de Chrome que indica que la página funciona con AMP.](https://web.developers.google.cn/static/articles/how-to-use-amp-in-nextjs/image/the-live-page-a-message-da2dbcd870547.png?authuser=7&hl=es-419)
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ó.
Para ver la fuente, presiona Ver fuente.
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;
Carga la versión principal de la página:
Vuelve a agregar
?amp=1
al final de la URL para cargar la versión de AMP de la página: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.Vuelve a ver la versión principal de la página.
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.
Para renderizar una página solo de AMP, cambia el valor de la propiedad
amp
en el objeto de configuración atrue
.import React from 'react' export const config = { amp: true }; const Home = () => ( <p>This is an AMP-only page</p> ); export default Home;