useAmp

AMP desteği gelişmiş özelliklerimizden biridir, AMP hakkında daha fazla bilgiyi buradan okuyabilirsiniz.

AMP'yi etkinleştirmek için aşağıdaki yapılandırmayı sayfanıza ekleyin:

export const config = { amp: true }

amp yapılandırması aşağıdaki değerleri kabul eder:

• true - Sayfa yalnızca AMP olacak
• 'hybrid' - Sayfanın biri AMP'li diğeri HTML'li olmak üzere iki sürümü olacaktır

amp yapılandırması hakkında daha fazla bilgi edinmek için aşağıdaki bölümleri okuyun.

AMP First Page

Aşağıdaki örneğe bir göz atın:

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

Yukarıdaki sayfa yalnızca AMP içeren bir sayfadır:

• Sayfada Next.js veya React istemci tarafı çalışma zamanı yok
• Sayfa, AMP önbellekleriyle aynı dönüşümleri uygulayan bir optimize edici olan AMP Optimizer ile otomatik olarak optimize edilir (performansı %42'ye kadar artırır)
• Sayfanın kullanıcı tarafından erişilebilir (optimize edilmiş) bir sürümü ve arama motoru tarafından indekslenebilir (optimize edilmemiş) bir sürümü vardır

Hybrid AMP Page

Aşağıdaki örneğe bir göz atın:

import { useAmp } from 'next/amp'
 
export const config = { amp: 'hybrid' }
 
function About(props) {
  const isAmp = useAmp()
 
  return (
    <div>
      <h3>My AMP About Page!</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

Yukarıdaki sayfa hibrit bir AMP sayfasıdır, bu da şu anlama gelir:

• Sayfa geleneksel HTML (varsayılan) ve AMP HTML (URL'ye ?amp=1 eklenerek) olarak oluşturulur
• Sayfanın AMP sürümü, arama motorları tarafından dizine eklenebilmesi için yalnızca AMP Optimizer ile uygulanan geçerli optimizasyonlara sahiptir

Sayfa, modlar arasında ayrım yapmak için useAmp kullanır; bu, sayfa AMP kullanıyorsa true ve aksi takdirde false döndüren bir React Hook 'dur.