Como usar a tecnologia AMP no Next.js

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

Houssein Djirdeh

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

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 para AMP porque exige que você mantenha duas versões de cada página. Só use a abordagem híbrida se tiver certeza de que a abordagem somente para AMP não vai funcionar.

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;

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

1. Para ver a fonte, pressione Ver fonte.

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

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

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

   

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

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;