Als je een web- of mobiele app hebt gebruikt, heb je waarschijnlijk een skeletscherm gezien. Dit UI-apparaat biedt een soepelere ervaring wanneer een update afhankelijk is van het ontvangen van gegevens, wat even kan duren.

Ontdek wat een skeletscherm precies is, waarom u ze in uw app zou willen gebruiken en hoe u ze in Next.js kunt implementeren.

Wat is een skeletscherm?

Een skeletscherm is een UI-element dat aangeeft dat er iets wordt geladen. Het is meestal een lege of "lege" status van een UI-component, zonder enige gegevens. Als u bijvoorbeeld een lijst met items uit een database zou laden, zou het skeletscherm een ​​eenvoudige lijst zonder gegevens kunnen zijn, alleen plaatsvervangende kaderelementen.

Veel websites en apps gebruiken skeletschermen. Sommigen gebruiken ze voor een laadstatus, terwijl anderen ze gebruiken als een manier om de waargenomen prestaties te verbeteren.

Waarom een ​​skeletscherm gebruiken?

Er zijn een paar redenen waarom u een skeletscherm wilt gebruiken in uw Next.js-app.

instagram viewer

Ten eerste kan het de waargenomen prestaties van uw app verbeteren. Als gebruikers een leeg scherm zien terwijl gegevens worden geladen, kunnen ze ervan uitgaan dat de app traag is of niet goed werkt. Als ze echter een skeletscherm zien, weten ze dat gegevens worden geladen en dat de app werkt zoals verwacht.

Ten tweede kunnen skeletschermen "jank" of schokkerigheid in uw gebruikersinterface helpen verminderen. Als gegevens asynchroon worden geladen, kan de gebruikersinterface stapsgewijs worden bijgewerkt wanneer uw app gegevens ontvangt. Dit kan zorgen voor een soepelere gebruikerservaring.

Ten derde kunnen skeletschermen een betere gebruikerservaring bieden als gegevens worden geladen vanaf een trage of onbetrouwbare verbinding. Als gegevens worden opgehaald van een externe server, bestaat de kans dat de verbinding traag of onderbroken is. In deze gevallen kan het handig zijn om een ​​skeletscherm weer te geven, zodat gebruikers weten dat gegevens worden geladen, ook al duurt dit even.

Een skeletscherm implementeren in Next.js

Er zijn een paar manieren om skeletschermen in Next.js te implementeren. U kunt ingebouwde functies gebruiken om handmatig een eenvoudig skeletscherm opnieuw te maken. Of je kunt een bibliotheek gebruiken zoals reageren-laden-skelet of Material UI om het werk voor u te doen.

Methode 1: de ingebouwde functies gebruiken

In Next.js kunt u gebruiken verschillende React-hooks en eenvoudige voorwaarden om skeletschermen weer te geven. U kunt de && prop om skeletschermen voorwaardelijk weer te geven.

importeren {useState, useEffect} van 'Reageer';
functieMijnComponent() {
const [isLoading, setIsLoading] = useState(WAAR);


gebruikEffect(() => {
 setTimeout(() => setIsLoading(vals), 1000);
 }, []);


opbrengst (
<div>
 {Laadt && (
<div>
 Bezig met laden...
</div>
 )}
 {!Laadt && (
<div>
 Mijn componentinhoud.
</div>
 )}
</div>
 );
}
exporterenstandaard MijnComponent;

De bovenstaande code maakt gebruik van de gebruikState hook om bij te houden of gegevens worden geladen (Laadt). Het gebruikt de gebruikEffect hook om het laden van gegevens asynchroon te simuleren. Tot slot gebruikt het de && operator om het skeletscherm of de componentinhoud voorwaardelijk weer te geven.

Deze methode is niet ideaal, omdat het handmatig moet worden ingesteld Laadt staat en het simuleren van het laden van gegevens. Het is echter een eenvoudige manier om een ​​skeletscherm in Next.js te implementeren.

