Next.js Introduction

Next.js is a framework built on top of React. It gives you a ready-made structure for building complete websites and web apps, so you do not have to wire everything up yourself.

What is Next.js?

React is a library for building user interfaces. It is great at drawing components on the screen, but on its own it does not decide how your pages are organised, how data is loaded, or how the site is sent to the browser.

Next.js fills those gaps. It adds routing, ways to fetch and cache data, server-side rendering, image and font handling, and a build system that turns your code into a fast website. It is made by Vercel and is one of the most widely used React frameworks.

What can you build with it?

• Marketing sites and blogs that load fast and rank well in search engines
• Dashboards and web apps with logins and live data
• Online stores and booking systems
• APIs, right alongside your pages

How Next.js shows a page

A big part of Next.js is rendering — how and where your HTML is created. You will meet these words often, so here they are in simple terms:

The good news: in Next.js 16 you mostly just write components, and the framework picks a sensible strategy. You add caching only where you want it. We cover all of this later.

The App Router

Modern Next.js uses the App Router: you create routes by making folders inside an app directory. This tutorial teaches the App Router throughout, because it is the current, recommended way to build with Next.js 16.