What is page.tsx in Next.js App Router?
Why Interviewers Ask This
Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid Next.js basics — a prerequisite for any developer role.
Answer
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.
Common Mistake
Many candidates answer correctly but can't explain the 'why'. Always be prepared to justify your answer with a concrete example or use case from your Next.js experience.
Previous
What is the layout.tsx file in Next.js App Router?
Next
What is SSR (Server-Side Rendering) in Next.js?