What is Next.js

Next.js in One Sentence

Next.js is a React framework made by Vercel. React gives you components; Next.js gives you everything around them that a real website needs: routing, server rendering, data fetching, image optimisation, SEO and a production build.

File-based routing — a file app/products/page.tsx becomes the URL /products. No router setup.
Server rendering — pages can be rendered to HTML on the server, so users and Google see content immediately.
Full stack — you can write backend code (API endpoints, database queries, form handlers) in the same project.
Built-in optimisation — images, fonts, scripts and code splitting are handled for you.
TypeScript first — a new project is TypeScript by default.

The App Router

Next.js has two routers. The old Pages Router (pages/ folder, getServerSideProps) still works, but all new projects use the App Router (app/ folder), introduced in Next.js 13 and the default since then. This material teaches the App Router with Next.js 15/16 and React 19.

	Pages Router (old)	App Router (current)
Folder	`pages/`	`app/`
Default component	Client component	Server Component
Data fetching	`getServerSideProps`, `getStaticProps`	`async` components + `fetch`
Layouts	Custom `_app.tsx`	`layout.tsx` per folder
Forms / mutations	API routes	Server Actions + Route Handlers

Note: If you see getServerSideProps in a tutorial, it is the old Pages Router. Prefer App Router examples.

Your First Page

app/page.tsx — the home page (/). It is just a React component exported as default:

export default function HomePage() {
  return (
    <main>
      <h1>Welcome to ShopEase</h1>
      <p>Best deals on mobiles, books and fashion.</p>
    </main>
  );
}

Example

Start the dev server and open the page:

npm run dev

Example output

> [email protected] dev
> next dev

   ▲ Next.js 15.5.4
   - Local:        http://localhost:3000

 ✓ Ready in 1.8s
 ✓ Compiled / in 2.1s