Next.js 15 -fullstack-kehitys (App Router + Server Actions) · Oppitunti

Hienojakoiset error.tsx- ja global-error-rajat

Siepatkaa renderöinti- ja toimintovirheet segmentti- ja juuritasolla palautettavien reset-toimintojen avulla.

Oppitunti 2/413 vaihetta

Hienojakoiset error.tsx- ja global-error-rajat on ilmainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.

Miksi virherajat ovat tärkeitä App Routerissa

Next.js 15:n App Routerissa sovellus koostuu sisäkkäisistä reittisegmenteistä. Jokainen segmentti voi epäonnistua itsenäisesti renderöinnin tai tietojen haun aikana. Ilman asianmukaisia rajoja yksittäinen rikkoutunut segmentti kaataa koko sivun — tai vielä pahempaa, koko sovelluksen.

Next.js ratkaisee tämän kahdella erityistiedostolla:

error.tsx — sieppaa tietyn reittisegmentin ja sen aliosien virheet
global-error.tsx — sieppaa juuriasettelun virheet ja toimii viimeisenä turvaverkkona

Nämä rajat antavat yksityiskohtaisen hallinnan: kohteessa /dashboard/analytics tapahtunut virhe voidaan siepata ja korjata ilman, että /dashboard/settings kaatuu.

error.tsx-tiedoston sopimus

error.tsx-tiedoston on vietävä oletusarvoinen React Client Component (se edellyttää 'use client'-direktiiviä). Next.js välittää sille automaattisesti kaksi propsia:

error — heitetty Error-olio, joka sisältää digest-ominaisuuden (palvelimen luoma tiiviste palvelinpuolen virheiden korrelaatiota varten)
reset — funktio, jota kutsumalla segmentti renderöidään uudelleen ja käyttäjälle tarjotaan palautumismahdollisuus

Komponentti renderöidään epäonnistuneen segmentin tilalle, ja framework ympäröi sen React Error Boundarylla. Luokkapohjaista rajaa ei tarvitse kirjoittaa itse.

'use client'

import { useEffect } from 'react'

interface ErrorPageProps {
  error: Error & { digest?: string }
  reset: () => void
}

export default function ErrorPage({ error, reset }: ErrorPageProps) {
  useEffect(() => {
    // Log to your observability service (e.g. Sentry, Datadog)
    console.error('[Segment Error]', error.message, 'digest:', error.digest)
  }, [error])

  return (
    <div role="alert" className="p-6 rounded-md border border-red-300 bg-red-50">
      <h2 className="text-lg font-semibold text-red-700">Something went wrong</h2>
      <p className="text-sm text-red-600 mt-1">{error.message}</p>
      <button
        onClick={reset}
        className="mt-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
      >
        Try again
      </button>
    </div>
  )
}

error.tsx-tiedoston sijoittaminen oikeaan segmenttiin

App Routerin virherajat noudattavat kansiohierarkiaa. Kansioon sijoitettu error.tsx sieppaa kyseisen kansion page.tsx-tiedoston ja kaikkien sen alikansioiden layoutien heittämät virheet — mutta ei samalla tasolla olevaa layoutia.

Tämä ero on tärkeä: layout ympäröi virherajan, joten layoutin virheet välittyvät ylemmän segmentin virherajalle.

Tyypillinen sijoittelustrategia:

app/error.tsx — sieppaa juurisivun ja kaikkien segmenttisivujen virheet (mutta ei tiedoston app/layout.tsx virheitä)
app/dashboard/error.tsx — sieppaa vain dashboard-alipuun virheet
app/dashboard/analytics/error.tsx — kohdistettu tarkasti yhteen lehtisegmenttiin

// File tree showing boundary scopes:
//
// app/
// ├── layout.tsx          ← NOT caught by app/error.tsx
// ├── error.tsx           ← catches app/page.tsx failures
// ├── page.tsx
// └── dashboard/
//     ├── layout.tsx      ← NOT caught by dashboard/error.tsx
//     ├── error.tsx       ← catches dashboard subtree
//     ├── page.tsx
//     └── analytics/
//         ├── error.tsx   ← catches only this segment
//         └── page.tsx

