Accelerated Mobile Pages, ou AMP , é uma estrutura de componentes da Web de código aberto que aumenta a velocidade de carregando páginas da web. O AMP impõe diretrizes rígidas sobre o HTML, CSS e JavaScript de uma página da web, controlando como recursos externos, como mídia, anúncios e outros scripts são carregados.

Neste tutorial, navegaremos por alguns dos AMPs diretrizes, aprendendo como gerenciar algumas das compensações que surgem. Abordaremos como exibir elementos que consomem recursos em uma página da Web sem deixar de seguir as regras de AMP usando componentes de AMP em um Projeto Next.js .

Se você deseja acompanhar, todo o código deste tutorial está disponível em meu GitHub . Vamos começar!

Limitações de AMP

O AMP otimiza o carregamento da página da Web, evitando que os desenvolvedores usem elementos personalizados que incluem recursos como imagens, vídeo e áudio. Da mesma forma, os desenvolvedores não podem escrever JavaScript personalizado para tarefas como exibição de anúncios dinâmicos, incorporação de postagens em mídia social e criação de formulários interativos. Para contornar essas limitações, usaremos componentes AMP.

Componentes AMP

Os componentes AMP são peças de HTML personalizadas que podemos usar para adicionar recursos complexos à nossa página da Web enquanto ainda permanece em conformidade com os padrões de AMP.

Atualmente, o catálogo de componentes de AMP inclui componentes integrados para muitos tarefas comuns, como adicionar imagens, calcular análises de páginas da web e exibir anúncios. Como os componentes integrados estão incluídos na biblioteca base de AMP, você não precisa incluí-los explicitamente em seu código.

Os componentes estendidos são extensões da base da biblioteca e não são incluídos por padrão. Em seu código, você precisará incluir componentes estendidos explicitamente como elementos personalizados. Por exemplo, você pode desejar adicionar análise de página com amp-analytics ou adicionar uma caixa de luz com amp-lightbox.

O catálogo também inclui componentes experimentais, que foram lançados, mas ainda não têm suporte para uso amplo. Se você não encontrar o que precisa no catálogo de componentes, convém escrever seu próprio componente AMP!

Agora que sabemos quais componentes AMP estão disponíveis, vamos adicionar um a uma página da web!

Transforme uma página da web em uma página AMP

Antes de podermos adicionar um componente AMP à nossa página da web, precisaremos configurá-la como uma página AMP. A configuração do amplificador aceita dois tipos de valores, verdadeiro e híbrido. Inserir um valor true transforma a página da Web em uma página AMP HTML. Inserir um valor de híbrido cria duas versões da página da web, uma em AMP HTML e outra em HTML padrão, com HTML padrão como padrão.

Vamos configurar nossa página da web como uma página AMP com verdadeiro:

export const config={amp: true}

Agora, vamos criar uma página AMP verdadeira executando o bloco de código abaixo:

export default function Page=()=> {return

Minha primeira página AMP

}

Quando exportamos a página AMP verdadeira, Next.js criará duas versões da página, uma versão otimizada para seus usuários e uma versão não otimizada para mecanismos de pesquisa.

Para criar uma página AMP híbrida, tudo o que você precisa fazer é alterar o valor da configuração da página para híbrida:

export const config={amp:’hybrid’} export default function Page=()=> {return

Minha primeira página AMP

}

Para visitar a página AMP, você precisa adicionar? Amp=1 ao final do URL. Além disso, como híbrido não é um valor booleano como true, será necessário colocá-lo entre aspas.

As páginas AMP híbridas exigem que você escreva um HTML válido para as páginas AMP e HTML padrão. Para renderizar o HTML correto, podemos usar o gancho useAmp React.

Importando o gancho useAmp React

Adicione o gancho useAmp React à sua página importando o pacote abaixo:

import {useAmp} from’next/amp’

Em seguida, crie uma variável que salve a saída do React Hook:

const isAmp=useAmp ()

Agora, você pode usar um operador ternário ou uma instrução if para renderizar o HTML correto:

