Zwei Möglichkeiten zum Hinzufügen von AMP zu einer Next.js-App ausprobieren
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
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;
Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild
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.
![Die Live-Seite und eine Meldung in der Chrome-Entwicklertools-Konsole, die besagt, dass die Seite von AMP bereitgestellt wird.](https://web.dev/static/articles/how-to-use-amp-in-nextjs/image/the-live-page-a-message-da2dbcd870547.png?authuser=6&hl=de)
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.
Um die Quelle anzuzeigen, drücken Sie Quelltext anzeigen.
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;
Laden Sie die Hauptversion der Seite:
Fügen Sie
?amp=1
noch einmal am Ende der URL hinzu, um die AMP-Version der Seite zu laden: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.Rufen Sie die Hauptversion der Seite noch einmal auf.
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.
Wenn du eine reine AMP-Seite rendern möchtest, ändere den Wert der
amp
-Eigenschaft im Konfigurationsobjekt intrue
.import React from 'react' export const config = { amp: true }; const Home = () => ( <p>This is an AMP-only page</p> ); export default Home;