🛠️ Let’s Build Our First Next.js 15 App (Step-by-Step)

So far, you’ve learned what Next.js is and why it’s so powerful. Now it's time to get your hands dirty and build your first Next.js app!

Don’t worry — it’s easy, and we’ll walk through it together 👇

---

🧑‍💻 Two Ways to Get Started

There are two ways to start working with Next.js:

1. CodeSandbox (No setup needed)

2. Local setup (Recommended if you want full control)

---

🔹 Option 1: Use CodeSandbox (Beginner Friendly)

If you’re in a school lab, public system, or just don’t want to install anything, this is perfect!

👉 Visit CodeSandbox and use the Next.js template or a prepared starter project.

✅ No installation
✅ Works in the browser
✅ You can follow tutorials directly

---

🔸 Option 2: Set Up Next.js on Your System (Local)

If you want to run everything on your machine, here’s how:

🔧 Step 1: Install Node.js

Next.js runs on Node.js, so you need to install it first.

👉 Download Node.js from nodejs.org
✅ Choose the LTS (Long-Term Support) version
✅ It comes with npm (Node Package Manager)

---

🚀 Step 2: Create Your Project

Open your terminal (or command prompt), and run this command:

npx create-next-app@latest

It will ask you a few questions:

• Project name: You can type something like first-app

• Use TypeScript? → No (for now, to keep things simple)

• Use ESLint? → Yes

• Use Tailwind CSS? → No (we’ll explore styling later)

• Use App Router? → Yes (this is the recommended method)

• Use custom import alias? → No

After answering these, your project will be created in a folder with the name you chose.

---

💻 Step 3: Run Your Project

Go into the project folder:

cd first-app

And start the development server:

npm run dev

This will launch your site on http://localhost:3000.

Open that in your browser and BOOM — your first Next.js app is live! 🎉

---

🌍 Why This Page Is Special

Let’s look at a cool trick:

• Right-click on the page and choose "View Page Source"

• Look at the HTML code…

You’ll see your page content already included in the HTML. That means:

✅ The content was rendered on the server
✅ It’s better for SEO
✅ It loads faster for users
✅ It’s different from React apps that render content only in the browser

---

⚖️ React vs Next.js Rendering

---

🧠 Final Thoughts

With your first app up and running, you've officially started your Next.js journey!

✅ You used create-next-app
✅ You understood how routing works
✅ You learned why server-side rendering is powerful

Next.js blends frontend and backend, letting you build full stack apps — all using just JavaScript.