What is Next.js - Visual Explanation

Concept Flow - What is Next.js

User requests a web page

↓

Next.js receives request

↓

Checks if page is Server Component

↓

Runs server code

↓

Generates HTML + JS

↓

Sends response to browser

↓

Browser renders page

Next.js handles web page requests by deciding if code runs on the server or client, then sends the right HTML and JavaScript to the browser.

Execution Sample

NextJS

export default function Page() {
  return <h1>Hello from Next.js!</h1>;
}

A simple Next.js page component that shows a heading on the web page.

Execution Table

Step	Action	Evaluation	Result
1	Browser requests /page	Next.js receives request	Ready to process page
2	Check if Page is Server Component	Page is a Server Component	Run component code on server
3	Execute Page function	Return <h1>Hello from Next.js!</h1>	HTML generated
4	Send HTML to browser	Browser receives HTML	Page content visible
5	Browser renders HTML	Shows heading on screen	User sees 'Hello from Next.js!'
6	No more steps	End of request	Response complete

💡 Page rendered and response sent, no further processing needed

Variable Tracker

Variable	Start	After Step 3	Final
Page component output	undefined	<h1>Hello from Next.js!</h1>	<h1>Hello from Next.js!</h1>

Key Moments - 2 Insights

Why does Next.js run some code on the server and some on the client?

Next.js decides based on the component type. Server Components run on the server to generate HTML, Client Components run in the browser for interactivity. See execution_table step 2.

What does Next.js send to the browser?

Next.js sends HTML generated from server code plus JavaScript needed for client interactivity. This is shown in execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the output of the Page component at step 3?

A An error message

B <h1>Hello from Next.js!</h1>

C A blank page

D JavaScript code only

💡 Hint

Check the 'Evaluation' and 'Result' columns at step 3 in the execution_table

At which step does the browser render the page content?

A Step 2

B Step 4

C Step 5

D Step 6

💡 Hint

Look at the 'Action' and 'Result' columns to find when the browser shows the heading

If the Page component was a Client Component, what would change in the flow?

A Next.js would run the component code on the client instead of the server

B Next.js would not send any HTML to the browser

C The browser would not render the page

D The server would send only CSS

💡 Hint

Refer to the decision at step 2 in the concept_flow about Server vs Client Components

Concept Snapshot

Next.js is a React framework that decides if code runs on the server or client.
It generates HTML on the server for fast loading and sends JavaScript for interactivity.
Pages are React components exported as default functions.
Server Components run on the server; Client Components run in the browser.
Next.js sends the right code to the browser to render pages quickly and smoothly.

Full Transcript

Next.js is a framework that helps build web pages using React. When a user asks for a page, Next.js checks if the page component should run on the server or the client. If it is a Server Component, Next.js runs the code on the server to create HTML. Then it sends this HTML to the browser. The browser shows the page content to the user. If the component needs to run on the client for interactivity, Next.js sends JavaScript to the browser to handle that. This way, Next.js makes pages load fast and work well. The example code shows a simple page that displays a heading. The execution table traces how the request flows from the browser to the server and back, showing when the HTML is created and rendered.