Tester les deux méthodes pour ajouter une page AMP à une application Next.js
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;
Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran
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.
![Page en ligne et message dans la console des outils pour les développeurs Chrome indiquant que la page utilise la technologie AMP.](https://web.dev/static/articles/how-to-use-amp-in-nextjs/image/the-live-page-a-message-da2dbcd870547.png?authuser=5&hl=fr)
É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.
Pour afficher la source, appuyez sur Afficher la source.
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;
Chargez la version principale de la page:
Ajoutez de nouveau
?amp=1
à la fin de l'URL pour charger la version AMP de la page: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.Affichez à nouveau la version principale de la page.
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.
Pour afficher une page AMP uniquement, remplacez la valeur de la propriété
amp
dans l'objet de configuration partrue
.import React from 'react' export const config = { amp: true }; const Home = () => ( <p>This is an AMP-only page</p> ); export default Home;