AMP-Seiten in Next.js erstellen

Beispiele

Mit Next.js können Sie jede React-Seite mit minimaler Konfiguration und ohne React verlassen zu müssen in eine AMP-Seite umwandeln.

Weitere Informationen über AMP finden Sie auf der offiziellen Website amp.dev.

AMP aktivieren

Um AMP-Unterstützung für eine Seite zu aktivieren und mehr über die verschiedenen AMP-Konfigurationen zu erfahren, lesen Sie die API-Dokumentation für next/amp.

Einschränkungen

Es wird nur CSS-in-JS unterstützt. CSS-Module werden derzeit von AMP-Seiten nicht unterstützt. Sie können CSS-Module-Unterstützung zu Next.js beitragen.

Die AMP-Community bietet viele Komponenten, um AMP-Seiten interaktiver zu gestalten. Next.js importiert automatisch alle auf einer Seite verwendeten Komponenten, und es ist nicht erforderlich, AMP-Komponentenskripte manuell zu importieren:

export const config = { amp: true }

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

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

export default MyAmpPage

Das obige Beispiel verwendet die Komponente amp-timeago.

Standardmäßig wird immer die neueste Version einer Komponente importiert. Wenn Sie die Version anpassen möchten, können Sie next/head verwenden, wie im folgenden Beispiel gezeigt:

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>Ein Zeitpunkt: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}

export default MyAmpPage

AMP-Validierung

AMP-Seiten werden während der Entwicklung automatisch mit amphtml-validator validiert. Fehler und Warnungen werden im Terminal angezeigt, in dem Sie Next.js gestartet haben.

Seiten werden auch während des statischen HTML-Exports validiert, und alle Warnungen/Fehler werden im Terminal ausgegeben. AMP-Fehler führen dazu, dass der Export mit dem Statuscode 1 beendet wird, da der Export kein gültiges AMP ist.

Benutzerdefinierte Validatoren

Sie können einen benutzerdefinierten AMP-Validator in next.config.js wie folgt einrichten:

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

AMP-Validierung überspringen

Um die AMP-Validierung zu deaktivieren, fügen Sie den folgenden Code zu next.config.js hinzu:

experimental: {
  amp: {
    skipValidation: true
  }
}

AMP im statischen HTML-Export

Bei Verwendung des statischen HTML-Exports für statisch vorgerenderte Seiten erkennt Next.js, ob die Seite AMP unterstützt, und passt das Exportverhalten entsprechend an.

Beispielsweise würde die hybride AMP-Seite pages/about.js folgendes ausgeben:

out/about.html - HTML-Seite mit clientseitigem React-Laufzeitumgebung
out/about.amp.html - AMP-Seite

Und wenn pages/about.js eine reine AMP-Seite ist, würde sie folgendes ausgeben:

out/about.html - Optimierte AMP-Seite

Next.js fügt automatisch einen Link zur AMP-Version Ihrer Seite in die HTML-Version ein, sodass Sie dies nicht manuell tun müssen, wie hier gezeigt:

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

Und die AMP-Version Ihrer Seite enthält einen Link zur HTML-Seite:

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

Wenn trailingSlash aktiviert ist, würden die exportierten Seiten für pages/about.js folgendermaßen aussehen:

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

TypeScript

AMP bietet derzeit keine integrierten Typen für TypeScript, aber dies ist in ihrer Roadmap enthalten (#13791).

Als Workaround können Sie manuell eine Datei namens amp.d.ts in Ihrem Projekt erstellen und diese benutzerdefinierten Typen hinzufügen.