Comment créer des pages AMP dans Next.js

Exemples

Avec Next.js, vous pouvez transformer n'importe quelle page React en page AMP, avec une configuration minimale et sans quitter React.

Vous pouvez en savoir plus sur AMP sur le site officiel amp.dev.

Activation d'AMP

Pour activer le support AMP pour une page et en savoir plus sur les différentes configurations AMP, consultez la documentation API de next/amp.

Limitations

Seul le CSS-in-JS est pris en charge. Les CSS Modules ne sont pas supportés par les pages AMP pour le moment. Vous pouvez contribuer au support des CSS Modules dans Next.js.

La communauté AMP propose de nombreux composants pour rendre les pages AMP plus interactives. Next.js importera automatiquement tous les composants utilisés sur une page et il n'est pas nécessaire d'importer manuellement les scripts des composants AMP :

export const config = { amp: true }

function MyAmpPage() {
  const date = new Date()

  return (
    <div>
      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

L'exemple ci-dessus utilise le composant amp-timeago.

Par défaut, la dernière version d'un composant est toujours importée. Si vous souhaitez personnaliser la version, vous pouvez utiliser next/head, comme dans l'exemple suivant :

import Head from 'next/head'

export const config = { amp: true }

function MyAmpPage() {
  const date = new Date()

  return (
    <div>
      <Head>
        <script
          async
          key="amp-timeago"
          custom-element="amp-timeago"
          src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
        />
      </Head>

      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

Validation AMP

Les pages AMP sont automatiquement validées avec amphtml-validator pendant le développement. Les erreurs et avertissements apparaîtront dans le terminal où vous avez lancé Next.js.

Les pages sont également validées lors de l'export HTML statique et tous les avertissements/erreurs seront affichés dans le terminal. Toute erreur AMP entraînera l'arrêt de l'export avec le code d'état 1 car l'export n'est pas une AMP valide.

Validateurs personnalisés

Vous pouvez configurer un validateur AMP personnalisé dans next.config.js comme indiqué ci-dessous :

module.exports = {
  amp: {
    validator: './custom_validator.js',
  },
}

Désactivation de la validation AMP

Pour désactiver la validation AMP, ajoutez le code suivant à next.config.js :

experimental: {
  amp: {
    skipValidation: true
  }
}

AMP dans l'export HTML statique

Lors de l'utilisation de l'export HTML statique pour pré-rendre des pages statiquement, Next.js détectera si la page prend en charge AMP et modifiera le comportement d'export en conséquence.

Par exemple, la page AMP hybride pages/about.js produirait :

out/about.html - Page HTML avec runtime React côté client
out/about.amp.html - Page AMP

Et si pages/about.js est une page AMP uniquement, alors elle produirait :

out/about.html - Page AMP optimisée

Next.js insérera automatiquement un lien vers la version AMP de votre page dans la version HTML, vous n'avez donc pas à le faire, comme ceci :

<link rel="amphtml" href="/about.amp.html" />

Et la version AMP de votre page inclura un lien vers la page HTML :

<link rel="canonical" href="/about" />

Lorsque trailingSlash est activé, les pages exportées pour pages/about.js seraient :

out/about/index.html - Page HTML
out/about.amp/index.html - Page AMP

TypeScript

AMP ne dispose pas actuellement de types intégrés pour TypeScript, mais cela fait partie de leur feuille de route (#13791).

Comme solution alternative, vous pouvez créer manuellement un fichier appelé amp.d.ts dans votre projet et y ajouter ces types personnalisés.