AMP in Next.js verwenden

Zwei Möglichkeiten zum Hinzufügen von AMP zu einer Next.js-App ausprobieren

Houssein Djirdeh

Öffne diesen Glitch in einem zweiten Tab, um dem Codelab zu folgen.

Themen in dieser Anleitung

In diesem Codelab können Sie die zwei Möglichkeiten zur Verwendung von AMP in einer Next.js-App ausprobieren. Lesen Sie den Artikel Wie AMP-Geschwindigkeit in der Next.js-App garantiert, um zu erfahren, warum Sie sollten Sie Ihrer Next.js-App AMP-Unterstützung hinzufügen.

Hybrid-AMP-Seiten erstellen

Achtung : Für die Verwendung von AMP mit Next.js wird die reine AMP-Methode empfohlen. Der in diesem Abschnitt beschriebene hybride AMP-Ansatz verursacht höhere Wartungskosten als der reine AMP-Ansatz, da Sie bei diesem Ansatz zwei Versionen jeder Seite verwalten müssen. Sie sollten den hybriden Ansatz nur verwenden, wenn Sie sicher sind, dass der reine AMP-Ansatz nicht funktioniert.

Beim Hybrid-AMP-Ansatz wird für jede Next.js-Seite eine zugehörige AMP-Version erstellt. Früher Der Hybridansatz wurde häufig verwendet, wenn es eine Erfahrung in der Hauptversion Ihres Unternehmens gab, die von AMP nicht unterstützt werden. Die Hauptversion war vollständig nutzerfreundlich, die AMP-Seite hingegen schon. beeinträchtigt. Mit der Einführung von amp-script ist das .

Sie haben mehrere Möglichkeiten, zu konfigurieren, wie Next.js Seiten rendert und bereitstellt. Mit config können Sie diese auf Seitenbasis ändern. Um eine bestimmte Seite als einer AMP-Seite ist, musst du das Attribut amp im Objekt exportieren:

import React from 'react'

export const config = { amp: 'hybrid' };

const Home = () => (
  <p>This is the home page</p>
);

export default Home;

1. Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.

2. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild

3. Fügen Sie am Ende der URL ?amp=1 hinzu. Die Seite sieht genauso aus, aber wenn Sie in der können Sie sehen, dass die AMP-Version der Seite gerendert wird.

Da die Seite nur ein einziges <p>-Tag hat, ist kein Unterschied zwischen den Tags der Hauptseite und ihrer AMP-Version.

AMP-Komponenten bedingt bereitstellen

AMP-Seiten müssen ihre eigenen gültigen Komponenten anstelle vieler HTML-Elemente haben. Es ist dass die AMP-Komponenten nur für die AMP-Seite bedingt ausgeliefert werden. Next.js bietet einen Hook mit dem Namen useAmp, mit dem Sie verschiedene Elemente bedingt bereitstellen können. je nachdem, welche Version der Seite angefordert wurde.

1. Um die Quelle anzuzeigen, drücken Sie Quelltext anzeigen.

2. Bearbeiten Sie pages/index.js so, dass auf der Seite ein anderes Absatzelement gerendert wird, je nachdem, die Hauptversion oder die AMP-Version angefordert wurde:

   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. Laden Sie die Hauptversion der Seite:

   

4. Fügen Sie ?amp=1 noch einmal am Ende der URL hinzu, um die AMP-Version der Seite zu laden:

   

5. Versuchen Sie, den Ersatz des Bild-Tags amp-img durch AMP zu rendern:

   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" rendert automatisch ein vollständig responsives Bild mit einem bestimmten Seitenverhältnis. Breite und Höhe angegeben werden. Weitere Informationen finden Sie unter Layout & Medienabfragen, um mehr über unterstützte Layouts von AMP-Elementen und amp-img, um mehr über die Funktionsweise dieses Elements zu erfahren Optimierungen vor.

6. Rufen Sie die Hauptversion der Seite noch einmal auf.

   

7. Rufen Sie die AMP-Version der Seite noch einmal auf.

   

Nur-AMP-Seiten erstellen

Next.js unterstützt auch reine AMP-Seiten. Bei diesem Ansatz wird eine einzelne AMP-Seite ausgeliefert und gerendert. für Nutzer und Suchmaschinen.

1. Wenn du eine reine AMP-Seite rendern möchtest, ändere den Wert der amp-Eigenschaft im Konfigurationsobjekt in true.

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