React 1

Excellent. Based on your goal (building real projects → remote job), I would not teach Next.js the way most tutorials do.

Most courses spend hours on routing theory, rendering history, or obscure APIs. Instead, we'll learn the 20% of concepts you'll use in 80% of real projects.

Next.js Roadmap (Job-Oriented)

Phase 1 — JavaScript You'll Actually Need (Quick Revision)

Goal: Remove JS gaps that cause problems in Next.js.

1. Modern ES6+

2. Modules (import / export)

3. Array methods (map, filter, find)

4. Destructuring

5. Spread operator

6. Async / Await

7. Fetch API

8. Objects & Arrays

9. Optional Chaining

10. Template Literals

---

Phase 2 — React Essentials

Goal: Think in React.

1. JSX

2. Components

3. Props

4. Rendering Lists

5. Conditional Rendering

6. Events

7. State (useState)

8. Forms

9. Effects (useEffect)

10. Component Communication

---

Phase 3 — Next.js Core (Most Important)

This is where we'll spend most of our time.

1. Creating a Next.js project

2. App Router

3. Pages

4. Layouts

5. Navigation

6. Link

7. Images

8. Static Assets

9. CSS Modules

10. Tailwind CSS

11. Server Components

12. Client Components

13. Fetching Data

14. Loading UI

15. Error UI

16. Dynamic Routes

17. Route Groups

---

Phase 4 — Real Backend Skills

1. API Routes

2. Route Handlers

3. GET

4. POST

5. PUT

6. DELETE

7. Forms

8. Validation

9. Environment Variables

---

Phase 5 — Database

1. Prisma

2. PostgreSQL

3. CRUD

4. Relationships

5. Migrations

---

Phase 6 — Authentication

1. Login

2. Register

3. Sessions

4. Protected Routes

5. Middleware

---

Phase 7 — Production Skills

1. File Upload

2. Search

3. Pagination

4. Sorting

5. Filtering

6. Caching

7. SEO

8. Metadata

9. Deployment (Vercel)

10. Performance

---

Phase 8 — Portfolio Projects

We'll build progressively:

• Notes App

• Blog

• Expense Tracker

• Authentication System

• Dashboard

• Mini Ecommerce

• Full Stack SaaS Clone

---

Learning Format

Every chapter will contain:

• 🎯 Goal

• 15–25 MCQs

• Answers immediately after each question

• Bug finding

• Predict output

• Better code choices

• Mini challenge

• Mini project

---

Chapter 1 — Modern Project Structure & Creating Your First Next.js App

🎯 Goal

Understand what a Next.js project looks like and identify the files you'll touch every day.

Assumption for this chapter: You already know basic HTML, CSS, and enough JavaScript to read simple examples. We'll fill any missing JS as we encounter it.

---

Q1 (Easy)

Which command creates a new Next.js project?

A)

npm create next-app

B)

npx create-next-app@latest

C)

next new app

D)

npm next install

✅ Answer

B

Why?

npx create-next-app@latest downloads and runs the latest project generator without installing it globally.

---

Q2

After creating the project, which command starts the development server?

A)

npm build

B)

npm start

C)

npm run dev

D)

next serve

✅ Answer

C

Why?

During development, you'll use:

npm run dev

---

Q3

Which folder contains your application pages when using the App Router?

A)

src

B)

public

C)

app

D)

styles

✅ Answer

C

Everything users visit begins inside the app folder.

---

Q4

You want an image like logo.png to be available at /logo.png in the browser.

Where should you place it?

A)

app

B)

public

C)

node_modules

D)

styles

✅ Answer

B

The public folder is for static files like images, PDFs, icons, and videos.

---

Q5

Which folder should you almost never edit manually?

A)

public

B)

node_modules

C)

app

D)

components

✅ Answer

B

It contains installed packages. Editing it is like changing the engine parts of a rented car—you'll lose those changes on reinstall.

---

Q6

What happens when you save a file while npm run dev is running?

A)

Restart your computer

B)

Nothing

C)

The browser usually updates automatically

D)

The project is deleted

✅ Answer

C

Next.js automatically reloads or refreshes the page.

---

Q7

Which file represents the homepage (/)?

A)

app/home/page.js

B)

app/index.js

C)

app/page.js

D)

pages/index.js

✅ Answer

C

app/page.js maps to the root URL /.

---

Q8

Suppose your project contains:

app
 ├── about
 │     page.js

Which URL opens it?

A)

/about

B)

/page

C)

/about/page

D)

/home

✅ Answer

A

Each folder becomes part of the URL, and page.js is the page for that folder.

---

Q9 — Predict the Output

app/page.js

export default function Home() {
  return <h1>Hello</h1>;
}

What appears?

A)

Nothing

B)

Hello

C)

Error

D)

undefined

✅ Answer

B

React renders the <h1> element.

---

Q10 — Find the Bug

function Home() {
    return <h1>Hello</h1>
}

What is missing?

A)

Nothing

B)

export default

C)

import React

D)

Semicolon

✅ Answer

B

A page component must be exported as the default export so Next.js can use it.

export default function Home() {
  return <h1>Hello</h1>;
}

New syntax: export default means "this is the main thing this file provides."

---

Q11

Which file is used to create a shared layout?

A)

layout.js

B)

template.js

C)

main.js

D)

wrapper.js

✅ Answer

A

layout.js wraps multiple pages so shared UI (like a navbar) doesn't have to be repeated.

---

Q12

Which folder usually stores reusable UI like buttons and cards?

A)

components

B)

public

C)

node_modules

D)

cache

✅ Answer

A

While optional, components is the common place for reusable pieces.

---

Q13 — Which Code Is Better?

Option A

function Home() {
  return <h1>Home</h1>;
}

export default Home;

Option B

export default function Home() {
  return <h1>Home</h1>;
}

✅ Answer

B

It's shorter and the style you'll see most often in real Next.js projects.

---

Q14 — Find the Bug

Project:

app
   about.js

Why doesn't /about work?

A)

Need CSS

B)

Should be:

app
   about
      page.js

C)

Need index.js

D)

Need main.js

✅ Answer

B

With the App Router, routes are folders containing a page.js file.

---

Q15 (Hardest)

Which structure creates both / and /products?

A)

app
   page.js
   products
      page.js

B)

pages
   index.js
   products.js

C)

src
   home.js

D)

routes
   products.js

✅ Answer

A

app/page.js serves /, and app/products/page.js serves /products.

---

🧠 Pattern to Remember

Think of the app folder like a building:

• Every folder is a room (a URL segment).

• Every page.js is the main activity in that room.

• The layout.js is the hallway that connects rooms and stays the same as you move around.

Once you see this pattern, most routing in Next.js feels much simpler.

---

Mini Coding Challenge

Create this structure:

app
    page.js
    about
        page.js
    contact
        page.js

Display:

• / → Home

• /about → About Us

• /contact → Contact

Try it yourself before checking the browser.

---

Mini Real-World Project

Company Website Skeleton

Using only today's concepts, create the basic structure for a small company website:

app
├── page.js          // Home
├── about
│   └── page.js
├── services
│   └── page.js
├── contact
│   └── page.js
├── layout.js
components
└── Navbar.js
public
└── logo.png

Your goals:

• Create four pages.

• Add a simple shared layout.

• Create a reusable Navbar component (it can just display the company name for now).

• Place a logo.png file in public so it's available later.

---

How we'll continue

When you reply with "ok", we'll move to Chapter 2: Components & JSX in Next.js, where you'll learn the most fundamental building block of every React/Next.js application through progressively harder MCQs, output prediction, bug-finding, and a mini project.