⭐ A Beginner’s Guide to Building Your First Next.js Application

 

🧰 1. Prerequisites — Kya-kya aana chahiye?

Next.js शुरू करने से पहले thoda basic होना चाहिए:

• HTML, CSS basics

• JS fundamentals

• React ka thoda experience

• Node.js installed होना चाहिए (v16.8+ recommended)

बस. इतना काफी है.

---

🚀 2. Next.js Project Setup (सबसे आसान step)

Start करने का सबसे perfect तरीका है:

npx create-next-app@latest --experimental-app

Ye command automatically project ready कर देती है — folder structure, configs, TypeScript, ESLint… सब पूछकर सेट कर देती है.

Setup के बाद run करो:

npm run dev

Browser में खोलो:
👉 http://localhost:3000

Mubarak ho — आपका पहला Next.js app चल गया! 😎

---

📁 3. Understanding the Folder Structure

Create-next-app आपके लिए एक ऐसा घर बना देता है, जहाँ हर चीज़ already arrange होती है:

my-app/
 ├─ app/        (Ye main directory hai — pages yahi बनते हैं)
 │   ├─ page.tsx
 │   ├─ layout.tsx
 ├─ public/     (Images, icons, static files)
 ├─ package.json
 ├─ tsconfig.json (अगर TypeScript चुना हो)
 └─ node_modules/

app folder Next.js ka brain है — हर page, route, layout yahi से handle होता है.

---

🧭 4. Creating Your First Page (file-based routing)

Next.js में routing इतनी simple होती है कि मज़ा आ जाता है.

अगर तुम /about page बनाना चाहते हो:

Step 1: Folder बनाओ

app/about/page.tsx

Step 2: अंदर code लिखो:

export default function AboutPage() {
  return <h1>About Me — I am Babu 😎</h1>;
}

अब browser में खोलो:
👉 http://localhost:3000/about

हो गया! बिना किसी routing library के.
Magic = File-Based Routing

---

🎨 5. Creating Components (React जैसा, बस थोड़ा better)

Next.js full support करता है React components का.

Example:

components/Hello.js:

export default function Hello({ name }) {
  return <h2>Hi {name} 👋 Welcome to Next.js!</h2>;
}

Use in a page:

import Hello from "../components/Hello";

export default function Home() {
  return <Hello name="Babu" />;
}

बस — reusable UI!

---

🌐 6. Fetching Data — SSR & SSG ka funda

Next.js की सबसे बड़ी ताकत है pre-rendering:

• कुछ pages build time पर render होते हैं → SSG (Static Site Generation)

• कुछ हर request पर render होते हैं → SSR (Server-Side Rendering)

Example:

export default async function Page() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const post = await res.json();

  return <h1>{post.title}</h1>;
}

ये server पर fetch होगा → fast + SEO friendly.

---

🍔 7. API Routes — Apna chota backend अंदर ही अंदर

Separate backend ki जरूरत नहीं.

Next.js में आप सीधे API बना सकते हो:

app/api/hello/route.js

export async function GET() {
  return Response.json({ message: "Hello from API!" });
}

Browser में open:
👉 http://localhost:3000/api/hello

बस backend तैयार!
Ye Next.js की सबसे powerful features में से एक है.

---

⚡ 8. Hot Reloading — Developer Experience ka Best Friend

File save करो → browser खुद refresh.

No headache. No drama.

---

🧪 9. Example: Build a Simple Home Page

app/page.tsx:

export default function Home() {
  return (
    <div>
      <h1>Welcome to My First Next.js App 🎉</h1>
      <p>This is super easy, Babu!</p>
    </div>
  );
}

Save → instantly browser update.

---

🔚 Conclusion — Next.js- 

अब तक तुमने सीख लिया:

• Next.js setup कैसे होता है

• Pages कैसे बनते हैं (file-based routing)

• Components

• SSR vs SSG concept

• API routes

• Folder structure

Ye foundation इतना strong है कि अब tum Next.js blogs, dashboards, portfolio, admin panels, AI apps, kuch bhi बना सकते हो.

Reference: 

https://dev.to/joshhortt/a-beginners-guide-to-building-your-first-nextjs-application-step-by-step-tutorial-glf