useAmp

AMP-Unterstützung ist eines unserer erweiterten Features. Sie können hier mehr über AMP lesen.

Um AMP zu aktivieren, fügen Sie folgende Konfiguration zu Ihrer Seite hinzu:

export const config = { amp: true }

Die amp-Konfiguration akzeptiert folgende Werte:

• true - Die Seite wird ausschließlich als AMP-Seite gerendert
• 'hybrid' - Die Seite wird in zwei Versionen gerendert, eine mit AMP und eine mit HTML

Um mehr über die amp-Konfiguration zu erfahren, lesen Sie die folgenden Abschnitte.

AMP-Only-Seite

Betrachten Sie folgendes Beispiel:

export const config = { amp: true }

function About(props) {
  return <h3>Meine AMP About-Seite!</h3>
}

export default About

Die obige Seite ist eine AMP-Only-Seite, was bedeutet:

• Die Seite hat keine Next.js- oder React-Client-seitige Laufzeitumgebung
• Die Seite wird automatisch mit dem AMP Optimizer optimiert, einem Tool, das die gleichen Transformationen wie AMP-Caches anwendet (verbessert die Leistung um bis zu 42%)
• Die Seite hat eine nutzerzugängliche (optimierte) Version und eine für Suchmaschinen indexierbare (unoptimierte) Version

Hybrid-AMP-Seite

Betrachten Sie folgendes Beispiel:

import { useAmp } from 'next/amp'

export const config = { amp: 'hybrid' }

function About(props) {
  const isAmp = useAmp()

  return (
    <div>
      <h3>Meine AMP About-Seite!</h3>
      {isAmp ? (
        <amp-img
          width="300"
          height="300"
          src="/my-img.jpg"
          alt="a cool image"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="a cool image" />
      )}
    </div>
  )
}

export default About

Die obige Seite ist eine Hybrid-AMP-Seite, was bedeutet:

• Die Seite wird als traditionelles HTML (Standard) und als AMP HTML (durch Hinzufügen von ?amp=1 zur URL) gerendert
• Die AMP-Version der Seite hat nur gültige Optimierungen durch den AMP Optimizer, damit sie von Suchmaschinen indexiert werden kann

Die Seite verwendet useAmp, um zwischen den Modi zu unterscheiden. Es handelt sich um einen React Hook, der true zurückgibt, wenn die Seite AMP verwendet, und false andernfalls.