Next.js uygulamasına AMP eklemenin iki yolunu deneyin
Neler öğreneceksiniz?
Bu codelab'de, AMP'yi bir Next.js uygulamasında kullanmanın iki yolunu deneyebilirsiniz. AMP, Next.js uygulamanızda hızı nasıl garanti edebilir? başlıklı makaleden Next.js uygulamanıza AMP desteği eklemek isteyebilirsiniz.
Karma AMP sayfaları oluşturma
Karma AMP yaklaşımı, herhangi bir Next.js sayfasının eşlik eden AMP sürümünü oluşturur. Geçmişte Karma yaklaşım, modelinizin ana sürümünde bir deneyim olduğunda sıkça bir sayfaya bakın. Ana sürüm, AMP sayfasında tam deneyime sahipken biraz bozulmuş bir deneyim. amp-script kullanıma sunulduğunda ihtiyaç duyulmamaktadır ele alacağız. Ancak yine de ihtiyaç duyabileceğinizi düşünerek bu konuyu burada ele alacağız.
Next.js'nin sayfaları oluşturma ve sunma şeklini yapılandırmanın birden çok yolu vardır. config
kullanarak
nesne, bunları sayfa bazında değiştirmenize olanak tanır. Belirli bir sayfayı
bir AMP sayfasında yer alıyorsa nesnedeki amp
özelliğini dışa aktarmanız gerekir:
import React from 'react'
export const config = { amp: 'hybrid' };
const Home = () => (
<p>This is the home page</p>
);
export default Home;
Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran
.
URL'nin sonuna
?amp=1
ekleyin. Sayfa aynı görünüyor, ancak Konsolda sayfanın AMP sürümünün oluşturulduğunu görürsünüz.
![Yayındaki sayfa ve Chrome Geliştirici Araçları Konsolu'nda sayfanın AMP tarafından desteklendiğini belirten bir mesaj.](https://web.dev/static/articles/how-to-use-amp-in-nextjs/image/the-live-page-a-message-da2dbcd870547.png?authuser=6&hl=tr)
Sayfada yalnızca tek bir <p>
etiketi olduğundan
ana sayfa ve AMP sürümü.
AMP bileşenlerini koşullu olarak yayınlama
AMP sayfalarının, birçok HTML öğesi yerine kendi geçerli bileşen grubunun olması gerekir. İnsanların
AMP bileşenlerinin yalnızca AMP sayfası için koşullu olarak sunulduğundan emin olmak önemlidir.
Next.js, farklı öğeleri koşullu olarak yayınlamanıza olanak tanımak için useAmp
adlı bir kanca sağlar
Bu, sayfanın hangi sürümünün istendiğine bağlı olarak değişir.
Kaynağı görüntülemek için Kaynağı Görüntüle'ye basın.
pages/index.js
öğesini, ana sürüm veya AMP sürümü istendi:import React from 'react'; import { useAmp } from 'next/amp'; export const config = { amp: 'hybrid' }; const Home = () => ( useAmp() ? ( <p>This is the <strong>AMP</strong> version of the home page</p> ) : ( <p>This is the main version of the home page</p> ) ); export default Home;
Sayfanın ana sürümünü yükle:
Sayfanın AMP sürümünü yüklemek için URL'nin sonuna tekrar
?amp=1
ekleyin:AMP'nin, resim etiketinin yerini alan
amp-img
resmini oluşturmayı deneyin:import React from 'react'; import { useAmp } from 'next/amp'; export const config = { amp: 'hybrid' }; const imgSrc = 'https://placekitten.com/1000/1000'; const Image = () => ( useAmp() ? ( <amp-img alt="A cute kitten" src={imgSrc} width="1000" height="1000" layout="responsive"> </amp-img> ) : ( <img alt="A cute kitten" src={imgSrc} width="1000" height="1000"> </img> ) ); const Home = () => ( <div> <Image /> </div> ); export default Home;
layout="responsive"
, en boy oranıyla otomatik olarak tamamen duyarlı bir resim oluşturur genişlik ve yükseklikle belirtilir. Düzen ve medya sorguları hakkında AMP öğelerinin desteklenen düzenleri ve amp-img, bu öğelerin optimize edebilirsiniz.Sayfanın ana sürümünü tekrar görüntüleyin.
Sayfanın AMP sürümünü tekrar görüntüleyin.
Yalnızca AMP sayfaları oluşturma
Next.js, yalnızca AMP sayfalarını destekler. Bu yaklaşımla tek bir AMP sayfası yayınlanır ve oluşturulur. kullanıcılara ve arama motorlarına sunmaya devam ediyor.
Yalnızca AMP olan bir sayfayı oluşturmak için yapılandırma nesnesindeki
amp
özelliğinin değerinitrue
olarak değiştirin.import React from 'react' export const config = { amp: true }; const Home = () => ( <p>This is an AMP-only page</p> ); export default Home;