Jos olet käyttänyt verkko- tai mobiilisovellusta, olet todennäköisesti nähnyt luurankonäytön. Tämä käyttöliittymälaite tarjoaa sujuvamman kokemuksen, kun päivitys riippuu vastaanottavasta datasta, jonka saapuminen voi kestää hetken.

Selvitä tarkalleen, mikä luuranko on, miksi haluat käyttää niitä sovelluksessasi ja miten ne otetaan käyttöön Next.js: ssä.

Mikä on Skeleton-näyttö?

Rungonäyttö on käyttöliittymäelementti, joka ilmaisee, että jotain latautuu. Se on tyypillisesti käyttöliittymäkomponentin tyhjä tai "tyhjä" tila ilman tietoja. Jos esimerkiksi lataat luettelon kohteista tietokannasta, luuranko saattaa olla yksinkertainen luettelo, jossa ei ole tietoja, vain paikkamerkkilaatikon elementtejä.

Monet verkkosivustot ja sovellukset käyttävät luurankonäyttöjä. Jotkut käyttävät niitä lataustilassa, kun taas toiset käyttävät niitä tapana parantaa havaittua suorituskykyä.

Miksi käyttää Skeleton-näyttöä?

On muutamia syitä, miksi haluat ehkä käyttää luurankoruutua Next.js-sovelluksessasi.

Ensinnäkin se voi parantaa sovelluksesi havaittua suorituskykyä. Jos käyttäjät näkevät tyhjän näytön tietojen latauksen aikana, he voivat olettaa, että sovellus on hidas tai ei toimi kunnolla. Jos he kuitenkin näkevät luurankonäytön, he tietävät, että tietoja ladataan ja sovellus toimii odotetulla tavalla.

Toiseksi luurankonäytöt voivat auttaa vähentämään käyttöliittymäsi "hukkaa" tai katkonaisuutta. Jos tietoja ladataan asynkronisesti, käyttöliittymä voi päivittyä asteittain sovelluksesi vastaanottaessa tietoja. Tämä voi tehdä käyttökokemuksesta sujuvamman.

Kolmanneksi luurankonäytöt voivat tarjota paremman käyttökokemuksen, jos tietoja ladataan hitaasta tai epäluotettavasta yhteydestä. Jos tietoja haetaan etäpalvelimelta, yhteys saattaa olla hidas tai katkennut. Näissä tapauksissa voi olla hyödyllistä näyttää luuranko, jotta käyttäjät tietävät, että tietoja ladataan, vaikka se vie jonkin aikaa.

Skeleton-näytön käyttöönotto Next.js: ssä

On olemassa muutamia tapoja toteuttaa luurankonäyttöjä Next.js: ssä. Voit käyttää sisäänrakennettuja ominaisuuksia yksinkertaisen luurankonäytön manuaaliseen luomiseen. Tai voit käyttää kirjastoa, kuten reagoi-lataus-luuranko tai Material UI tehdäksesi työn puolestasi.

Tapa 1: Sisäisten ominaisuuksien käyttäminen

Next.js: ssä voit käyttää erilaisia ​​React-koukkuja ja yksinkertaiset ehdot luurankonäyttöjen näyttämiseksi. Voit käyttää && ehdotus luurankonäyttöjen ehdolliseen hahmontamiseen.

tuonti {useState, useEffect} alkaen "reagoi";
toimintoMyComponent() {
konst [isLoading, setIsLoading] = useState(totta);


useEffect(() => {
 setTimeout(() => setIsLoading(väärä), 1000);
 }, []);


palata (
<div>
 {Ladataan && (
<div>
 Ladataan...
</div>
 )}
 {!Ladataan && (
<div>
 Komponenttisisältöni.
</div>
 )}
</div>
 );
}
viedäoletuksena MyComponent;

Yllä oleva koodi käyttää useState koukku seurataksesi latautuuko tietoja (isLadataan). Se käyttää useEffect koukku simuloidaksesi tietojen lataamista asynkronisesti. Lopuksi se käyttää && operaattoria ehdollisesti renderöimään luurankonäytön tai komponentin sisällön.

Tämä menetelmä ei ole ihanteellinen, koska se vaatii manuaalisen asettamisen isLadataan tila ja simuloi tietojen lataamista. Se on kuitenkin yksinkertainen tapa toteuttaa luurankoruutu Next.js: ssä.

