Demo a basic Next.js App from scratch

Basic setup (Node, VS Code, project create)
Next.js app structure समझना
Pages, routing, components, CSS, assets
Running, building, deploying basics

Main example: simple blog-style app / demo site.
I’ll use create-next-app (App Router, TypeScript off for now to keep it simple).

Commands मान रहा हूँ कि तू Windows + Node.js + npm use कर रहा है.

1️⃣ Prerequisite setup

1. Install Node.js

Go to Node.js वेबसाइट (LTS version install करना बेहतर है).
Install and verify:


node -v
npm -v

अगर दोनों version दिखा रहे हैं तो setup ready ✅

2. Create workspace folder

मान लो तू D:\Projects\nextjs-basics use कर रहा है:


mkdir D:\Projects\nextjs-basics
cd D:\Projects\nextjs-basics

2️⃣ New Next.js app बनाना (from scratch)

Next.js team officially create-next-app recommend करती है.

1. Run the generator


npx create-next-app@latest my-first-next-app

ये command पूछेगा (approx — options थोड़े बदल सकते हैं time के साथ):

What is your project named? → my-first-next-app
TypeScript? → No (for now)
ESLint? → Yes
Tailwind CSS? → अभी No (पहले core समझते हैं)
src/ directory? → No (simple रखना)
App Router (recommended)? → Yes
import alias? → default रहने दे (@/*)

Create होने के बाद:


cd my-first-next-app

2. Important npm commands (core commands)

Inside project folder:

Dev server चलाने के लिए:


npm run dev

Default: http://localhost:3000

Production build बनाने के लिए:


npm run build

Production server run (build के बाद):


npm run start

Lint check (ESLint):


npm run lint

ये चार commands तू बार-बार use करेगा.

3️⃣ Project structure समझना

my-first-next-app folder में कुछ main चीज़ें दिखेंगी:


my-first-next-app/
  .eslintrc.json       → ESLint config
  next.config.mjs      → Next.js config
  package.json         → dependencies, scripts
  public/              → static files (images, favicon, etc.)
  app/                 → main app router folder (IMPORTANT)
    layout.js          → root layout (common HTML shell)
    page.js            → home page (`/`)
    globals.css        → global CSS

App Router basics

app/page.js → route /
app/about/page.js → route /about
app/blog/page.js → route /blog
app/blog/[slug]/page.js → dynamic route /blog/anything

4️⃣ First run – check default page

Run:


npm run dev

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

तुझे Next.js का default welcome page दिखेगा.
अब इसे धीरे-धीरे अपने हिसाब से तोड़ते हैं.

5️⃣ layout.js & page.js – skeleton समझ

`app/layout.js` (root layout)

यहाँ basically HTML का outer shell होता है:


// app/layout.js
export const metadata = {
  title: 'My First Next App',
  description: 'Learning Next.js from scratch',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

जो भी page होगा (app folder के अंदर), वो children के रूप में यहाँ render होगा.
मतलब ये एक बार define, हर जगह common layout मिल गया.

`app/page.js` (home page)

Default वाला हटाकर simple अपना बना:


// app/page.js
export default function HomePage() {
  return (
    <main style={{ padding: '2rem' }}>
      <h1>Welcome to my First Next.js App</h1>
      <p>This is the homepage.</p>
    </main>
  );
}

Save करो → browser auto reload → नया page दिखेगा ✅

6️⃣ Pages & Routing – basic to intermediate

1. New static page बनाना (`/about`)

New folder + page:


app/
  about/
    page.js


// app/about/page.js
export default function AboutPage() {
  return (
    <main style={{ padding: '2rem' }}>
      <h1>About</h1>
      <p>This site is built with Next.js using the App Router.</p>
    </main>
  );
}

अब http://localhost:3000/about खुल जाएगा.

2. Linking between pages

Next.js client navigation के लिए <Link> component देता है (no full reload).


// app/page.js
import Link from 'next/link';

export default function HomePage() {
  return (
    <main style={{ padding: '2rem' }}>
      <h1>Welcome to my First Next.js App</h1>

      <nav style={{ marginTop: '1rem' }}>
        <ul>
          <li><Link href="/about">About</Link></li>
          <li><Link href="/blog">Blog</Link></li>
        </ul>
      </nav>
    </main>
  );
}

Concept:

Normal <a href> → browser reload, full round-trip

<Link href> → SPA-style, fast navigation (Next.js handles internally)

3. Blog listing page


app/
  blog/
    page.js


// app/blog/page.js
const posts = [
  { slug: 'hello-next', title: 'Getting started with Next.js' },
  { slug: 'routing-basics', title: 'Understanding Next.js routing' },
];

export default function BlogListPage() {
  return (
    <main style={{ padding: '2rem' }}>
      <h1>Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </main>
  );
}

(चाहो तो यहाँ भी Link use कर सकते हो, अभी basic दिखा रहा हूँ.)

4. Dynamic routes (`/blog/[slug]`)


app/
  blog/
    [slug]/
      page.js


// app/blog/[slug]/page.js

const posts = {
  'hello-next': {
    title: 'Getting started with Next.js',
    content: 'This is an introductory post about Next.js basics.'
  },
  'routing-basics': {
    title: 'Understanding Next.js routing',
    content: 'In this post, we explore file-based routing in Next.js.'
  },
};

export default function BlogPostPage({ params }) {
  const post = posts[params.slug];

  if (!post) {
    return (
      <main style={{ padding: '2rem' }}>
        <h1>Post not found</h1>
      </main>
    );
  }

  return (
    <main style={{ padding: '2rem' }}>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  );
}

Concepts:

params prop App Router में आता है { slug }
[slug] → dynamic URL segment
posts[params.slug] → URL के हिसाब से डेटा fetch

7️⃣ Styling – CSS basics in Next.js

1. Global CSS (`app/globals.css`)

globals.css में कुछ basic styling डाल:


/* app/globals.css */

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f5f5f5;
}

