PricingLoginStart free
React Academy · Oppitunti

App Routerin tiedostokäytännöt

Ymmärtäkää app/-hakemisto sekä page.tsx-, layout.tsx-, loading.tsx- ja error.tsx-tiedostot.

Oppitunti 1/413 vaihetta

App Routerin tiedostokäytännöt on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

app/‑hakemisto

Next.jsin App Router käyttää app/-hakemistoa. Kansiot määrittävät URL-osoitteen osat, ja kansioiden erityistiedostot määrittävät kunkin osan toiminnan.

page.tsx — reitin käyttöliittymä

page.tsx vie ulos React-komponentin, joka renderöidään tietyn URL-osoitteen osan kohdalla. Ilman page.tsx-tiedostoa reitti ei ole julkisesti käytettävissä.

// app/dashboard/page.tsx
export default function DashboardPage() {
  return <h1>Dashboard</h1>;
}
// → accessible at /dashboard

layout.tsx — Pysyvät rungot

layout.tsx ympäröi alireitit. Se säilyy navigointien välillä — sen tila ei nollaudu alireitin vaihtuessa.

// app/layout.tsx (root layout — required)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

loading.tsx — Välitön latausnäkymä

loading.tsx renderöidään heti, kun sivun asynkroniset tiedot latautuvat. Se ympäröi sivun automaattisella Suspense-rajalla.

// app/dashboard/loading.tsx
export default function Loading() {
  return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetching

error.tsx — Virherajat

error.tsx on segmentin React-virheraja. Se saa virheen ja reset-funktion uudelleenyritystä varten.

'use client';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

not-found.tsx — 404-näkymä

not-found.tsx renderöidään, kun palvelinkomponentista kutsutaan notFound()-funktiota tai kun mikään reitti ei täsmää.

// app/not-found.tsx
export default function NotFound() {
  return (
    <div>
      <h2>404 — Page not found</h2>
      <Link href="/">Go home</Link>
    </div>
  );
}

template.tsx — Uudelleen alustettavat layoutit

template.tsx toimii kuten layout.tsx, mutta luo uuden instanssin jokaisella navigoinnilla — tila nollautuu ja efektit suoritetaan uudelleen. Käyttäkää sitä animaatioihin tai analytiikkaan.

// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
  return <div className="shop-fade-in">{children}</div>;
}

route.ts — API-reitit

route.ts (ei route.tsx) vie HTTP-metodien käsittelijät (GET, POST jne.), joiden avulla app/-hakemistoon luodaan API-päätepisteitä.

// app/api/users/route.ts
export async function GET() {
  const users = await getUsers();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await createUser(body);
  return Response.json(user, { status: 201 });
}

middleware.ts — Edge-väliohjelmisto

Projektin juuressa oleva middleware.ts suoritetaan reunalla ennen jokaista täsmäävää pyyntöä — sitä käytetään todennustarkistuksiin, uudelleenohjauksiin ja otsakkeiden uudelleenkirjoittamiseen.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

Tiedostojen sijoittelu

Voitte sijoittaa muut kuin reittitiedostot (komponentit, apufunktiot ja testit) samaan app/-hakemistoon reittitiedostojen kanssa. Vain erityisiä nimeämiskäytäntöjä noudattavat tiedostot (page, layout jne.) käsitellään reittisegmentteinä.

Sisäkkäiset layoutit

Jokaisella kansiolla voi olla oma layout.tsx-tiedostonsa. Sisäkkäinen layout ympäröi vain oman segmenttinsä lapset ja yhdistyy sen yläpuolella olevaan ylätason layoutiin.

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Pikatarkistus

Mikä App Routerin tiedosto tarjoaa automaattisen Suspense-varanäkymän sivun asynkronisten tietojen latautuessa?

Vastaa interaktiivisessa oppitunnissa

Kertaus

App Router käyttää erityistiedostoja: page.tsx (reittinäkymä), layout.tsx (pysyvä runko), loading.tsx (Suspense-varanäkymä), error.tsx (virheraja), not-found.tsx (404), route.ts (API) ja middleware.ts (reunalla suoritettava logiikka).

Aloita maksutta

Opi React 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
88
Oppitunnit
324
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”App Routerin tiedostokäytännöt” ilmainen?

Kyllä – oppitunnin ”App Routerin tiedostokäytännöt” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”App Routerin tiedostokäytännöt”?

Ymmärtäkää app/-hakemisto sekä page.tsx-, layout.tsx-, loading.tsx- ja error.tsx-tiedostot. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”App Routerin tiedostokäytännöt”-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ä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-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

  1. App Routerin tiedostokäytännöt
  2. Palvelin- ja client-komponentit Next.js:ssä
  3. Dynaamiset reitit ja reittiryhmät
  4. Metadata API ja SEO App Routerissa
← Takaisin: React Academy