User visits website
      ↓
Browser downloads empty HTML shell
      ↓
Browser downloads JavaScript bundle (can be large)
      ↓
JavaScript executes and builds the page
      ↓
User finally sees content

User requests /products
      ↓
Next.js server receives request
      ↓
Server fetches data (from database or API)
      ↓
Server renders the React component with that data
      ↓
Server sends complete HTML to browser
      ↓
User sees content IMMEDIATELY
      ↓
JavaScript loads and "hydrates" the page (makes it interactive)

// app/products/page.js
// This is a React Server Component — runs on the server by default

async function ProductsPage() {
    // This fetch runs on the SERVER — not in the browser
    const response = await fetch("https://api.example.com/products", {
        cache: "no-store" // Always fetch fresh data (SSR behavior)
    });
    const products = await response.json();

    return (
        <main>
            <h1>Our Products</h1>
            <div className="product-grid">
                {products.map(product => (
                    <div key={product.id} className="product-card">
                        <h2>{product.name}</h2>
                        <p>₹{product.price.toLocaleString()}</p>
                    </div>
                ))}
            </div>
        </main>
    );
}

export default ProductsPage;

Build time (once):
  Fetch all data → Render all pages → Generate HTML files

Runtime (every request):
  User requests /blog/my-post
        ↓
  CDN serves pre-built HTML file instantly
  (No server computation, no database query)
        ↓
  User sees content in milliseconds

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

// Generate all blog post pages at build time
export async function generateStaticParams() {
    const posts = await fetch("https://api.example.com/posts").then(r => r.json());

    return posts.map(post => ({
        slug: post.slug
    }));
}

// Each blog post page — rendered once at build time
async function BlogPost({ params }) {
    const post = await fetch(
        `https://api.example.com/posts/${params.slug}`
    ).then(r => r.json());

    return (
        <article>
            <h1>{post.title}</h1>
            <p className="date">{post.publishedAt}</p>
            <div dangerouslySetInnerHTML={{ __html: post.content }} />
        </article>
    );
}

export default BlogPost;

// app/products/page.js

async function ProductsPage() {
    const products = await fetch("https://api.example.com/products", {
        next: { revalidate: 60 } // Regenerate page every 60 seconds
    }).then(r => r.json());

    return (
        <div>
            {products.map(product => (
                <ProductCard key={product.id} product={product} />
            ))}
        </div>
    );
}

Build time → Page generated statically

First request → Serves static page (instant)
                Background: check if revalidation time passed

If time passed → Serve old page to this user (still fast!)
                 Background: regenerate the page with fresh data

Next request → Serves newly regenerated page

app/
├── page.js              → / (homepage)
├── about/
│   └── page.js          → /about
├── blog/
│   ├── page.js          → /blog (list all posts)
│   └── [slug]/
│       └── page.js      → /blog/my-post (dynamic route)
├── products/
│   ├── page.js          → /products
│   └── [id]/
│       └── page.js      → /products/123
├── dashboard/
│   ├── layout.js        → Shared layout for all dashboard pages
│   ├── page.js          → /dashboard
│   ├── settings/
│   │   └── page.js      → /dashboard/settings
│   └── analytics/
│       └── page.js      → /dashboard/analytics
└── layout.js            → Root layout (applies to all pages)

// app/blog/[slug]/page.js
// Matches: /blog/anything-here

export default function BlogPost({ params }) {
    // params.slug = "anything-here"
    return <h1>Post: {params.slug}</h1>;
}

// app/shop/[...categories]/page.js
// Matches: /shop/electronics/phones/iphone
// params.categories = ["electronics", "phones", "iphone"]

// app/api/users/route.js
import { NextResponse } from "next/server";

// GET /api/users
export async function GET(request) {
    const users = await fetchUsersFromDatabase();
    return NextResponse.json({ success: true, data: users });
}

// POST /api/users
export async function POST(request) {
    const body = await request.json();
    const { name, email } = body;

    if (!name || !email) {
        return NextResponse.json(
            { error: "Name and email required" },
            { status: 400 }
        );
    }

    const newUser = await createUser({ name, email });
    return NextResponse.json({ success: true, data: newUser }, { status: 201 });
}

// app/contact/page.js
"use client"; // This component runs in the browser

import { submitContactForm } from "./actions"; // Import server function

export default function ContactPage() {
    return (
        <form action={submitContactForm}> {/* Form submits to server function directly */}
            <input name="name" placeholder="Your name" />
            <input name="email" placeholder="Your email" />
            <textarea name="message" placeholder="Your message" />
            <button type="submit">Send Message</button>
        </form>
    );
}

// app/contact/actions.js
"use server"; // This runs on the server

export async function submitContactForm(formData) {
    const name = formData.get("name");
    const email = formData.get("email");
    const message = formData.get("message");

    // Save to database, send email, etc.
    await saveToDatabase({ name, email, message });
    await sendEmailNotification({ name, email, message });

    // Redirect after success
    redirect("/thank-you");
}

import Image from "next/image";

// Instead of plain <img> tag:
// <img src="/hero.jpg" alt="Hero" /> — No optimization

// Next.js Image component:
export default function Hero() {
    return (
        <Image
            src="/hero.jpg"
            alt="Hero banner"
            width={1200}
            height={600}
            priority           // Load this image eagerly (above the fold)
            placeholder="blur" // Show blurred version while loading
        />
    );
}

// app/layout.js
import { Inter, Roboto } from "next/font/google";

// Next.js downloads the font at build time — no Google Fonts request at runtime
const inter = Inter({
    subsets: ["latin"],
    display: "swap"
});

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

# Install Vercel CLI
npm install -g vercel

# Deploy from your project directory
vercel

# That's it — your app is live in under 2 minutes

// next.config.js

// Default — requires Node.js server
module.exports = {};

// Static export — generates pure HTML/CSS/JS (no Node.js needed)
module.exports = { output: "export" };

// Standalone — minimal Docker image for containers
module.exports = { output: "standalone" };