🔥 1. Components & Props –

React की तरह ही component system है.

components/Hello.js:


export default function Hello({ name }) {
  return <h2>Namaste {name} ji 👋</h2>;
}

Use in page:


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

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

Next.js में ये सब super smooth चलता है — कोई config नहीं, कोई issue नहीं.

🧭 2. App Router ka असली मज़ा — Layouts

app/layout.js पूरे project का father component है.


export const metadata = {
  title: "My Next.js Blog",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>My Blog Header</header>
        {children}
        <footer>© 2025 Babu's Blog</footer>
      </body>
    </html>
  );
}

अब हर page में ये header-footer खुद आएगा, जैसे Paratha के साथ free दही।

📦 3. Navigation — Link से चलो मस्त

Next.js में <Link> SEO-friendly navigation देता है.


import Link from "next/link";

<Link href="/about">About</Link>

No full reload.
No jhatka.
Just smooth transition.

🎯 4. Fetching Data — Server Components ka Jaadu

Next.js में server components default होते हैं, मतलब:

Data fetching page ke अंदर ही
कोई extra API call नहीं browser से

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>;
}

इसको कहते हैं:
“Backend भी अंदर, frontend भी अंदर — full paisa vasool!”

🍔 5. API Routes – अपने ही घर में छोटा backend

app/api/users/route.js


export async function GET() {
  return Response.json([
    { id: 1, name: "Rajesh" },
    { id: 2, name: "Mohit" }
  ]);
}

Use in frontend:


const res = await fetch("/api/users");
const users = await res.json();

Browser को लगता है API कहीं cloud में है,
Developer को पता है — ये सब घर का खाना है 😄

🎨 6. Styling – CSS ka मेला

Option 1: Plain CSS

app/globals.css → Global CSS

Option 2: Module CSS

page.module.css


.title {
  color: blue;
}

Use:


import styles from "./page.module.css";

<h1 className={styles.title}>Hello Next.js</h1>

Option 3: Tailwind CSS

Sabse fast, sabse easy (let me know, I'll add full setup too).

🖼️ 7. Next.js Image Component –


import Image from "next/image";

<Image
  src="/images/babu.png"
  width={300}
  height={300}
  alt="Babu"
/>

Benefits:

Auto optimize
Lazy loading
CDN-ready

मतलब बिना gym किए images फिट और slim.

🚀 8. Dynamic Routes — Param wale pages

Make a folder:


app/blog/[id]/page.js

Inside:


export default function BlogPage({ params }) {
  return <h1>You opened blog ID: {params.id}</h1>;
}

Open:


/blog/7  
/blog/hello-world  
/blog/100

सब चलेगा — fully dynamic.

📂 9. Generate Static Pages Automatically

generateStaticParams() का use:


export async function generateStaticParams() {
  return [
    { id: "1" },
    { id: "2" },
    { id: "3" },
  ];
}

Next.js build time पर ये pages बना देगा → Speed = Ferrari.

💡 10. Bonus Tip — SEO without sweat

Add metadata in page:


export const metadata = {
  title: "Next.js Blog – Babu",
  description: "Learn Next.js in Hinglish",
};

Mohit Bhati - Experience CMS

Search This Blog

⭐ Next.js Beginner Series – Part 2