App Router File Conventions
Understand the app/ directory, page.tsx, layout.tsx, loading.tsx, and error.tsx files.
The app/ Directory
Next.js App Router uses the app/ directory. Folders define URL segments; special files within folders define behavior for each segment.
page.tsx — The Route UI
page.tsx exports the React component rendered for a URL segment. Without a page.tsx, the route is not publicly accessible.
// app/dashboard/page.tsx
export default function DashboardPage() {
return <h1>Dashboard</h1>;
}
// → accessible at /dashboardAll lessons in this course
- App Router File Conventions
- Server vs Client Components in Next.js
- Dynamic Routes & Route Groups
- Metadata API & SEO in App Router