// A page that deliberately throws to test the boundary:
export default async function AnalyticsPage() {
  const data = await fetch('/api/analytics')
  if (!data.ok) {
    // This error is caught by analytics/error.tsx
    throw new Error('Failed to load analytics data')
  }
  return <div>Analytics content</div>
}

reset()-funktio ja palautuvat virheet

Virherajalle välitettävä reset-funktio yrittää renderöidä epäonnistuneen segmentin uudelleen ilman koko sivun lataamista uudelleen. Tämä on tärkeää käyttökokemuksen kannalta: tilapäiset häiriöt (verkkoyhteyden katkokset tai hetkellinen palvelimen saavuttamattomuus) voidaan usein korjata yksinkertaisesti yrittämällä uudelleen.

reset() renderöi kuitenkin uudelleen vain asiakaspuolen React-puun. Server Components -komponenteille, jotka hakevat tietoja, Next.js hakee palvelintiedot uudelleen osana reset-sykliä Next.js 15:ssä.

Reset-toiminnon parhaat käytännöt:

Näyttäkää selkeä ja toimintaan ohjaava virheilmoitus — välttäkää raakojen virhemerkkijonojen näyttämistä tuotannossa
Rajoittakaa uudelleenyritysten määrää, jotta pysyvät virheet eivät aiheuta loputtomia silmukoita
Käyttäkää tarvittaessa useRouter-hookin router.refresh()-metodia yhdessä reset()-funktion kanssa reitittimen välimuistin mitätöimiseen

'use client'

import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'

interface ErrorPageProps {
  error: Error & { digest?: string }
  reset: () => void
}

export default function ErrorPage({ error, reset }: ErrorPageProps) {
  const router = useRouter()
  const [retryCount, setRetryCount] = useState(0)
  const MAX_RETRIES = 3

  useEffect(() => {
    console.error('[Error boundary triggered]', {
      message: error.message,
      digest: error.digest,
      retryCount,
    })
  }, [error, retryCount])

  function handleReset() {
    if (retryCount >= MAX_RETRIES) return
    setRetryCount((c) => c + 1)
    router.refresh() // invalidate router cache
    reset()          // re-render the segment
  }

  return (
    <div role="alert">
      <p>An error occurred: {error.message}</p>
      {retryCount < MAX_RETRIES ? (
        <button onClick={handleReset}>Retry ({MAX_RETRIES - retryCount} left)</button>
      ) : (
        <p>Too many retries. Please <a href="/">return home</a>.</p>
      )}
    </div>
  )
}

global-error.tsx: juuritason turvaverkko

global-error.tsx sijaitsee hakemistossa app/ ja sieppaa tiedoston app/layout.tsx heittämät virheet — kyseessä on ainoa paikka, johon tavallinen error.tsx ei yllä. Se on ehdoton viimeinen puolustuslinja.

Keskeiset erot error.tsx-tiedostoon:

Se korvaa koko dokumentin ollessaan aktiivinen, myös juuriasettelun. Sen sisällä on itse renderöitävä <html>- ja <body>-tagi.
Se on aktiivinen vain tuotantokoontiversioissa. Kehitysympäristössä Next.js näyttää sen sijaan oman peittokuvansa.
Se saa edelleen samat error- ja reset-propsit.

Koska se korvaa layoutin, pitäkää se suppeana mutta toimivana — sisällyttäkää vain riittävä rakenne merkityksellisen ilmoituksen ja palautumisvaihtoehdon näyttämiseen.

'use client'

// app/global-error.tsx
// Catches errors thrown inside app/layout.tsx

interface GlobalErrorProps {
  error: Error & { digest?: string }
  reset: () => void
}

export default function GlobalError({ error, reset }: GlobalErrorProps) {
  return (
    // Must include <html> and <body> since root layout is bypassed
    <html lang="en">
      <body>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: '100vh',
            fontFamily: 'sans-serif',
            padding: '2rem',
          }}
        >
          <h1 style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>
            Application Error
          </h1>
          <p style={{ color: '#666', marginBottom: '1rem' }}>
            {process.env.NODE_ENV === 'production'
              ? 'An unexpected error occurred.'
              : error.message}
          </p>
          {error.digest && (
            <code style={{ fontSize: '0.75rem', color: '#999' }}>
              Error ID: {error.digest}
            </code>
          )}
          <button
            onClick={reset}
            style={{ marginTop: '1.5rem', padding: '0.5rem 1.5rem', cursor: 'pointer' }}
          >
            Reload Application
          </button>
        </div>
      </body>
    </html>
  )
}

