Careeroza

Pages

page.tsx

A page is the default export of a page.tsx file. It can be a normal function or an async function that loads data.

app/products/page.tsx

type Product = { id: number; name: string; price: number };

const products: Product[] = [
  { id: 1, name: 'Redmi Note 14', price: 17999 },
  { id: 2, name: 'boAt Airdopes 141', price: 1299 },
];

export default function ProductsPage() {
  return (
    <section>
      <h1>All Products</h1>
      <ul>
        {products.map((p) => (
          <li key={p.id}>
            {p.name} — ₹{p.price}
          </li>
        ))}
      </ul>
    </section>
  );
}

Page Rules

  • The component must be the default export.
  • The name of the function does not matter; the folder decides the URL.
  • Pages receive params and searchParams props (both are Promises in Next.js 15+, covered in Dynamic Routes).
  • Other files in the folder (helpers, components) are private and never become URLs.

Try It

Exercise: Create an About page at /about that shows the heading "About ShopEase" and one paragraph.

Show answer
// app/about/page.tsx
export default function AboutPage() {
  return (
    <main>
      <h1>About ShopEase</h1>
      <p>ShopEase delivers to 18,000+ pin codes across India.</p>
    </main>
  );
}