Understanding Next.js App Router pages
A folder is a route, a file is a level.
The App Router file conventions, why server components run on the server, and the three special files every route can have.
Folders are routes.
Next.js 13+ App Router maps the filesystem under app/ directly to URL paths. app/about/page.tsx serves /about. app/blog/[slug]/page.tsx serves /blog/<anything>. app/(marketing)/page.tsx serves / (parens are route groups, organisational only, don't affect URL). The convention is rigid; the file is the URL.
The four special files.
Per route, four files have meaning. page.tsx: the route's main UI. layout.tsx: wraps the page and any child routes; persists across navigation; doesn't re-render unless its own data changes. loading.tsx: rendered while the page's async data resolves (Suspense boundary). error.tsx: catches errors in the page or its children. There are a few more (not-found.tsx, route.ts for API endpoints) — but those four cover 95 % of routes.
Server components are the default.
Every .tsx file in app/ is a Server Component unless marked otherwise. Server Components: run on the server, render to HTML, ship zero JavaScript to the browser. They can fetch data with await fetch() directly in the function body. Client Components (marked with "use client" at the top): hydrate with JS, support state and effects. The split is "server for data and structure, client for interactivity"; well-architected apps keep client components small and at the leaves.
A worked page.
A blog post page: // app/blog/[slug]/page.tsx
import { notFound } from "next/navigation";
import { getPost } from "@/lib/blog";
export default async function PostPage({ params }: { params: { slug: string } }) {
const post = await getPost(params.slug);
if (!post) notFound();
return (
<article>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</article>
);
} Server component, async function, params from URL, fetch data, render synchronously after await. Ships zero JavaScript for the post HTML.
Server-rendered post
app/blog/[slug]/page.tsx
async params → await data → render.
export default async function ... { const post = await getPost(...) }
= Zero-JS post page
generateMetadata for per-page SEO.
Export a generateMetadata function from the page; it runs on the server and returns the page's title, description, OG tags. Same params object as the page itself, so dynamic routes can produce dynamic meta. Replaces the static <Head> tag pattern from Pages Router. Per-route SEO with no extra runtime cost.
generateStaticParams for prerendering.
For dynamic routes that should be pre-rendered at build time (static blog, documentation, marketing pages), export generateStaticParams — a function that returns the list of param values to build pages for. Next generates one HTML file per entry; deploys serve them as static files. The alternative is on-demand rendering at request time (slower per-request, but handles params not known at build).