Bir web veya mobil uygulama kullandıysanız, muhtemelen bir iskelet ekran görmüşsünüzdür. Bu UI cihazı, bir güncellemenin gelmesi biraz zaman alabilen verilerin alınmasına bağlı olduğunda daha sorunsuz bir deneyim sağlar.

İskelet ekranın tam olarak ne olduğunu, neden bunları uygulamanızda kullanmak isteyebileceğinizi ve bunları Next.js'de nasıl uygulayacağınızı öğrenin.

İskelet Ekran Nedir?

İskelet ekran, bir şeyin yüklendiğini gösteren bir UI öğesidir. Tipik olarak, herhangi bir veri içermeyen bir UI bileşeninin boş veya "boş" durumudur. Örneğin, bir veri tabanından bir öğe listesi yükleyecekseniz, iskelet ekran veri içermeyen basit bir liste olabilir, yalnızca yer tutucu kutu öğeleri olabilir.

Birçok web sitesi ve uygulama, iskelet ekranları kullanır. Bazıları bunları bir yükleme durumu için kullanırken, diğerleri bunları algılanan performansı iyileştirmenin bir yolu olarak kullanır.

Neden İskelet Ekran Kullanmalısınız?

Next.js uygulamanızda bir iskelet ekran kullanmak isteyebileceğiniz birkaç neden vardır.

instagram viewer

Birincisi, uygulamanızın algılanan performansını artırabilir. Veriler yüklenirken kullanıcılar boş bir ekran görürlerse, uygulamanın yavaş olduğunu veya düzgün çalışmadığını varsayabilirler. Ancak, bir iskelet ekran görürlerse, verilerin yüklendiğini ve uygulamanın beklendiği gibi çalıştığını anlarlar.

İkinci olarak, iskelet ekranlar, kullanıcı arayüzünüzdeki "sarsıntı" veya kesintileri azaltmaya yardımcı olabilir. Veriler eşzamansız olarak yükleniyorsa, uygulamanız verileri aldıkça kullanıcı arabirimi artımlı olarak güncellenebilir. Bu, daha sorunsuz bir kullanıcı deneyimi sağlayabilir.

Üçüncüsü, veriler yavaş veya güvenilir olmayan bir bağlantıdan yükleniyorsa, iskelet ekranlar daha iyi bir kullanıcı deneyimi sağlayabilir. Veriler uzak bir sunucudan alınıyorsa, bağlantının yavaş olma veya kesintiye uğrama olasılığı vardır. Bu durumlarda, kullanıcıların biraz zaman alsa bile verilerin yüklendiğini bilmesi için bir iskelet ekran göstermek yararlı olabilir.

Next.js'de İskelet Ekran Nasıl Uygulanır?

Next.js'de iskelet ekranları uygulamanın birkaç yolu vardır. Basit bir iskelet ekranı manuel olarak yeniden oluşturmak için yerleşik özellikleri kullanabilirsiniz. Veya gibi bir kütüphane kullanabilirsiniz tepki-yükleme-iskelet veya işi sizin yerinize yapacak Malzeme Kullanıcı Arayüzü.

Yöntem 1: Yerleşik Özellikleri Kullanma

Next.js'de şunları kullanabilirsiniz: farklı React kancaları ve iskelet ekranları göstermek için basit koşullar. kullanabilirsiniz && iskelet ekranları koşullu olarak işlemek için prop.

içe aktarmak {useState, useEffect} itibaren 'tepki';
işlevBileşenim() {
sabit [isLoading, setIsLoading] = useState(doğru);


useEffect(() => {
 setTimeout(() => setIsLoading(YANLIŞ), 1000);
 }, []);


geri dönmek (
<div>
 {yükleniyor && (
<div>
 Yükleniyor...
</div>
 )}
 {!yükleniyor && (
<div>
 Bileşen içeriğim.
</div>
 )}
</div>
 );
}
ihracatvarsayılan Bileşenim;

Yukarıdaki kod kullanır kullanımDevlet verilerin yüklenip yüklenmediğini izlemek için kanca (yükleniyor). Bu kullanır useEffect zaman uyumsuz olarak yükleme verilerini simüle etmek için kanca. Son olarak, kullanır && iskelet ekranı veya bileşen içeriğini koşullu olarak işlemek için operatör.

Bu yöntem ideal değildir çünkü manuel olarak ayarlanmasını gerektirir. yükleniyor durum ve simülasyon veri yükleme. Ancak, Next.js'de bir iskelet ekranı uygulamanın basit bir yoludur.

