Lesson 1 — Pages are components

A page is a function that returns UI

Next.js is a framework built on React for making websites. In Next.js every page is a component: a JavaScript function that returns what should appear on screen. The HTML-like code inside return ( ... ) is called JSX — it looks like HTML but lives inside JavaScript.

export default function Page() {
  return <h1>Hello</h1>;
}

A component must return one outer element, so several tags are wrapped in a <div> (or <>...</>).

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: once you can write one component, you can build any page — they are all made the same way.