What is Next.js?
- React course
- Advanced
- Lesson 1/56
- 4 min
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.
Practice First Next.js page
Write a Home component: render <main> with <h1>Welcome</h1> and <p>Starting with Next.js.</p>. export default Home.
Starter code
// app/page.js
// Home bileşenini buraya yazSample solution
// app/page.js
export default function Home() {
return (
<main>
<h1>Welcome</h1>
<p>Starting with Next.js.</p>
</main>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is Next.js best known for?
- File-based routing Correct answer
- Only CSS tools
- A browser extension
- A database server
Explanation: Next.js ships file-based routing.
2 Root path file
// app/____.js
export default function Home() {
return <h1>Merhaba</h1>;
}// app/page.js
export default function Home() {
return <h1>Merhaba</h1>;
}Explanation: app/page.js defines the root path.
3 What is Next.js: match the terms
| Term | Meaning |
|---|---|
app/page.js |
Root path |
app/about/page.js |
/about |
app/layout.js |
Frame |
framework |
Scaffold |