Tyypitetyt virheet ja digest-ominaisuus

Kun Server Component heittää virheen, Next.js ei paljasta tuotannossa raakaa virheilmoitusta asiakkaalle. Sen sijaan se luo digestin — lyhyen tiivistemerkkijonon, joka yksilöi palvelinpuolen virheen. Näin arkaluonteiset toteutustiedot eivät päädy käyttäjille.

Digest näkyy palvelimen lokeissa täydellisen virheen yhteydessä. Kun näytätte digestin virhekäyttöliittymässä, tukitiimit voivat yhdistää käyttäjien ilmoittamat ongelmat palvelimen lokeihin paljastamatta koskaan pinokehityksiä.

Mukautettujen virheluokkien avulla voitte välittää jäsenneltyjä metatietoja rajojen kautta, mutta muistakaa: vain virhepropsien kautta asiakkaalle päätyvät tiedot ovat turvallisia näyttää.

// lib/errors.ts — custom typed errors for structured handling

export class AppError extends Error {
  constructor(
    message: string,
    public readonly code: string,
    public readonly statusCode: number = 500,
    public readonly isOperational: boolean = true,
  ) {
    super(message)
    this.name = 'AppError'
    // Maintains proper prototype chain in TypeScript
    Object.setPrototypeOf(this, AppError.prototype)
  }
}

export class NotFoundError extends AppError {
  constructor(resource: string) {
    super(`${resource} not found`, 'NOT_FOUND', 404)
    this.name = 'NotFoundError'
  }
}

export class UnauthorizedError extends AppError {
  constructor() {
    super('Unauthorized access', 'UNAUTHORIZED', 401)
    this.name = 'UnauthorizedError'
  }
}

// Usage in a Server Component:
// app/posts/[id]/page.tsx
export default async function PostPage({ params }: { params: { id: string } }) {
  const post = await db.post.findUnique({ where: { id: params.id } })
  if (!post) {
    throw new NotFoundError('Post') // caught by nearest error.tsx
  }
  return <article>{post.content}</article>
}

Server Action -virheiden sieppaaminen error.tsx-tiedostossa

Server Actionit voivat heittää virheitä, mutta toiminta vaihtelee sen mukaan, miten toimintoa kutsutaan:

Toimintoa kutsutaan ensimmäisen renderöinnin aikana (esimerkiksi Server Componentin asynkronisen rungon sisällä) — virhe välittyy automaattisesti lähimmälle error.tsx-rajalle.
Toimintoa kutsutaan lomakkeesta tai tapahtumankäsittelijästä asiakkaalla — error.tsx ei sieppaa virhettä automaattisesti. Se on käsiteltävä komponentissa try/catch-rakenteella tai palauttamalla jäsennelty virheolio.

Suositeltu toimintatapa on olla koskaan heittämättä virhettä asiakaspuolelta kutsutuissa Server Actioneissa. Palauttakaa sen sijaan discriminated union, jotta asiakas voi reagoida hallitusti ilman virherajoihin tukeutumista.

// app/actions/create-post.ts
'use server'

import { revalidatePath } from 'next/cache'
import { z } from 'zod'

const CreatePostSchema = z.object({
  title: z.string().min(3).max(100),
  content: z.string().min(10),
})

type ActionResult =
  | { success: true; postId: string }
  | { success: false; error: string; fieldErrors?: Record<string, string[]> }

export async function createPost(
  _prevState: ActionResult | null,
  formData: FormData,
): Promise<ActionResult> {
  const parsed = CreatePostSchema.safeParse({
    title: formData.get('title'),
    content: formData.get('content'),
  })

  if (!parsed.success) {
    return {
      success: false,
      error: 'Validation failed',
      fieldErrors: parsed.error.flatten().fieldErrors,
    }
  }

  try {
    const post = await db.post.create({ data: parsed.data })
    revalidatePath('/posts')
    return { success: true, postId: post.id }
  } catch (err) {
    // Return error, don't throw — the client form handles this
    console.error('[createPost] DB error:', err)
    return { success: false, error: 'Failed to save post. Please try again.' }
  }
}

useActionState-hookin käyttö virheenkäsittelyssä

Next.js 15 käyttää React 19:n useActionState-hookia (aiemmin useFormState) Server Actionien liittämiseen lomakkeisiin sisäänrakennetulla tilanhallinnalla. Tämä on idiomisin tapa tuoda Server Action -virheet käyttöliittymään käynnistämättä virherajoja.

Hook palauttaa tuplen [state, dispatch, isPending]. state vastaa toiminnon viimeisintä palautusarvoa — mukaan lukien palauttamienne virheiden sisältö.

Tämä toimintamalli pitää onnistuneen suorituksen, validointivirheet ja odottamattomat virheet yhdessä yhtenäisessä komponentissa ilman virherajojen osallistumista.

'use client'

import { useActionState } from 'react'
import { createPost } from '@/app/actions/create-post'

const initialState = null

export function CreatePostForm() {
  const [state, formAction, isPending] = useActionState(createPost, initialState)

  return (
    <form action={formAction} className="space-y-4">
      {state && !state.success && (
        <div role="alert" className="p-3 bg-red-50 text-red-700 rounded">
          <p className="font-medium">{state.error}</p>
          {state.fieldErrors?.title && (
            <p className="text-sm">{state.fieldErrors.title[0]}</p>
          )}
        </div>
      )}

      {state?.success && (
        <p className="text-green-600">Post created! ID: {state.postId}</p>
      )}

      <div>
        <label htmlFor="title" className="block text-sm font-medium">
          Title
        </label>
        <input id="title" name="title" type="text" className="mt-1 w-full border rounded px-3 py-2" />
      </div>

      <div>
        <label htmlFor="content" className="block text-sm font-medium">
          Content
        </label>
        <textarea id="content" name="content" rows={4} className="mt-1 w-full border rounded px-3 py-2" />
      </div>

      <button
        type="submit"
        disabled={isPending}
        className="px-4 py-2 bg-blue-600 text-white rounded disabled:opacity-50"
      >
        {isPending ? 'Saving...' : 'Create Post'}
      </button>
    </form>
  )
}

Sentryn integrointi error.tsx-tiedostoon

Virherajat ovat luonteva integrointipiste havainnointityökaluille, kuten Sentrylle. Virherajanne useEffect suoritetaan jokaisen siepatun virheen yhteydessä, joten se tarjoaa selkeän tavan ilmoittaa virheestä ulkoisille palveluille.

Server Components- ja Route Handler -komponenttien palvelinpuolen virheisiin Next.js 15 tukee Sentryn instrumentointia tiedoston instrumentation.ts kautta — projektin juuressa oleva tiedosto suoritetaan Node.js-ajoympäristössä käynnistyksen yhteydessä. Kun tämä yhdistetään virherajojen asiakaspuolen raportointiin, saatte kattavuuden koko pinolle.

Keskeiset huomiot:

Älkää koskaan lokittako raakaa käyttäjädataa tai henkilötietoja ulkoisiin palveluihin
Käyttäkää digest-arvoa korrelaatiotunnisteena yhdistääksenne asiakkaalta raportoidut virheet palvelimen lokeihin
Suodattakaa odotetut toiminnalliset virheet (kuten 404- ja todennusvirheet), jotta hälytysten turha määrä pysyy pienenä

'use client'

import { useEffect } from 'react'
import * as Sentry from '@sentry/nextjs'

interface ErrorPageProps {
  error: Error & { digest?: string }
  reset: () => void
}

