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.

Practice

1. What is Next.js primarily used for?

easy

A. Writing backend server code without frontend

B. Creating mobile apps with native device access

C. Designing databases for web applications

D. Building React-based websites with routing and performance features

Solution

1. Step 1: Understand Next.js purpose

   Next.js is a framework built on top of React to simplify building websites.

2. Step 2: Identify key features

   It adds routing, faster loading, and SEO support to React apps.

3. Final Answer:

   Building React-based websites with routing and performance features -> Option D

4. Quick Check:

   Next.js = React websites + routing + speed [OK]

Hint: Next.js helps build React websites easily [OK]

Common Mistakes:

• Confusing Next.js with mobile app frameworks
• Thinking Next.js is only backend
• Assuming Next.js is a database tool

2. Which of the following is the correct way to create a page in Next.js?

easy

A. Write HTML files in the public folder

B. Add routes manually in a routing config file

C. Create a React component inside the pages folder

D. Use index.html in the root directory

Solution

1. Step 1: Recall Next.js page creation method

   Next.js uses the pages folder where each file is a React component representing a page.

2. Step 2: Compare options

   Only Create a React component inside the pages folder matches this pattern; others describe static or manual routing methods not used in Next.js.

3. Final Answer:

   Create a React component inside the pages folder -> Option C

4. Quick Check:

   Next.js pages = React components in pages folder [OK]

Hint: Pages are React components in the pages folder [OK]

Common Mistakes:

• Thinking HTML files in public folder create pages
• Believing manual routing config is needed
• Using index.html instead of React components

3. What will Next.js do when you create a file about.js inside the pages folder?

medium

A. Serve the page at URL /about automatically

B. Require manual route setup to access /about

C. Ignore the file unless imported elsewhere

D. Throw an error because pages must be in src folder

Solution

1. Step 1: Understand Next.js file-based routing

   Next.js automatically maps files in pages folder to URLs matching the filename.

2. Step 2: Apply to about.js

   The file about.js becomes accessible at /about without extra setup.

3. Final Answer:

   Serve the page at URL /about automatically -> Option A

4. Quick Check:

   File in pages = URL path [OK]

Hint: File name in pages = URL path automatically [OK]

Common Mistakes:

• Thinking manual routing is needed
• Assuming files outside src are required
• Believing files are ignored if not imported

4. You wrote a React component in pages/contact.js but visiting /contact shows a 404 error. What is the likely mistake?

medium

A. The file is placed inside public folder

B. The component is not exported as default

C. Next.js requires manual route registration

D. The file name must be Contact.jsx with uppercase

Solution

1. Step 1: Check Next.js page export rules

   Each page component must be the default export from its file to be recognized.

2. Step 2: Analyze error cause

   If the component is not exported as default, Next.js won't load it, causing 404.

3. Final Answer:

   The component is not exported as default -> Option B

4. Quick Check:

   Pages need default export [OK]

Hint: Always export page component as default [OK]

Common Mistakes:

• Placing pages in public folder instead of pages
• Thinking manual route setup is needed
• Using uppercase file names incorrectly

5. You want to improve SEO and loading speed of your React website. How does Next.js help achieve this?

hard

A. By pre-rendering pages on the server and generating static HTML

B. By running React code only on the client side after page load

C. By disabling JavaScript to speed up loading

D. By converting React components into plain HTML files manually

Solution

1. Step 1: Understand Next.js rendering methods

   Next.js pre-renders pages either at build time or on the server, creating static or server-rendered HTML.

2. Step 2: Connect to SEO and speed benefits

   Pre-rendered HTML loads faster and is better for search engines than client-only React apps.

3. Final Answer:

   By pre-rendering pages on the server and generating static HTML -> Option A

4. Quick Check:

   Next.js pre-renders for SEO and speed [OK]

Hint: Next.js pre-renders pages for SEO and speed [OK]

Common Mistakes:

• Thinking React runs only on client in Next.js
• Believing JavaScript must be disabled
• Assuming manual HTML conversion is needed