What is Next.js?

Learn that Next.js is a React-based framework.

What is Next.js?

Next.js is a React-based framework. It adds file-based routing, SSR (server-side rendering) and SSG (static generation) on top of React.

Instead of bootstrapping a React app from scratch, you use Next.js; routing, optimization and data fetching come built in. The app/ directory is the route root.

Big companies (Vercel, TikTok, Netflix) use Next.js in production. In these lessons we learn the App Router approach.

The app/ directory

In the App Router each folder is a URL segment. app/page.js is the root path (/), app/about/page.js is /about.

Each folder's page.js provides that path's content. layout.js defines the wrapping frame (nav, footer).

This structure organizes code by URL; no separate route config file is needed.

Exercise First Next.js page

Write a Home component: render <main> with <h1>Welcome</h1> and <p>Starting with Next.js.</p>. export default Home.

Show example solution

// app/page.js
export default function Home() {
  return (
    <main>
      <h1>Welcome</h1>
      <p>Starting with Next.js.</p>
    </main>
  );
}

Test yourself

What is Next.js best known for?
- File-based routing
- Only CSS tools
- A browser extension
- A database server
Show answer

File-based routing — Next.js ships file-based routing.

Root path file

// app/____.js
export default function Home() {
  return <h1>Merhaba</h1>;
}

Show answer

// app/page.js
export default function Home() {
  return <h1>Merhaba</h1>;
}

What is Next.js: match the terms

app/page.js

Root path
app/about/page.js

/about
app/layout.js

Frame
framework

Scaffold

Next lesson: App Router

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies