Teste as duas maneiras de adicionar AMP a um app Next.js
O que você aprenderá?
Este codelab permite testar as duas maneiras de usar AMP em um app Next.js. Leia o artigo Como as AMP podem garantir a agilidade do seu app Next.js para saber por que você convém adicionar compatibilidade com AMP ao seu app Next.js.
Como criar páginas AMP híbridas
A abordagem de AMP híbrida cria uma versão AMP complementar de qualquer página Next.js. No passado a abordagem híbrida era usada com frequência quando havia uma experiência na versão principal de seu página que não era compatível com AMP. A versão principal tinha a experiência completa, enquanto a página AMP tinha uma experiência um pouco prejudicada. Com a introdução do amp-script, elimina a necessidade de para a abordagem híbrida, mas falaremos sobre isso aqui caso você ainda precise.
Há várias maneiras de configurar como o Next.js renderiza e veicula páginas. Como usar um config
permite que você os modifique por página. Para exibir uma página específica como
uma página AMP, será necessário exportar a propriedade amp
no objeto:
import React from 'react'
export const config = { amp: 'hybrid' };
const Home = () => (
<p>This is the home page</p>
);
export default Home;
Clique em Remixar para editar para tornar o projeto editável.
Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia
Adicione
?amp=1
ao final do URL. A página tem a mesma aparência, mas se você olhar no você verá que a versão AMP da página está sendo renderizada.
![A página ativa e uma mensagem no console do Chrome DevTools informando que a página usa tecnologia AMP.](https://web.dev/static/articles/how-to-use-amp-in-nextjs/image/the-live-page-a-message-da2dbcd870547.png?authuser=6&hl=pt)
Como a página tem apenas uma tag <p>
, não há diferença visível entre as tags
da página principal e da versão AMP dele.
Como veicular condicionalmente componentes AMP
As páginas AMP precisam ter um conjunto próprio de componentes válidos no lugar de muitos elementos HTML. Está
é importante garantir que os componentes AMP sejam veiculados condicionalmente somente para a página AMP.
O Next.js fornece um hook chamado useAmp
para permitir a veiculação condicional de elementos diferentes.
dependendo da versão da página solicitada.
Para conferir a fonte, pressione Ver código-fonte.
Edite o
pages/index.js
para que ele renderize um elemento de parágrafo diferente na página, dependendo se a versão principal ou a versão AMP foi solicitada: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;
Carregue a versão principal da página:
Adicione
?amp=1
ao final do URL novamente para carregar a versão AMP da página:Tente renderizar o substituto da AMP da tag de imagem,
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 automaticamente uma imagem totalmente responsiva com uma proporção especificado por largura e altura. Consulte Layout e consultas de mídia para saber mais sobre os layouts compatíveis de elementos AMP e amp-img para saber mais sobre os e otimizações.Veja a versão principal da página novamente.
Visualize a versão AMP da página novamente.
Como criar páginas somente AMP
O Next.js também é compatível com páginas AMP. Com essa abordagem, uma única página AMP é veiculada e renderizada. para usuários e mecanismos de pesquisa o tempo todo.
Para renderizar uma página somente AMP, altere o valor da propriedade
amp
no objeto de configuração paratrue
.import React from 'react' export const config = { amp: true }; const Home = () => ( <p>This is an AMP-only page</p> ); export default Home;