Come utilizzare AMP in Next.js

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

Houssein Djirdeh

Per seguire questo codelab, apri questo Glitch in una seconda scheda.

Cosa imparerai a fare?

Questo codelab ti consente di provare i due modi in cui puoi utilizzare AMP in un'app Next.js. Leggi In che modo la tecnologia AMP può garantire la solidità nell'app Next.js per scoprire perché potresti aggiungere il supporto di AMP nell'app Next.js.

Come creare pagine AMP ibride

Attenzione: l'approccio solo AMP è il percorso consigliato per utilizzare AMP con Next.js. L'approccio AMP ibrido descritto in questa sezione ha un costo di manutenzione maggiore rispetto all'approccio solo AMP perché richiede la gestione di due versioni di ogni pagina. Dovresti utilizzare l'approccio ibrido solo se hai la certezza che quello solo AMP non funzionerà.

L'approccio AMP ibrida crea una versione AMP associata di qualsiasi pagina Next.js. In passato, l'approccio ibrido veniva spesso utilizzato quando nella versione principale della pagina si verificava un'esperienza non supportata da AMP. La versione principale aveva l'esperienza completa, mentre la pagina AMP aveva un'esperienza leggermente ridotta. Con l'introduzione di amp-script non è necessario usare l'approccio ibrido, ma ne parleremo qui nel caso in cui ne avessi ancora bisogno.

Esistono diversi modi per configurare il modo in cui Next.js esegue il rendering e la pubblicazione delle pagine. L'utilizzo di un oggetto config consente di modificarli per singola pagina. Per pubblicare una pagina specifica come 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 Remix per modificare per rendere il progetto modificabile.

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

3. Aggiungi ?amp=1 alla fine dell'URL. La pagina ha lo stesso aspetto, ma nella console puoi 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 la 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 chiamato useAmp per consentirti di pubblicare elementi diversi in modo condizionale a seconda della versione della pagina richiesta.

1. Per visualizzare la fonte, premi Visualizza sorgente.

2. Modifica pages/index.js in modo che nella pagina venga visualizzato un elemento paragrafo diverso a seconda che sia 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 in formato 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" esegue automaticamente il rendering di un'immagine completamente adattabile con proporzioni specificate da larghezza e altezza. Consulta Query su layout e contenuti multimediali per scoprire di più sui layout supportati degli elementi AMP e amp-img per scoprire di più sulle ottimizzazioni di quell'elemento.

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 sempre pubblicata e visualizzata una singola pagina AMP per 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;