AMP in Next.js verwenden

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

Houssein Djirdeh

Themen in dieser Anleitung

In diesem Codelab können Sie die beiden Möglichkeiten ausprobieren, wie Sie AMP in einer Next.js-App verwenden können. In diesem Artikel erfahren Sie, warum Sie in Ihrer Next.js-App AMP-Unterstützung für die Schnelligkeit in Ihrer Next.js-App bieten können.

Hybrid-AMP-Seiten erstellen

Bei Hybrid-AMP-Seiten wird von jeder Next.js-Seite eine begleitende AMP-Version erstellt. In der Vergangenheit wurde der Hybridansatz häufig verwendet, wenn eine Websitevariante auf der Hauptversion einer Seite vorhanden war, die von AMP nicht unterstützt werden konnte. Die Hauptversion hatte vollen Nutzen, während die AMP-Seite etwas beeinträchtigt war. Nach der Einführung von amp-script ist der Hybridansatz weniger erforderlich. Wir werden ihn aber hier behandeln, falls Sie ihn noch einmal benötigen.

Es gibt mehrere Möglichkeiten zu konfigurieren, wie Next.js Seiten rendert und bereitstellt. Wenn Sie ein config-Objekt verwenden, können Sie dies für einzelne Seiten ändern. Um eine bestimmte Seite als AMP-Seite bereitzustellen, musst du die amp-Eigenschaft 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 Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.

2. Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.

3. Fügen Sie ?amp=1 am Ende der URL ein. Die Seite sieht gleich aus, aber in der Console sehen Sie, dass die AMP-Version der Seite gerendert wird.

Da die Seite nur ein einzelnes <p>-Tag hat, gibt es keinen sichtbaren Unterschied zwischen der Hauptseite und ihrer AMP-Version.

AMP-Komponenten bedingt bereitstellen

AMP-Seiten müssen eigene gültige Komponenten anstelle vieler HTML-Elemente haben. Die AMP-Komponenten müssen nur für die AMP-Seite bedingt bereitgestellt werden. Next.js bietet einen Hook namens useAmp, mit dem Sie je nachdem, welche Version der Seite angefordert wurde, unterschiedliche Elemente unter bestimmten Bedingungen bereitstellen können.

1. Um die Quelle aufzurufen, drücken Sie Quelle anzeigen.

2. Bearbeiten Sie pages/index.js so, dass auf der Seite ein anderes Absatzelement gerendert wird, je nachdem, ob die Haupt- 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 noch einmal ?amp=1 an das Ende der URL an, um die AMP-Version der Seite zu laden:

   

5. Versuchen Sie, das Bild-Tag amp-img durch die AMP-Seite zu ersetzen:

   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 durch Breite und Höhe angegebenen Seitenverhältnis. Weitere Informationen zu den unterstützten Layouts von AMP-Elementen finden Sie unter Layout- und Medienabfragen. Unter amp-img erfahren Sie mehr über die Optimierungen dieses Elements.

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

   

7. Sehen Sie sich die AMP-Version der Seite noch einmal an.

   

So erstellen Sie Nur-AMP-Seiten

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

1. Wenn Sie eine reine AMP-Seite rendern möchten, ändern Sie den Wert der Eigenschaft amp 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;