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. Confira Como a AMP pode garantir velocidade no seu app Next.js para saber por que você pode querer 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 de acompanhamento de qualquer página do Next.js. No passado, a abordagem híbrida era usada com frequência quando havia uma experiência na versão principal da página que não era compatível com a tecnologia AMP. A versão principal tinha a experiência completa, enquanto a página AMP tinha uma experiência ligeiramente degradada. Com a introdução do amp-script, há menos necessidade da abordagem híbrida, mas vamos vê-la aqui caso você ainda precise dela.
Há várias maneiras de configurar como o Next.js renderiza e veicula páginas. Usar um objeto config
permite que você os modifique por página. Para veicular uma página específica como
AMP, você precisa 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 parece a mesma, mas, se você abrir o Console, verá que a versão AMP da página está sendo renderizada.
Como a página tem apenas uma tag <p>
, não há diferença visível entre a página principal e a versão AMP dela.
Como veicular componentes AMP condicionalmente
As páginas AMP precisam ter o próprio conjunto de componentes válidos no lugar de muitos elementos HTML. É importante garantir que os componentes AMP sejam veiculados condicionalmente apenas para a página AMP.
O Next.js fornece um hook chamado useAmp
para permitir que você disponibilize condicionalmente diferentes elementos, dependendo de qual versão da página foi solicitada.
Para ver a fonte, pressione Ver fonte.
Edite
pages/index.js
para que ele renderize um elemento de parágrafo diferente para a página, dependendo da solicitação da versão principal ou da 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;
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 a substituição da tag de imagem na AMP,
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 especificada por largura e altura. Confira Consultas de mídia e layout para saber mais sobre os layouts compatíveis com elementos AMP e amp-img para saber mais sobre as otimizações desse elemento.Visualize a versão principal da página novamente.
Abra a versão AMP da página novamente.
Como criar páginas somente AMP
O Next.js também oferece suporte a páginas somente AMP. Com essa abordagem, uma única página AMP é veiculada e renderizada para usuários e mecanismos de pesquisa a todo momento.
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;