Bestandsconventies van de App Router
Begrijp de app/-directory en de bestanden page.tsx, layout.tsx, loading.tsx en error.tsx.
Bestandsconventies van de App Router is een gratis React Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Academy bevat in totaal 4 lessen.
De map app/
De App Router van Next.js gebruikt de map app/. Mappen bepalen URL-segmenten; speciale bestanden in mappen bepalen het gedrag voor elk segment.
page.tsx — De route-interface
page.tsx exporteert de React-component die voor een URL-segment wordt weergegeven. Zonder een page.tsx is de route niet openbaar toegankelijk.
// app/dashboard/page.tsx
export default function DashboardPage() {
return <h1>Dashboard</h1>;
}
// → accessible at /dashboardlayout.tsx — Persistente omhulsels
layout.tsx omhult onderliggende routes. Het blijft behouden tijdens navigaties — de status wordt niet opnieuw ingesteld wanneer de onderliggende route verandert.
// 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 — Onmiddellijke laadinterface
loading.tsx wordt onmiddellijk weergegeven terwijl de asynchrone gegevens van de pagina worden geladen. Het omhult de pagina automatisch met een Suspense-grens.
// app/dashboard/loading.tsx
export default function Loading() {
return <Skeleton />;
}
// Shown while dashboard/page.tsx is fetchingerror.tsx — Foutgrenzen
error.tsx is een React-foutgrens voor het segment. Het ontvangt de fout en een reset-functie om opnieuw te proberen.
'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-interface
not-found.tsx wordt weergegeven wanneer notFound() vanuit een servercomponent wordt aangeroepen of wanneer geen enkele route overeenkomt.
// app/not-found.tsx
export default function NotFound() {
return (
<div>
<h2>404 — Page not found</h2>
<Link href="/">Go home</Link>
</div>
);
}template.tsx — Lay-outs opnieuw mounten
template.tsx lijkt op layout.tsx, maar maakt bij elke navigatie een nieuwe instantie — de status wordt opnieuw ingesteld en effecten worden opnieuw uitgevoerd. Gebruik dit voor animaties of analyses.
// app/shop/template.tsx
export default function ShopTemplate({ children }: { children: React.ReactNode }) {
return <div className="shop-fade-in">{children}</div>;
}route.ts — API-routes
route.ts (niet route.tsx) exporteert handlers voor HTTP-methoden (GET, POST, enzovoort) om API-eindpunten in de map app/ te maken.
// 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 — Middleware aan de edge
middleware.ts in de hoofdmap van het project wordt vóór elke overeenkomende aanvraag aan de edge uitgevoerd — voor autorisatiecontroles, omleidingen en het herschrijven van headers.
// 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*'] };Colocatie
Je kunt bestanden die geen routes zijn (componenten, hulpfuncties, tests) in mappen onder app/ plaatsen. Alleen bestanden met de speciale naamgevingsregels (page, layout, enzovoort) worden als routesegmenten behandeld.
Geneste lay-outs
Elke map kan een eigen layout.tsx hebben. De geneste lay-out omhult alleen de onderliggende elementen van zijn segment en wordt gecombineerd met de bovenliggende lay-out.
// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
return (
<div className="dashboard">
<Sidebar />
<main>{children}</main>
</div>
);
}Korte controle
Welk bestand van de App Router biedt een automatische Suspense-terugval terwijl de asynchrone gegevens van een pagina worden geladen?
Samenvatting
De App Router gebruikt speciale bestanden: page.tsx (route-interface), layout.tsx (persistent omhulsel), loading.tsx (Suspense-terugval), error.tsx (foutgrens), not-found.tsx (404), route.ts (API) en middleware.ts (logica aan de edge).
Leer React met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 88
- Lessen
- 324
Veelgestelde vragen
Is de les “Bestandsconventies van de App Router” gratis?
Ja — de volledige tekst van “Bestandsconventies van de App Router” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus React Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus React Academy bevat in totaal 4 lessen.
Wat leer ik in “Bestandsconventies van de App Router”?
Begrijp de app/-directory en de bestanden page.tsx, layout.tsx, loading.tsx en error.tsx. Je oefent met React Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Academy te beginnen?
Ervaring vooraf is niet nodig. React Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Bestandsconventies van de App Router”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Academy?
Ja. Elke les over React Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Bestandsconventies van de App Router
- Server- versus clientcomponenten in Next.js
- Dynamische routes en routegroepen
- Metadata-API en SEO in de App Router