useAmp

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

Um AMP zu aktivieren, fügen Sie die 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 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-seitige Laufzeitumgebung
• Die Seite wird automatisch mit dem AMP Optimizer optimiert, einem Optimierer, der die gleichen Transformationen wie AMP-Caches anwendet (verbessert die Leistung um bis zu 42%)
• Die Seite hat eine für Nutzer optimierte Version und eine für Suchmaschinen indexierbare (nicht optimierte) Version

Hybride 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="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 hybride 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 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.