useAmp

AMP-Unterstützung ist eine unserer erweiterten Funktionen. Weitere Informationen zu AMP finden Sie hier.

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

export const config = { amp: true }

Die amp-Konfiguration akzeptiert die folgenden Werte:

• true - Die Seite wird nur AMP sein
• 'hybrid' - Die Seite wird zwei Versionen haben, eine mit AMP und eine mit HTML

Lesen Sie die folgenden Abschnitte, um mehr über die amp-Konfiguration zu erfahren.

AMP-First-Seite

Betrachten Sie das folgende Beispiel:

export const config = { amp: true }
 
function About(props) {
  return <h3>Meine AMP-About-Seite!</h3>
}
 
export default About

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

• Die Seite hat keine Next.js- oder React-Client-Side-Laufzeit
• Die Seite wird automatisch mit AMP Optimizer optimiert, einem Optimierer, der die gleichen Transformationen wie AMP-Caches anwendet (verbessert die Leistung um bis zu 42%)
• Die Seite hat eine benutzerzugängliche (optimierte) Version der Seite und eine von Suchmaschinen indexierbare (unoptimierte) Version der Seite

Hybrid-AMP-Seite

Betrachten Sie das folgende 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="ein cooles Bild"
          layout="responsive"
        />
      ) : (
        <img width="300" height="300" src="/my-img.jpg" alt="ein cooles Bild" />
      )}
    </div>
  )
}
 
export default About

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

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

Die Seite verwendet useAmp, um zwischen Modi zu unterscheiden. Es ist ein React-Hook, der true zurückgibt, wenn die Seite AMP verwendet, und false andernfalls.