Come utilizzare AMP in Next.js

Prova i due modi per aggiungere AMP a un'app Next.js

Houssein Djirdeh

Cosa imparerai?

Questo codelab ti consente di provare i due modi in cui puoi utilizzare AMP in un'app Next.js. Per scoprire perché potresti voler aggiungere il supporto AMP alla tua app Next.js.

Come creare pagine AMP ibride

L'approccio AMP ibrido crea una versione AMP abbinata a qualsiasi pagina Next.js. Nel passato l'approccio ibrido è stato spesso utilizzato quando si verificava un'esperienza sulla versione principale pagina non supportata da AMP. La versione principale offre l'esperienza completa mentre la pagina AMP offre un'esperienza leggermente ridotta. Con l'introduzione di amp-script non hai più bisogno per l'approccio ibrido, ma ne parleremo qui nel caso in cui avessi ancora bisogno.

Esistono diversi modi per configurare il modo in cui Next.js esegue il rendering e la pubblicazione delle pagine. Utilizzo di un config consente di modificarli in base alla pagina. Per pubblicare una pagina specifica una pagina AMP, devi esportare la proprietà amp nell'oggetto:

import React from 'react'

export const config = { amp: 'hybrid' };

const Home = () => (
  <p>This is the home page</p>
);

export default Home;

1. Fai clic su Remixa per modificare per rendere modificabile il progetto.

2. Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi Schermo intero .

3. Aggiungi ?amp=1 alla fine dell'URL. La pagina ha lo stesso aspetto, ma se cerchi nella potrai vedere che è in corso il rendering della versione AMP della pagina.

Poiché la pagina ha un solo tag <p>, non esiste alcuna differenza visibile tra pagina principale e la relativa versione AMP.

Come pubblicare i componenti AMP in modo condizionale

Le pagine AMP devono avere un proprio insieme di componenti validi al posto di molti elementi HTML. È è importante assicurarsi che i componenti AMP vengano pubblicati in modo condizionale solo per la pagina AMP. Next.js fornisce un hook denominato useAmp per consentirti di pubblicare diversi elementi in modo condizionale a seconda della versione della pagina richiesta.

1. Per visualizzare la fonte, premi Visualizza origine.

2. Modifica pages/index.js in modo che mostri nella pagina un elemento paragrafo diverso, a seconda che venga mostrato o meno è stata richiesta la versione principale o la versione 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. Carica la versione principale della pagina:

   

4. Aggiungi di nuovo ?amp=1 alla fine dell'URL per caricare la versione AMP della pagina:

   

5. Prova a eseguire il rendering della sostituzione del tag immagine amp-img nel formato AMP:

   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" esegue automaticamente il rendering di un'immagine completamente reattiva con proporzioni specificato da larghezza e altezza. Consulta Layout e query supporti per saperne di più i layout supportati per gli elementi AMP e amp-img per scoprire di più sul relativo ottimizzazioni.

6. Visualizza di nuovo la versione principale della pagina.

   

7. Visualizza di nuovo la versione AMP della pagina.

   

Come creare pagine solo AMP

Next.js supporta anche le pagine solo AMP. Con questo approccio, viene pubblicata e visualizzata una sola pagina AMP a utenti e motori di ricerca.

1. Per visualizzare una pagina solo AMP, modifica il valore della proprietà amp nell'oggetto config in true.

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