What is Next.js - Quick Revision & Key Takeaways

Recall & Review

beginner

What is Next.js?

Next.js is a React framework that helps build fast, user-friendly websites and apps with features like server-side rendering and static site generation.

beginner

Name two main rendering methods Next.js supports.

Next.js supports Server-Side Rendering (SSR) and Static Site Generation (SSG). SSR builds pages on each request, SSG builds pages at build time.

intermediate

How does Next.js improve website performance?

Next.js improves performance by pre-rendering pages, optimizing images, and splitting code automatically to load only what is needed.

intermediate

What is the App Router in Next.js 13?

The App Router is a new way to organize pages and layouts using folders and files, making routing simpler and more powerful.

beginner

Why is Next.js good for SEO?

Because Next.js can render pages on the server before sending them to the browser, search engines can read the full content easily.

What does Next.js primarily build upon?

A React

B Angular

C Vue

D jQuery

Next.js is a framework built on top of React to add extra features.

Which Next.js feature helps pages load faster by building them ahead of time?

A Client-side rendering

B Static Site Generation

C Dynamic imports

D API routes

Static Site Generation builds pages at build time for faster loading.

What is the purpose of server-side rendering in Next.js?

A To run JavaScript in the browser

B To style components

C To build pages on the server for each request

D To manage database connections

Server-side rendering builds pages on the server every time a user requests them.

Which Next.js version introduced the App Router?

A Next.js 16

B Next.js 12

C Next.js 10

D Next.js 13

Next.js 13 introduced the new App Router for better routing.

Why is Next.js good for SEO?

A It pre-renders pages on the server

B It hides content from search engines

C It uses client-side rendering only

D It disables JavaScript

Pre-rendering pages on the server makes content visible to search engines.

Explain what Next.js is and why developers use it.

Think about how Next.js helps build websites faster and better.

Describe the difference between Server-Side Rendering and Static Site Generation in Next.js.

Consider when pages are created and how that affects speed.

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