Utiliser AMP dans Next.js

Tester les deux méthodes pour ajouter une page AMP à une application Next.js

Houssein Djirdeh

Qu'allez-vous apprendre ?

Cet atelier de programmation vous permet de tester les deux manières d'utiliser le format AMP dans une application Next.js. Consultez Comment le format AMP peut garantir la rapidité de votre application Next.js pour comprendre pourquoi vous pouvez intégrer AMP à votre application Next.js.

Créer des pages AMP hybrides

L'approche AMP hybride permet de créer une version AMP d'accompagnement de n'importe quelle page Next.js. Par le passé l'approche hybride était souvent utilisée en cas d'utilisation de la version principale n'est pas compatible avec le format AMP. La version principale proposait une expérience complète, alors que la page AMP avait une expérience légèrement dégradée. L'introduction d'amp-script s'avère moins nécessaire pour l'approche hybride, mais nous l'aborderons ici au cas où vous en auriez encore besoin.

Il existe plusieurs façons de configurer l'affichage et la diffusion des pages de Next.js. Utiliser un config vous permet de les modifier page par page. Pour diffuser une page spécifique en tant que une page AMP, vous devez exporter la propriété amp de 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 pouvoir modifier le projet.

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

3. Ajoutez ?amp=1 à la fin de l'URL. La page est la même, mais si vous regardez vous verrez que la version AMP de la page s'affiche.

Étant donné que la page ne comporte qu'une seule balise <p>, il n'existe pas de différence visible entre les 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 au lieu 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 de diffuser différents éléments de manière conditionnelle 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 afin 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 de 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 amp-img par le format 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" affiche automatiquement une image entièrement réactive au format spécifiée par la largeur et la hauteur. Consultez Mise en page et des requêtes média pour en savoir plus les mises en page acceptées des éléments AMP, ainsi que le composant amp-img pour en savoir plus sur les et des optimisations.

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

   

7. Affichez de 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 aux internautes et aux moteurs de recherche.

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

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