Como usar a tecnologia AMP no Next.js

Teste as duas maneiras de adicionar AMP a um app Next.js

Houssein Djirdeh

Para seguir este codelab, abra este Glitch em uma segunda guia.

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

Cuidado : a abordagem somente AMP é o caminho recomendado para usar AMP com o Next.js. A abordagem de AMP híbrida descrita nesta seção tem um custo de manutenção maior do que a abordagem somente de AMP porque exige que você mantenha duas versões de cada página. Use a abordagem híbrida apenas se tiver certeza de que a abordagem somente com AMP não vai funcionar.

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;

1. Clique em Remixar para editar para tornar o projeto editável.

2. Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia

3. 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.

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.

1. Para conferir a fonte, pressione Ver código-fonte.

2. 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;
   

3. Carregue a versão principal da página:

   

4. Adicione ?amp=1 ao final do URL novamente para carregar a versão AMP da página:

   

5. 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.

6. Veja a versão principal da página novamente.

   

7. 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.

1. Para renderizar uma página somente AMP, altere o valor da propriedade amp no objeto de configuração para true.

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