Next.js 15 fullstack (App Router + Server Actions) · leksjon

Innlastings- og feilgrensesnitt

Implementer innlastingstilstander med `loading.js`, og håndter feil på en god måte ved hjelp av `error.js`-grensekomponenter i applikasjonen.

Leksjon 3 av 411 trinn

Innlastings- og feilgrensesnitt er en gratis leksjon i Next.js 15 fullstack (App Router + Server Actions) på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 fullstack (App Router + Server Actions), og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.

Hvorfor lastetilstander er viktige

Når Next.js-applikasjonen henter data, kan det ta litt tid. Uten noen visuell tilbakemelding kan brukerne tro at appen har fryst eller sluttet å fungere.

Forbedre brukeropplevelsen: Hold brukerne informert.
Reduser frustrasjon: Unngå at appen oppleves som treg.
Vis fremdrift: Vis at noe skjer i bakgrunnen.

Introduksjon til `loading.js`

Next.js App Router har en spesiell filkonvensjon, loading.js, som automatisk oppretter et lastegrensesnitt for et rutesegment.

Når data hentes for en page.js- eller layout.js-fil, viser Next.js automatisk grensesnittet som er definert i det nærmeste søskenet eller opphavet med navnet loading.js.

Opprette et enkelt lastegrensesnitt

For å opprette et lastegrensesnitt legger du ganske enkelt til en loading.js-fil i mappen for et rutesegment. Den skal eksportere en standard React-komponent.

Denne komponenten gjengis umiddelbart når segmentet lastes inn.

export default function Loading() {
  return (
    <div style={{ padding: '20px', textAlign: 'center' }}>
      <h2>Loading...</h2>
      <p>Please wait while we fetch the content.</p>
    </div>
  );
}

Slik fungerer `loading.js`

Under panseret fungerer loading.js sammen med React Suspense. Next.js pakker den tilsvarende page.js-filen og de nestede underordnede komponentene inn i en Suspense Boundary.

Når datainnhenting i denne avgrensningen venter, vises loading.js-komponenten som en reservevisning.

Nestede lastetilstander

Du kan ha flere loading.js-filer på ulike nivåer i ruten. Du kan for eksempel ha et globalt lastegrensesnitt og et mer spesifikt for en underrute.

Next.js viser det nærmeste opphavet med loading.js for segmentet som lastes inn.

Håndtere feil i applikasjonen

Akkurat som lastetilstander er feil en del av enhver applikasjon. Feil som ikke fanges opp, kan få appen til å krasje og gi en dårlig brukeropplevelse.

Next.js App Router tilbyr en måte å håndtere feil på en kontrollert måte og vise et egendefinert feilgrensesnitt ved hjelp av error.js.

Introduksjon til `error.js`

Filkonvensjonen error.js lar deg definere et feilgrensesnitt som automatisk pakker inn et rutesegment og de underordnede komponentene i en React Error Boundary.

Denne avgrensningen fanger opp feil som oppstår under gjengivelse, i hendelsesbehandlere og ved datainnhenting innenfor området.

Opprette et grunnleggende feilgrensesnitt

I likhet med loading.js oppretter du en error.js-fil i et rutesegment. Den må være en React Client Component (bruk 'use client'; øverst).

Den mottar error (feilobjektet) og en reset-funksjon som props.

'use client';

import { useEffect } from 'react';

export default function Error({ error, reset }) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error);
  }, [error]);

  return (
    <div style={{ padding: '20px', textAlign: 'center', color: 'red' }}>
      <h2>Something went wrong!</h2>
      <button
        onClick={() => reset()} // Attempt to re-render the segment
        style={{ marginTop: '10px', padding: '8px 15px' }}
      >
        Try again
      </button>
    </div>
  );
}

Feilgjenoppretting med `reset()`

Funksjonen reset() som leveres til error.js-komponenten, er avgjørende. Når den kalles, forsøker den å gjengi hele segmentet som utløste feilen på nytt.

Dermed kan brukerne prøve igjen uten å navigere bort, noe som kan løse midlertidige problemer.

Rask sjekk av grensesnittfiler

Hvilket utsagn beskriver nøyaktig hovedformålet med loading.js i Next.js App Router?

Besvar den i den interaktive leksjonen

Oppsummering: laste- og feilgrensesnitt

I denne leksjonen har du lært hvordan du kan forbedre brukeropplevelsen i Next.js-applikasjonen ved å implementere visuell tilbakemelding for laste- og feiltilstander.

loading.js: Viser et midlertidig grensesnitt mens data hentes, ved hjelp av React Suspense.
error.js: Fanger opp feil i et segment og viser et reservegrensesnitt, slik at brukerne kan forsøke å gjenopprette tilstanden med funksjonen reset().

Disse konvensjonene bidrar til å skape mer robuste og brukervennlige Next.js-applikasjoner.

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Innlastings- og feilgrensesnitt» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 fullstack (App Router + Server Actions), inkludert «Innlastings- og feilgrensesnitt», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 fullstack (App Router + Server Actions) inneholder totalt 4 leksjoner.

Hva lærer jeg i «Innlastings- og feilgrensesnitt»?

Implementer innlastingstilstander med `loading.js`, og håndter feil på en god måte ved hjelp av `error.js`-grensekomponenter i applikasjonen. Du øver på Next.js 15 fullstack (App Router + Server Actions) med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Next.js 15 fullstack (App Router + Server Actions)?

Ingen tidligere erfaring er nødvendig. Next.js 15 fullstack (App Router + Server Actions) på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Innlastings- og feilgrensesnitt»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Next.js 15 fullstack (App Router + Server Actions)-leksjonen?

Ja. Alle Next.js 15 fullstack (App Router + Server Actions)-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Next.js 15 fullstack (App Router + Server Actions)