Utiliser AMP dans Next.js

Essayez les deux méthodes permettant d'ajouter des pages AMP à une application Next.js.

Houssein Djirdeh

Pour suivre cet atelier de programmation, ouvrez ce Glitch dans un deuxième onglet.

Qu'allez-vous apprendre ?

Cet atelier de programmation vous permet d'essayer les deux manières d'utiliser AMP dans une application Next.js. Pour savoir pourquoi la technologie AMP peut être utilisée dans votre application Next.js, consultez Comment la technologie AMP peut garantir la rapidité de votre application Next.js.

Créer des pages AMP hybrides

Attention : L'approche AMP uniquement est recommandée pour utiliser AMP avec Next.js. L'approche AMP hybride décrite dans cette section entraîne des coûts de maintenance plus élevés que l'approche AMP uniquement, car elle vous oblige à gérer deux versions de chaque page. N'utilisez l'approche hybride que si vous êtes certain que l'approche AMP uniquement ne fonctionnera pas.

L'approche AMP hybride crée une version AMP associée à n'importe quelle page Next.js. Auparavant, l'approche hybride était fréquemment utilisée lorsque la version principale de votre page comportait une expérience non compatible avec les pages AMP. La version principale proposait l'expérience complète, tandis que la page AMP présentait une expérience légèrement dégradée. Avec l'introduction du composant amp-script, l'approche hybride est moins nécessaire, mais nous l'aborderons ici, au cas où vous en auriez encore besoin.

Il existe plusieurs façons de configurer la manière dont Next.js affiche et diffuse les pages. L'utilisation d'un objet config vous permet de les modifier page par page. Pour diffuser une page spécifique en tant que page AMP, vous devez exporter la propriété amp dans l'objet:

import React from 'react'

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

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

export default Home;

1. Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.

2. Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .

3. Ajoutez ?amp=1 à la fin de l'URL. La page est identique, mais si vous consultez la console, vous constaterez que la version AMP de la page est affichée.

Étant donné que la page ne comporte qu'une seule balise <p>, il n'y a aucune différence visible entre la page principale et sa version AMP.

Diffuser des composants AMP de manière conditionnelle

Les pages AMP doivent disposer de leur propre ensemble de composants valides à la place de nombreux éléments HTML. Il est important de s'assurer que les composants AMP ne sont diffusés de manière conditionnelle que pour la page AMP. Next.js fournit un hook appelé useAmp pour vous permettre d'afficher de manière conditionnelle différents éléments en fonction de la version de la page demandée.

1. Pour afficher la source, appuyez sur Afficher la source.

2. Modifiez pages/index.js de sorte qu'il affiche un élément de paragraphe différent sur la page selon que la version principale ou la version AMP a été demandée:

   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. Chargez la version principale de la page:

   

4. Ajoutez à nouveau ?amp=1 à la fin de l'URL pour charger la version AMP de la page:

   

5. Essayez d'afficher le remplacement du tag d'image par le format 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" affiche automatiquement une image entièrement responsive avec un format spécifié par la largeur et la hauteur. Consultez Mise en page et requêtes multimédias pour en savoir plus sur les mises en page acceptées pour les éléments AMP, et amp-img pour en savoir plus sur les optimisations de cet élément.

6. Affichez de nouveau la version principale de la page.

   

7. Affichez à nouveau la version AMP de la page.

   

Créer des pages AMP uniquement

Next.js est également compatible avec les pages AMP uniquement. Avec cette approche, une seule page AMP est diffusée et affichée auprès des internautes et des moteurs de recherche à tout moment.

1. Pour afficher une page AMP uniquement, remplacez la valeur de la propriété amp dans l'objet "config" par true.

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