What is Next.js
Next.js is a framework built on React. React only draws the interface from components, and everything else — page addresses, data loading, server work, the build — you have to assemble yourself. Next.js provides all of that out of the box and gives the project one clear structure.
Version
The course is written for Next.js 16 with the App Router — the modern way to describe pages through the app/ folder. It is used together with React 19.2 and TypeScript. If you come across an article about Next.js 15, most of its code still fits, but some things were renamed or changed in 16 — the lessons point these out. Older articles may show a pages/ folder and getServerSideProps functions — that is the previous Pages Router, which this course does not use.
What Next.js adds
| Task | Plain React | Next.js |
|---|---|---|
| Page addresses | A separate routing library | Folders and files in app/ |
| HTML for search engines | The page is empty until JS runs | HTML is prepared on the server |
| Loading data | useEffect and fetch in the browser | await right in a component on the server |
| Handling forms | Your own API server | Server actions |
| API | A separate project | route.ts files |
| Images, fonts, SEO | By hand | Ready-made components and settings |
Server and browser
The main difference from the React course: some components run on the server. Such a component can read the database or a secret key, and the browser receives ready HTML. Components with state and event handlers work in the browser, as before. Each kind gets its own lesson.
The course project
The whole course builds a small blog:
- a home page with a list of posts;
- a post page at
/posts/hello-nextjs; - a form to add a post;
- comments on posts.
Each lesson adds one feature to the blog.
When you do not need Next.js
If the whole app lives behind a login and search engines do not matter, React with the Vite bundler is enough. Next.js helps where a fast first load, SEO and server code next to the interface matter: blogs, shops, company sites, user dashboards.
Common mistake
Looking for answers in docs or articles about the Pages Router. Code with getStaticProps, next/router and a pages/ folder does not fit the App Router. Check that the material is about the App Router: on the Next.js docs site the switch at the top of the menu should be set to App Router.