Next.js 8.1

Aujourd'hui, nous sommes ravis d'annoncer que nous avons étendu l'expérience Next.js à la création de pages AMP.

• Qu'est-ce que AMP ?
• AMP dans Next.js
• Pages hybrides AMP
• Pages AMP-first
• Validation AMP

Qu'est-ce que AMP ?

AMP est un standard pour créer des sites web hautes performances qui minimise la surcharge de rendu et peut être indexé sur les moteurs de recherche avec des fonctionnalités améliorées. Par exemple, les pages AMP sont chargées directement dans les résultats de recherche mobiles de Google et sont marquées par une icône d'éclair.

Résultat de recherche Google pour Next.js

AMP HTML est une version plus stricte de HTML qui impose quelques restrictions pour atteindre des performances plus fiables et une meilleure évolutivité. Certaines balises HTML sont remplacées par des balises HTML spécifiques à AMP pour fournir une meilleure expérience que leurs équivalents HTML. Par exemple, la balise amp-img fournit un support complet de srcset même dans les navigateurs qui ne le prennent pas encore en charge.

Les pages AMP sont automatiquement découvertes par les moteurs de recherche qui les supportent. Ces moteurs de recherche implémentent généralement un Cache AMP (par exemple Google et Bing). Les caches AMP aident la page à s'afficher plus rapidement depuis leurs résultats de recherche.

AMP dans Next.js

Aujourd'hui, nous sommes ravis d'annoncer que nous avons étendu l'expérience Next.js à la création de pages AMP. Cela signifie que vous pouvez désormais exploiter la puissance des composants React pour créer des pages AMP. Le support AMP est défini page par page, permettant une adoption progressive d'AMP. Il existe deux façons d'activer AMP dans Next.js : une page hybride AMP ou une page AMP-first.

Pages hybrides AMP

Les pages hybrides AMP vous permettent d'avoir une version AMP accompagnant une page traditionnelle, afin que les moteurs de recherche puissent afficher la version AMP de la page dans les résultats de recherche mobiles tout en conservant la version existante de la page. Cela permet d'utiliser AMP dans votre application tout en profitant des fonctionnalités de Next.js comme le routage côté client pour l'expérience utilisateur principale.

Pour activer une page hybride AMP, utilisez la fonction withAmp en fournissant l'option hybrid: true :

function HomePage() {
  return <p>Bienvenue sur AMP + Next.js.</p>;
}
 
export default withAmp(HomePage, { hybrid: true });

Un exemple de ce modèle hybride AMP utilisé en production est Reddit. Chaque fil est stocké dans le Cache AMP de Google pour fournir une expérience utilisateur rapide sur le web mobile tout en offrant la version complète de Reddit pour les ordinateurs de bureau et la navigation ultérieure.

Image de Reddit utilisant AMP pour améliorer le SEO

Image de Reddit dans la visionneuse AMP

Pages AMP-First

Les pages AMP-first sont servies au trafic principal du site web ainsi qu'au trafic des moteurs de recherche. En utilisant des pages AMP-first, nous apportons l'expérience rapide d'AMP au site web principal, y compris sur ordinateur de bureau.

Pour implémenter des pages AMP-first, vous enveloppez les pages avec la fonction withAmp :

import { withAmp } from 'next/amp';
function HomePage() {
  return <p>Bienvenue sur AMP + Next.js.</p>;
}
 
export default withAmp(HomePage);

Si vous n'avez pas besoin du runtime Next.js, utiliser des pages AMP-first peut accélérer le développement. AMP-First vous oblige à n'utiliser que des composants compatibles AMP pour construire vos pages. Les pages AMP-first sont actuellement en production sur nextjs.org/docs et nextjs.org/blog.

Distinction du rendu AMP dans les composants

Tout composant React dans votre projet peut utiliser useAmp pour distinguer entre le mode de rendu AMP et non-AMP. Cela vous permet d'implémenter un composant <Image> qui partage la logique entre <img> et <amp-img> :

import { useAmp } from 'next/amp';
 
export function Image({ src, width, height }) {
  const isAmp = useAmp();
  return isAmp ? (
    <amp-img src={src} width={width} height={height} />
  ) : (
    <img src={src} width={width} height={height} />
  );
}

import { withAmp } from 'next/amp';
import { Image } from '../components/image';
 
function HomePage() {
  return (
    <>
      <p>Bonjour ! Bienvenue sur AMP + Next.js.</p>
      <Image src="https://placehold.it/120" width="120" height="120" />
    </>
  );
}
 
export default withAmp(HomePage, { hybrid: true });

Rechargement automatique pour le développement AMP

En développement, au lieu d'utiliser le remplacement de module à chaud (hot-module-replacement), nous suivons les changements sur la page que vous consultez et ne rechargeons la page que lorsqu'elle a été modifiée. La raison pour laquelle nous utilisons un rechargement complet au lieu du remplacement de module à chaud est de nous assurer que vous voyez toujours un rendu côté serveur frais de votre page AMP.

Validation AMP

Pour aider à s'assurer que seules des pages AMP valides sont produites, nous les validons automatiquement avec amphtml-validator pendant le développement. Les erreurs et avertissements apparaîtront dans le terminal où vous avez démarré Next.js.

Les pages sont également validées pendant next export et tout problème sera affiché dans le terminal. Toute erreur AMP fera échouer next export car l'export n'est pas une AMP valide.

Apprenez à utiliser AMP avec Next.js

En plus d'apprendre à utiliser Next.js, nous avons ajouté une nouvelle section pour apprendre à utiliser AMP dans Next.js.

Vous pouvez aussi commencer avec l'exemple AMP :

npx create-next-app --example amp amp-app