export default function ErrorPage({ error, reset }: ErrorPageProps) {
  useEffect(() => {
    // Capture with structured context for Sentry
    Sentry.captureException(error, {
      tags: {
        digest: error.digest ?? 'unknown',
        errorName: error.name,
      },
      // Avoid logging PII — only structural metadata
      extra: {
        digest: error.digest,
      },
    })
  }, [error])

  const isOperational = error.name === 'AppError'

  return (
    <div role="alert" className="p-6">
      <h2 className="text-xl font-bold">
        {isOperational ? error.message : 'An unexpected error occurred'}
      </h2>
      {error.digest && (
        <p className="text-sm text-gray-500 mt-1">
          Reference: <code>{error.digest}</code>
        </p>
      )}
      <button onClick={reset} className="mt-4 px-4 py-2 bg-blue-600 text-white rounded">
        Try again
      </button>
    </div>
  )
}

Sisäkkäiset rajat: segmenttien yksityiskohtainen eristäminen

Yksi App Routerin tehokkaimmista malleista on useiden virherajojen yhdistäminen toisistaan riippumattomien käyttöliittymäalueiden eristämiseksi. Sivupalkista, pääsisällöstä ja widget-paneelista koostuvassa hallintapaneelissa tulisi olla erilliset virherajat — rikkinäisen analytiikkawidgetin ei pitäisi estää navigointia.

Tämä saavutetaan sijoittamalla error.tsx-tiedosto reittihierarkian jokaiselle asiaankuuluvalle tasolle. Segmentin sisäiseen eristämiseen voi kuitenkin käyttää myös Reactin omaa ErrorBoundary-luokkakomponenttia tai react-error-boundary-kirjaston kaltaisia kirjastoja muiden kuin reitteihin liittyvien käyttöliittymäalueiden käsittelyyn.

// app/dashboard/layout.tsx
// The dashboard layout renders slots independently
// so each slot has its own error.tsx for isolation

import { Suspense } from 'react'
import { SidebarNav } from '@/components/SidebarNav'

export default function DashboardLayout({
  children,
  analytics,  // parallel route slot
  activity,   // parallel route slot
}: {
  children: React.ReactNode
  analytics: React.ReactNode
  activity: React.ReactNode
}) {
  return (
    <div className="grid grid-cols-[240px_1fr_320px] min-h-screen">
      {/* Sidebar: wrapped by its own Suspense + route-level error.tsx */}
      <aside className="border-r">
        <Suspense fallback={<div>Loading nav...</div>}>
          <SidebarNav />
        </Suspense>
      </aside>

      {/* Main content: errors caught by children segment's error.tsx */}
      <main className="p-6">{children}</main>

      {/* Right panel: each slot has its own @analytics/error.tsx */}
      <aside className="border-l p-4 space-y-4">
        <Suspense fallback={<div>Loading analytics...</div>}>
          {analytics}
        </Suspense>
        <Suspense fallback={<div>Loading activity...</div>}>
          {activity}
        </Suspense>
      </aside>
    </div>
  )
}

Virheiden näkyminen tuotannossa ja kehityksessä

Next.js toimii virhetietojen osalta tarkoituksella eri tavoin kehitys- ja tuotantoympäristössä:

Kehitys — Näkyviin tulevat täydet virhepeittokuvat pinonjäljityksineen. global-error.tsx ei aktivoidu, koska kehityksen peittokuva on etusijalla. Server Components -komponenttien virheilmoitukset välitetään asiakkaalle kokonaisuudessaan.
Tuotanto — Server Components -komponenttien virheet puhdistetaan. Asiakkaalle välitetään vain digest. error.tsx saa yleisen ilmoituksen, kuten 'An error occurred in the Server Components render...', johon digest on liitetty.

Tämä tarkoittaa, että virherajojen käyttöliittymän on varauduttava kahteen todellisuuteen: kehityksen yksityiskohtaisiin ilmoituksiin, jotka helpottavat vianmääritystä, sekä tuotannon puhdistettuihin ilmoituksiin, jotka ovat tietoturvan kannalta välttämättömiä. Tarkistakaa aina process.env.NODE_ENV ennen raakojen virheilmoitusten näyttämistä.

'use client'

interface ErrorPageProps {
  error: Error & { digest?: string }
  reset: () => void
}