Methode 2: een bibliotheek gebruiken zoals 'React-Loading-Skeleton'

Een andere manier om skeletschermen te implementeren, is door een bibliotheek zoals reageren-laden-skelet. react-loading-skelet is een React-component die u kunt gebruiken om skeletschermen te maken. Het heeft een component die u om elk UI-element kunt wikkelen.

Om react-loading-skelet te gebruiken, moet je het installeren met behulp van npm.

npm i reageren-laden-skelet

Zodra het is geïnstalleerd, kunt u het in uw Next.js-app importeren en als volgt gebruiken:

importeren Reageer van 'Reageer';
importeren Skelet van 'react-loading-skelet';
importeren 'reageren-laden-skelet/dist/skelet.css'
const App = () => {
opbrengst (
<div>
<skelet />
<h3>Tweede scherm</h3>
<Skelethoogte={40} />
</div>
 );
};
exporterenstandaard App;

De bovenstaande code importeert het Skelet component uit de react-loading-skelet-bibliotheek. Het gebruikt het vervolgens om twee skeletschermen te maken. Het gebruikt de hoogte prop om de hoogte van het skeletscherm in te stellen. Nu kan je voorwaardelijke weergave gebruiken om de component alleen weer te geven als de gegevens aanwezig zijn.

Methode 3: Materiaal-UI gebruiken

Als u Material UI gebruikt in uw Next.js-app, kunt u de onderdeel uit de @mui/materiaal bibliotheek. De component van Material UI heeft een paar rekwisieten die u kunt gebruiken om het skeletscherm aan te passen.

Om de component van Material UI, je moet het eerst installeren met behulp van npm:

npm installeren @mui/material

Zodra het is geïnstalleerd, kunt u het in uw Next.js-app importeren en als volgt gebruiken:

importeren Reageer van 'Reageer';
importeren Skelet van '@mui/materiaal/Skelet';
const App = () => {
opbrengst (
<div>
<Skeletvariant="rect" breedte={210} hoogte={118} />
<h3>Tweede scherm</h3>
<Skeletvariant="tekst" />
</div>
 );
};
exporterenstandaard App;

De bovenstaande code importeert het Skelet onderdeel uit de @material-ui/lab bibliotheek. Vervolgens creëert het twee skeletschermen. De variant prop stelt het type skeletscherm in. De breedte En hoogte rekwisieten bepalen de afmetingen van het skeletscherm.

U kunt ook verschillende animaties aan uw skeletschermen toevoegen. Material UI heeft een paar ingebouwde animaties die je kunt gebruiken. U kunt bijvoorbeeld de animeren prop om een ​​vervagende animatie toe te voegen aan je skeletschermen:

importeren Reageer van 'Reageer';
importeren Skelet van '@mui/materiaal/Skelet';
const App = () => {
opbrengst (
<div>
<Skeletvariant="rect" breedte={210} hoogte={118} />
<h3>Tweede scherm</h3>
<Skeletvariant="tekst" animeren="golf" />
</div>
 );
};
exporterenstandaard App;

Door toevoeging van de animeren steun aan een component kunt u visuele beweging opnemen in uw gebruikersinterface. De golf waarde voegt een golvende animatie toe aan het skeletscherm. U kunt nu voorwaardelijke weergave gebruiken om de inhoud na het skeletscherm weer te geven.

Verbeter de gebruikerservaring met skeletschermen

Skeletschermen kunnen een geweldige manier zijn om de gebruikerservaring van uw Next.js-app te verbeteren. Ze kunnen de waargenomen snelheid verhogen, ruis verminderen en een betere ervaring bieden wanneer gegevens over een trage of onstabiele verbinding reizen.

Welke methode u ook kiest om skeletschermen toe te voegen, ze zijn een geweldige manier om de gebruikerservaring van uw Next.js-app te verbeteren.