main {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  margin-top: 2rem;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ये सब pages पर लागू होगा automatically क्योंकि layout.js में import './globals.css' already रहता है (check कर लेना).

2. Component-level UI (simple Nav component)

app/components/Nav.js create:


app/
  components/
    Nav.js


// app/components/Nav.js
import Link from 'next/link';

export default function Nav() {
  return (
    <nav style={{ marginBottom: '1.5rem' }}>
      <Link href="/" style={{ marginRight: '1rem' }}>Home</Link>
      <Link href="/about" style={{ marginRight: '1rem' }}>About</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  );
}

अब इसे layout में use कर:


// app/layout.js
import './globals.css';
import Nav from './components/Nav';

export const metadata = {
  title: 'My First Next App',
  description: 'Learning Next.js from scratch',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>
          <Nav />
          {children}
        </main>
      </body>
    </html>
  );
}

Concept:

Reusable React components + file-based routing = Next.js की ताकत

8️⃣ Static data vs async data fetch (Server Components)

By default App Router pages Server Components होते हैं.
तू async function directly use कर सकता है.

Example: Blog list को async बना देते हैं (मान लो future में API से आएगा):


// app/blog/page.js

async function getPosts() {
  // Later this could be a real fetch from API / CMS
  return [
    { slug: 'hello-next', title: 'Getting started with Next.js' },
    { slug: 'routing-basics', title: 'Understanding Next.js routing' },
  ];
}

export default async function BlogListPage() {
  const posts = await getPosts();

  return (
    <main>
      <h1>Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <a href={`/blog/${post.slug}`}>{post.title}</a>
          </li>
        ))}
      </ul>
    </main>
  );
}

Concepts:

Server Components → run on server, can use async/await easily, no client JS overhead.

Data fetching यहाँ ही कर सकता है (later Directus / DB / API से).

9️⃣ Public assets (images, favicon, etc.)

public/ folder = directly accessible at root.

Example:

Put logo.png in public/
Use in any page:


import Image from 'next/image';

export default function HomePage() {
  return (
    <main>
      <h1>Welcome</h1>
      <Image src="/logo.png" alt="Logo" width={120} height={120} />
    </main>
  );
}

next/image:

Automatic optimization

Lazy loading

Responsive behaviour

🔟 Basic “Dev → Build → Prod” cycle

1. Development


npm run dev

Hot reload
Error overlays
Console logs etc.

2. Production build


npm run build

ये करेगा:

Code optimization
Static optimization
Server & client bundles separation
Warnings अगर कुछ गलत या heavy है

3. Run production server


npm run start

अब ये optimized mode में चलेगा. Real world जैसा behaviour.

1️⃣1️⃣ Some important Next.js concepts covered so far

App Router (app/ directory)
File-based routing (page.js, [slug]/page.js)
Layouts (layout.js, shared across pages)
Linking (next/link)
Global CSS (globals.css)
Components (Nav, etc.)
Server Components + async data
Static files (public/ + next/image)
npm scripts (dev, build, start, lint)

1️⃣2️⃣ Next level ideas (jab तू comfortable हो जाए)

Once basics pakka:

Add Tailwind CSS (re-run project with Tailwind yes, या manually add)
Add API routes using app/api/...
Connect to a CMS (Directus 😉)
Add dynamic metadata, SEO optimizations
Try deployment (Vercel is the default easy way)

Mohit Bhati - Experience CMS

Search This Blog