export default function ErrorPage({ error, reset }: ErrorPageProps) {
  const isDev = process.env.NODE_ENV === 'development'

  return (
    <div role="alert" className="p-6 border border-red-200 rounded bg-red-50 max-w-lg mx-auto mt-8">
      <h2 className="text-lg font-semibold text-red-800 mb-2">Something went wrong</h2>

      {/* In development, show the raw message for fast debugging */}
      {isDev && (
        <details className="mb-3">
          <summary className="text-sm text-red-600 cursor-pointer">Error details (dev only)</summary>
          <pre className="mt-2 text-xs text-red-700 overflow-auto p-2 bg-red-100 rounded">
            {error.message}
          </pre>
        </details>
      )}

      {/* In production, only show the digest for support correlation */}
      {!isDev && error.digest && (
        <p className="text-sm text-red-600 mb-3">
          Error code: <code className="font-mono">{error.digest}</code>
          <br />
          <span className="text-xs">Share this code with support if the issue persists.</span>
        </p>
      )}

      <button
        onClick={reset}
        className="px-4 py-2 bg-red-600 text-white rounded text-sm hover:bg-red-700"
      >
        Try again
      </button>
    </div>
  )
}

Milloin virhe etenee error.tsx:n ohi?

Oletetaan seuraava tilanne App Router -projektissa:

Kehittäjä sijoittaa error.tsx-tiedoston hakemistoon app/dashboard/. Käsittelemätön virhe syntyy renderöinnin aikana tiedostossa app/dashboard/layout.tsx.

Mitä virheelle tapahtuu?

Vastaa interaktiivisessa oppitunnissa

Oppitunnin yhteenveto: virherajat App Routerissa

Tässä oppitunnissa opitte rakentamaan vankan ja tarkkarajaisen virheenkäsittelyn Next.js 15 App Router -sovelluksiin. Tässä ovat keskeiset käsitteet:

error.tsx-tiedoston on oltava Client Component ('use client'), ja se saa props-arvoina error- ja reset-arvot. Se ottaa kiinni page.tsx-tiedoston ja alisegmenttien virheet, mutta ei saman tason layoutin virheitä.
global-error.tsx on juuritason turvaverkko, joka ottaa kiinni app/layout.tsx-tiedoston virheet. Sen on renderöitävä omat <html>- ja <body>-elementtinsä, ja se on aktiivinen vain tuotannossa.
Virheobjektin digest-ominaisuus on palvelimen luoma tiiviste, jonka avulla asiakkaalle näkyvät virheet voidaan yhdistää palvelimen lokeihin arkaluonteisia tietoja paljastamatta.
reset() renderöi epäonnistuneen segmentin uudelleen lataamatta koko sivua. Yhdistäkää se router.refresh()-kutsuun, kun välimuistissa olevat palvelimen tiedot on mitätöitävä.
Asiakaslomakkeista kutsuttujen Server Actions -toimintojen tulisi palauttaa virheet jäsenneltynä tietona poikkeuksen heittämisen sijaan — yhdistäkää tulokset käyttöliittymään useActionState-toiminnolla.
Sijoittakaa raakojen virheilmoitusten käyttö aina ehdon process.env.NODE_ENV === 'development' taakse, jotta tietoja ei vuoda tuotannossa.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 22
Oppitunnit: 88

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Hienojakoiset error.tsx- ja global-error-rajat” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolun 3 oppituntia, myös oppitunnin “Hienojakoiset error.tsx- ja global-error-rajat”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -fullstack-kehitys (App Router + Server Actions)-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Hienojakoiset error.tsx- ja global-error-rajat”?

Siepatkaa renderöinti- ja toimintovirheet segmentti- ja juuritasolla palautettavien reset-toimintojen avulla. Harjoittelet Next.js 15 -fullstack-kehitys (App Router + Server Actions)-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Next.js 15 -fullstack-kehitys (App Router + Server Actions)-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Hienojakoiset error.tsx- ja global-error-rajat”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunnilla?

Kyllä. Jokainen Next.js 15 -fullstack-kehitys (App Router + Server Actions)-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

OpenTelemetry-jäljitys instrumentation.ts-tiedostolla
Hienojakoiset error.tsx- ja global-error-rajat
Rakenteinen lokitus palvelin- ja Edge-ympäristöissä
Server Action -virheiden ja telemetrian kerääminen

← Takaisin: Next.js 15 -fullstack-kehitys (App Router + Server Actions)