AMP

Beispiele

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

Sie können mehr über AMP auf der offiziellen Website amp.dev erfahren.

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

Nur CSS-in-JS wird unterstützt. CSS-Module werden von AMP-Seiten derzeit nicht unterstützt. Sie können CSS-Modulunterstü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 keine manuelle Importierung von AMP-Komponentenskripten erforderlich:

export const config = { amp: true }
 
function MyAmpPage() {
  const date = new Date()
 
  return (
    <div>
      <p>Irgendeine Zeit: {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 amp-timeago-Komponente.

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:

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>Irgendeine Zeit: {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. Jegliche AMP-Fehler führen dazu, dass der Export mit 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 zum statischen Vorrendern von Seiten erkennt Next.js, ob die Seite AMP unterstützt, und passt das Exportverhalten entsprechend an.

Zum Beispiel würde die Hybrid-AMP-Seite pages/about.js Folgendes ausgeben:

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

Und wenn pages/about.js eine AMP-only-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 der HTML-Version ein, sodass Sie dies nicht selbst tun müssen, wie folgt:

<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 wie folgt 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 es ist in ihrer Roadmap (#13791).

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