useAmp

La prise en charge d'AMP est l'une de nos fonctionnalités avancées, vous pouvez en savoir plus sur AMP ici.

Pour activer AMP, ajoutez la configuration suivante à votre page :

export const config = { amp: true }

La configuration amp accepte les valeurs suivantes :

• true - La page sera en AMP uniquement
• 'hybrid' - La page aura deux versions, une avec AMP et une autre avec HTML

Pour en savoir plus sur la configuration amp, lisez les sections ci-dessous.

Page AMP First

Examinez l'exemple suivant :

export const config = { amp: true }

function About(props) {
  return <h3>Ma page AMP À propos !</h3>
}

export default About

La page ci-dessus est une page AMP uniquement, ce qui signifie :

• La page n'a pas de runtime client Next.js ou React
• La page est automatiquement optimisée avec AMP Optimizer, un optimiseur qui applique les mêmes transformations que les caches AMP (améliore les performances jusqu'à 42 %)
• La page a une version accessible aux utilisateurs (optimisée) et une version indexable par les moteurs de recherche (non optimisée)

Page AMP Hybride

Examinez l'exemple suivant :

import { useAmp } from 'next/amp'

export const config = { amp: 'hybrid' }

function About(props) {
  const isAmp = useAmp()

  return (
    <div>
      <h3>Ma page AMP À propos !</h3>
      {isAmp ? (
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="une image cool"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="une image cool" />
      )}
    </div>
  )
}

export default About

La page ci-dessus est une page AMP hybride, ce qui signifie :

• La page est rendue en HTML traditionnel (par défaut) et en AMP HTML (en ajoutant ?amp=1 à l'URL)
• La version AMP de la page n'a que les optimisations valides appliquées avec AMP Optimizer pour qu'elle soit indexable par les moteurs de recherche

La page utilise useAmp pour différencier les modes. C'est un Hook React qui renvoie true si la page utilise AMP, et false sinon.