What is page.tsx in Next.js App Router?

A page.tsx (or page.js) file defines the unique UI for a specific route — it makes the route segment publicly accessible. Without a page.tsx, a folder doesn't create a publicly accessible route (it can still contain layouts, loading states, etc.). Basic page: // app/about/page.tsx export default function AboutPage() { return <h1>About us</h1>; }. Server Component page with data fetching: // app/users/page.tsx export default async function UsersPage() { const users = await fetch("https://api.example.com/users").then(r => r.json()); return ( <main> <h1>Users</h1> {users.map(u => <UserCard key={u.id} user={u} />)} </main> ); }. Dynamic route page: // app/posts/[id]/page.tsx export default async function PostPage({ params }: { params: { id: string } }) { const post = await getPost(params.id); return <article>{post.content}</article>; }. Props a page receives: params — route segment dynamic params; searchParams — URL query string params (only available in page.tsx, not layouts). generateMetadata: export async function generateMetadata({ params }) to generate dynamic metadata for the page. Combining with layouts: the page is rendered inside its ancestor layouts. The layout wraps the page content via the children prop.