Yöntem 2: "React-Loading-Skeleton" Gibi Bir Kitaplık Kullanmak

İskelet ekranları uygulamanın başka bir yolu, aşağıdaki gibi bir kitaplık kullanmaktır: tepki-yükleme-iskelet. tepki-yükleme-skeleton, iskelet ekranlar oluşturmak için kullanabileceğiniz bir React bileşenidir. bir var herhangi bir UI öğesinin etrafına sarabileceğiniz bileşen.

tepki yükleme iskeletini kullanmak için, onu kullanarak yüklemeniz gerekir. npm.

npm i tepki-yükleme-iskelet

Kurulduktan sonra Next.js uygulamanıza aktarabilir ve şu şekilde kullanabilirsiniz:

içe aktarmak Tepki itibaren 'tepki';
içe aktarmak İskelet itibaren 'tepki yükleme iskeleti';
içe aktarmak 'tepki-yükleme-skeleton/dist/skeleton.css'
sabit Uygulama = () => {
geri dönmek (
<div>
<iskelet />
<h3>İkinci ekran</h3>
<İskelet yüksekliği={40} />
</div>
 );
};
ihracatvarsayılan Uygulama;

Yukarıdaki kod, İskelet tepki-yükleme-iskelet kitaplığından bileşen. Daha sonra bunu iki iskelet ekran oluşturmak için kullanır. Bu kullanır yükseklik iskelet ekranının yüksekliğini ayarlamak için pervane. Şimdi yapabilirsin koşullu oluşturmayı kullan bileşeni yalnızca veriler mevcut olduğunda işlemek için.

Yöntem 3: Malzeme Kullanıcı Arayüzünü Kullanma

Next.js uygulamanızda Material UI kullanıyorsanız, gelen bileşen @mui/malzeme kütüphane. bu Material UI'deki bileşen, iskelet ekranını özelleştirmek için kullanabileceğiniz birkaç donanıma sahiptir.

kullanmak için Material UI'den bileşen, önce onu npm kullanarak kurmanız gerekir:

npm kurulum @mui/material

Kurulduktan sonra Next.js uygulamanıza aktarabilir ve şu şekilde kullanabilirsiniz:

içe aktarmak Tepki itibaren 'tepki';
içe aktarmak İskelet itibaren '@mui/material/Skeleton';
sabit Uygulama = () => {
geri dönmek (
<div>
<İskelet varyantı="doğru" genişlik={210} yükseklik={118} />
<h3>İkinci ekran</h3>
<İskelet varyantı="metin" />
</div>
 );
};
ihracatvarsayılan Uygulama;

Yukarıdaki kod, İskelet gelen bileşen @materyal-ui/laboratuvar kütüphane. Daha sonra iki iskelet ekranı oluşturur. bu değişken prop, iskelet ekranının türünü ayarlar. bu Genişlik Ve yükseklik aksesuarlar, iskelet ekranının boyutlarını tanımlar.

İskelet ekranlarınıza farklı animasyonlar da ekleyebilirsiniz. Material UI, kullanabileceğiniz birkaç yerleşik animasyona sahiptir. Örneğin, canlandırmak iskelet ekranlarınıza bir solma animasyonu eklemek için pervane:

içe aktarmak Tepki itibaren 'tepki';
içe aktarmak İskelet itibaren '@mui/material/Skeleton';
sabit Uygulama = () => {
geri dönmek (
<div>
<İskelet varyantı="doğru" genişlik={210} yükseklik={118} />
<h3>İkinci ekran</h3>
<İskelet varyantı="metin" canlandırmak="dalga" />
</div>
 );
};
ihracatvarsayılan Uygulama;

ekleyerek canlandırmak bir desteklemek bileşen, görsel hareketi kullanıcı arabiriminize dahil edebilirsiniz. bu dalga value, iskelet ekrana bir sallama animasyonu ekler. Artık içeriği iskelet ekrandan sonra göstermek için koşullu işlemeyi kullanabilirsiniz.

İskelet Ekranlarla Kullanıcı Deneyimini İyileştirin

İskelet ekranlar, Next.js uygulamanızın kullanıcı deneyimini iyileştirmenin harika bir yolu olabilir. Algılanan hızı artırabilir, sarsıntıyı azaltabilir ve veriler yavaş veya kararsız bir bağlantı üzerinden hareket ettiğinde daha iyi bir deneyim sunabilirler.

İskelet ekranları eklemek için hangi yöntemi seçerseniz seçin, bunlar Next.js uygulamanızın kullanıcı deneyimini iyileştirmenin harika bir yoludur.