AMP

Examples

Next.js ile herhangi bir React sayfasını minimum yapılandırmayla ve React'ten ayrılmadan bir AMP sayfasına dönüştürebilirsiniz.

AMP hakkında daha fazla bilgiyi resmi amp.dev sitesinde okuyabilirsiniz.

Enabling AMP

Bir sayfa için AMP desteğini etkinleştirmek ve farklı AMP yapılandırmaları hakkında daha fazla bilgi edinmek için next/amp adresindeki API belgelerini okuyun.

Caveats

Adding AMP Components

AMP topluluğu, AMP sayfalarını daha etkileşimli hale getirmek için birçok bileşen sağlar. Next.js, bir sayfada kullanılan tüm bileşenleri otomatik olarak içe aktarır ve AMP bileşen komut dosyalarını manuel olarak içe aktarmaya gerek yoktur:

export const config = { amp: true }
 
function MyAmpPage() {
  const date = new Date()
 
  return (
    <div>
      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}
 
export default MyAmpPage

Yukarıdaki örnekte amp-timeago bileşen.

Varsayılan olarak, bir bileşenin en son sürümü her zaman içe aktarılır. Sürümü özelleştirmek istiyorsanız, aşağıdaki örnekte olduğu gibi next/head adresini kullanabilirsiniz:

import Head from 'next/head'
 
export const config = { amp: true }
 
function MyAmpPage() {
  const date = new Date()
 
  return (
    <div>
      <Head>
        <script
          async
          key="amp-timeago"
          custom-element="amp-timeago"
          src="https://cdn.ampproject.org/v0/amp-timeago-0.1.js"
        />
      </Head>
 
      <p>Some time: {date.toJSON()}</p>
      <amp-timeago
        width="0"
        height="15"
        datetime={date.toJSON()}
        layout="responsive"
      >
        .
      </amp-timeago>
    </div>
  )
}
 
export default MyAmpPage

AMP Validation

AMP sayfaları, geliştirme sırasında amphtml-validator ile otomatik olarak doğrulanır. Hatalar ve uyarılar Next.js'yi başlattığınız terminalde görünecektir.

Sayfalar ayrıca Statik HTML dışa aktarma sırasında doğrulanır ve herhangi bir uyarı / hata terminale yazdırılır. Herhangi bir AMP hatası, dışa aktarım geçerli bir AMP olmadığı için dışa aktarımın 1 durum koduyla çıkmasına neden olacaktır.

Custom Validators

Aşağıda gösterildiği gibi next.config.js adresinde özel AMP doğrulayıcı ayarlayabilirsiniz:

module.exports = {
  amp: {
    validator: './custom_validator.js',
  },
}

Skip AMP Validation

AMP doğrulamasını kapatmak için aşağıdaki kodu ekleyin next.config.js

experimental: {
  amp: {
    skipValidation: true
  }
}

AMP in Static HTML Export

Statik HTML dışa aktarma sayfalarını statik olarak önceden oluştururken Next.js, sayfanın AMP'yi destekleyip desteklemediğini algılar ve dışa aktarma davranışını buna göre değiştirir.

Örneğin, hibrit AMP sayfası pages/about.js çıktısı verecektir:

Ve eğer pages/about.js yalnızca AMP sayfasıysa, o zaman çıktı verecektir:

Next.js, HTML sürümünde sayfanızın AMP sürümüne otomatik olarak bir bağlantı ekleyecektir, böylece sizin bunu yapmanız gerekmez:

<link rel="amphtml" href="/about.amp.html" />

Ve sayfanızın AMP sürümü HTML sayfasına bir bağlantı içerecektir:

<link rel="canonical" href="/about" />

Ne zaman trailingSlash etkinleştirildiğinde pages/about.js için dışa aktarılan sayfalar olacaktır:

TypeScript

AMP şu anda TypeScript için yerleşik türlere sahip değil, ancak yol haritalarında(#13791).

Geçici bir çözüm olarak, projenizin içinde amp.d.ts adlı bir dosyayı manuel olarak oluşturabilir ve bu özel türleri ekleyebilirsiniz.