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 hat zwei Versionen, 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 AMP Optimizer optimiert, einem Optimierer, der dieselben Transformationen wie AMP-Caches anwendet (verbessert die Performance um bis zu 42%)
• Die Seite hat eine nutzerzugängliche (optimierte) Version und eine suchmaschinenindizierbare (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 AMP Optimizer, damit sie von Suchmaschinen indiziert werden kann

Die Seite verwendet useAmp zur Unterscheidung der Modi. Es ist ein React Hook, der true zurückgibt, wenn die Seite AMP verwendet, andernfalls false.