Tapa 2: Käytä kirjastoa, kuten "React-Loading-Skeleton"

Toinen tapa toteuttaa luurankonäyttöjä on käyttää kirjaston kaltaista reagoi-lataus-luuranko. react-loading-skeleton on React-komponentti, jonka avulla voit luoda luurankonäyttöjä. Sillä on komponentti, jonka voit kääriä minkä tahansa käyttöliittymäelementin ympärille.

Jos haluat käyttää react-loading-skeletonia, sinun on asennettava se käyttämällä npm.

npm i reagoi-lataus-luuranko

Kun se on asennettu, voit tuoda sen Next.js-sovellukseesi ja käyttää sitä seuraavasti:

tuonti Reagoi alkaen "reagoi";
tuonti Luuranko alkaen "react-loading-skeleton";
tuonti 'react-loading-skeleton/dist/skeleton.css'
konst Sovellus = () => {
palata (
<div>
<Luuranko />
<h3>Toinen näyttö</h3>
<Luurankon korkeus={40} />
</div>
 );
};
viedäoletuksena Sovellus;

Yllä oleva koodi tuo Luuranko komponentti react-loading-skeleton-kirjastosta. Sitten se käyttää sitä kahden luurankonäytön luomiseen. Se käyttää korkeus prop, jolla voit asettaa luurankonäytön korkeuden. Nyt voit käytä ehdollista renderöintiä hahmontaa komponentti vain, kun tiedot ovat läsnä.

Tapa 3: Materiaalikäyttöliittymän käyttäminen

Jos käytät Material UI -käyttöliittymää Next.js-sovelluksessasi, voit käyttää komponentti @mui/materiaali kirjasto. The Material UI -komponentissa on muutamia rekvisiitta, joita voit käyttää runkonäytön mukauttamiseen.

Käyttääksesi komponentti Material UI: sta, sinun on ensin asennettava se npm: llä:

npm asennus @mui/material

Kun se on asennettu, voit tuoda sen Next.js-sovellukseesi ja käyttää sitä seuraavasti:

tuonti Reagoi alkaen "reagoi";
tuonti Luuranko alkaen '@mui/material/Skeleton';
konst Sovellus = () => {
palata (
<div>
<Luurankovariantti ="rect" leveys={210} korkeus={118} />
<h3>Toinen näyttö</h3>
<Luurankovariantti ="teksti" />
</div>
 );
};
viedäoletuksena Sovellus;

Yllä oleva koodi tuo Luuranko komponentti @material-ui/lab kirjasto. Sitten se luo kaksi luurankoruutua. The variantti prop määrittää luurankonäytön tyypin. The leveys ja korkeus rekvisiitta määrittää luurankonäytön mitat.

Voit myös lisätä erilaisia ​​animaatioita luurankonäytöllesi. Materiaalin käyttöliittymässä on muutamia sisäänrakennettuja animaatioita, joita voit käyttää. Voit käyttää esimerkiksi animoida ehdotus häipyvän animaation lisäämiseksi luurankonäytöille:

tuonti Reagoi alkaen "reagoi";
tuonti Luuranko alkaen '@mui/material/Skeleton';
konst Sovellus = () => {
palata (
<div>
<Luurankovariantti ="rect" leveys={210} korkeus={118} />
<h3>Toinen näyttö</h3>
<Luurankovariantti ="teksti" animoida ="Aalto" />
</div>
 );
};
viedäoletuksena Sovellus;

Lisäämällä animoida tuki a komponentti, voit sisällyttää visuaalista liikettä käyttöliittymään. The Aalto arvo lisää heiluvan animaation luurankonäytölle. Voit nyt käyttää ehdollista renderöintiä sisällön näyttämiseen runkonäytön jälkeen.

Paranna käyttökokemusta Skeleton-näytöillä

Skeleton-näytöt voivat olla loistava tapa parantaa Next.js-sovelluksesi käyttökokemusta. Ne voivat lisätä havaittua nopeutta, vähentää häiriöitä ja tarjota paremman kokemuksen, kun data kulkee hitaan tai epävakaan yhteyden kautta.

Riippumatta siitä, minkä menetelmän valitset luurankonäyttöjen lisäämiseen, ne ovat loistava tapa parantaa Next.js-sovelluksesi käyttökokemusta.