🧭 Day 1 — Introduction & Setup: The Next.js Revolution

Zero to Hero — Hands-on Next.js Tutorial

Welcome to CodeCompass: Next.js Edition. Over the next 30 days, we are going to master the modern web.

🚀 Why Next.js (App Router)?

React is a library. Next.js is a Framework. The “App Router” (introduced in Next.js 13.4+) is the biggest shift in React history.

Server Components by Default: Code runs on the server. No client-side JavaScript sent unless you ask for it.
Streaming: Send HTML parts as they are ready.
Data Fetching: Just await fetch() inside your component. No more useEffect.

🛠️ Step 1: Installation

We will use create-next-app to scaffold our “Zero to Hero” project.

Open your terminal and run:

npx create-next-app@latest next-hero

Choose the following options:

TypeScript? Yes (Essential for modern web)
ESLint? Yes (Catch bugs early)
Tailwind CSS? Yes (Rapid styling)
src/ directory? Yes (Cleaner structure)
App Router? Yes (The future!)
Customize Import Alias? No (Default @/* is fine)

cd next-hero
npm run dev

Open http://localhost:3000. You should see the Next.js starter page.

📂 Step 2: Understanding the Structure

Delete everything inside src/app/page.tsx and leave this:

// src/app/page.tsx
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">Hello Next.js World! 🌍</h1>
    </main>
  );
}

Now look at your folders:

src/app/: Where your routes live (“App Router”).
layout.tsx: The main wrapper (HTML/Body tags) that wraps every page.
page.tsx: The UI for the / route.

🧪 Challenge: Day 1

Change the text in h1 to “CodeCompass Next.js”.
Add a <p> tag below it with “Day 1 Complete”.
Add className="text-blue-500" to the <p> tag.

See you tomorrow for Routing & File Structure! 🛣️