{isAmp? (//componente AMP): (//HTML padrão)}

Finalmente, vamos colocar tudo junto! No exemplo abaixo, usaremos amp-img, um componente AMP que carrega imagens, para exibir uma imagem em nossa página da Web:

import {useAmp} from”next/amp”; importar imagem de”próxima/imagem”; export const config={amp:”hybrid”}; função padrão de exportação Hybrid () {const isAmp=useAmp (); return (

); }

Na versão AMP do exemplo acima, não precisamos usar a tag HTML padrão. Além disso, como o amp-img está incluído como um componente integrado, não precisamos importá-lo para nossa página da web! Se um componente da biblioteca de componentes AMP não estiver incluído na biblioteca base, receberemos a seguinte notificação de que ele requer um script externo:

Em Next.js, você precisará incluir esta tag de script no cabeçalho do seu documento, conforme visto no bloco de código abaixo:

Validando páginas AMP

Antes de exportar nossa página AMP, vamos verificar se ela atende aos requisitos de AMP. Existem muitos métodos para adicionar validação, por exemplo, pacotes npm, ferramentas de linha de comando, extensões de navegador e o console do desenvolvedor! Vamos dar uma olhada no método integrado para validação de AMP em Next.js, amphtml-validator .

Durante a criação e exportação, o amphtml-validator exige que as páginas AMP atendam às especificações AMP. Quaisquer avisos ou erros serão exibidos no terminal.

Por exemplo, digamos que você tente usar uma tag HTML normal em vez de amp-img. Isso resultará em um erro na exportação, conforme visto no código abaixo:

Validação de Amp/híbrido? Amp=1 erro A tag pai da tag’img’é’div’, mas só pode ser’i-amphtml-sizer-intrinsic’. erro A tag pai da tag’img’é’div’, mas só pode ser’i-amphtml-sizer-intrinsic’. > Ocorreu um erro de compilação Erro: A validação de AMP causou falha na exportação. https://nextjs.org/docs/messages/amp-export-validation

Se quiser usar um validador de AMP personalizado, você pode adicionar o caminho para suas regras de validação personalizadas no arquivo next.config.js:

module.exports={amp: {validator:’./custom_validator.js’,},}

Exportando páginas AMP em Next.js

Se não houver erros de validação, execute a próxima export exportará todas as nossas páginas para páginas HTML estáticas. Next.js detecta automaticamente se uma página é compatível com AMP e a exporta no formato correto.

Conforme mencionado anteriormente, uma página AMP híbrida será exportada como dois arquivos. Por exemplo, digamos que temos uma página híbrida chamada pages/blog.js. Ele seria exportado como out/blog.html, uma página HTML padrão com um tempo de execução React do lado do cliente, e out/blog.amp.html, uma página HTML AMP.

O Next.js será inserido automaticamente um link da página AMP para a página HTML padrão e vice-versa, conforme visto nos dois snippets de código a seguir, respectivamente:

Se pages/blog.js fossem uma página AMP verdadeira, ela exportaria um único arquivo HTML chamado out/blog.html.

Conclusão

Agora, você sabe como começar a usar os componentes AMP no Next.js!

Neste tutorial, abordamos os componentes AMP integrados, extensíveis e experimentais. e páginas AMP híbridas e o useAmp React Hook. Em seguida, aprendemos como validar e exportar páginas AMP em Next.js.

No momento em que este artigo foi escrito, AMP era compatível apenas com CSS-in-JS para estilização. No entanto, o suporte para módulos CSS está sendo desenvolvido e você pode encontrar algumas soluções alternativas no GitHub .

Da mesma forma, não há suporte oficial para TypeScript . Embora esteja no roteiro, não há uma data de lançamento agendada ainda. Como alternativa, você pode criar um arquivo com tipos personalizados chamados amp.d.ts dentro do seu projeto e adicione tipos personalizados para AMP.

Espero que tenha gostado deste tutorial! Se você estiver travado, deixe um comentário e farei o possível para ajudá-lo.