Next.js 15 संपूर्ण गाइड 2026: ऐप राउटर, सर्वर घटक और पीपीआर

⏱️4 min read · 816 words

Next.js 15 रिएक्ट के फुल-स्टैक भविष्य को मजबूत करता है। ऐप राउटर स्टेबल, डिफॉल्ट के रूप में रिएक्ट सर्वर कंपोनेंट्स और वेबपैक की जगह टर्बोपैक के साथ, 2026 में नेक्स्ट.जेएस ऐप्स का उत्पादन पहले से कहीं अधिक तेज और शक्तिशाली है।

📋 Table of Contents

Next.js 15 में नया क्या है?
प्रोजेक्ट सेटअप
ऐप राउटर की बुनियादी बातें
सर्वर घटक बनाम क्लाइंट घटक
सर्वर घटकों के साथ डेटा प्राप्त करना
सर्वर क्रियाएँ
रूट हैंडलर (एपीआई रूट)
आंशिक प्रीरेंडरिंग (पीपीआर)
मिडलवेयर
छवि अनुकूलन
परिनियोजन और उत्पादन

Next.js 15 में नया क्या है?

टर्बोपैक स्थिर– 10 गुना तेज बिल्ड, 700 गुना तेज एचएमआर बनाम वेबपैक
रिएक्ट 19 प्रथम श्रेणी समर्थन– सर्वर घटक, क्रियाएँ, उपयोग() हुक
आंशिक प्रीरेंडरिंग (पीपीआर)– एक ही पृष्ठ पर स्थिर शेल + गतिशील द्वीप
बेहतर कैशिंग– अब कोई आश्चर्यजनक कैश-बाय-डिफ़ॉल्ट व्यवहार नहीं
गतिशील एपीआई– कुकीज़(), हेडर(), searchParams अब async हैं

प्रोजेक्ट सेटअप

# Create new Next.js 15 project
npx create-next-app@latest my-app --typescript --tailwind --app --turbopack

cd my-app

# Project structure
# app/
#   layout.tsx          — root layout
#   page.tsx            — home page
#   globals.css
#   (dashboard)/        — route group (no URL segment)
#     page.tsx
#   blog/
#     [slug]/
#       page.tsx        — dynamic route
#   api/
#     users/
#       route.ts        — API route handler

ऐप राउटर की बुनियादी बातें

// app/layout.tsx — Root Layout (required)
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: { template: "%s | My App", default: "My App" },
  description: "Built with Next.js 15",
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://myapp.com",
    siteName: "My App",
  },
};

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

सर्वर घटक बनाम क्लाइंट घटक

// Server Component (default) — runs on server, no JavaScript sent to client
// app/blog/page.tsx
async function BlogPage() {
  // Direct database/API access — no useEffect needed
  const posts = await db.query("SELECT * FROM posts ORDER BY created_at DESC");

  return (
    <main>
      <h1>Blog</h1>
      {posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
        </article>
      ))}
    </main>
  );
}

// Client Component — add "use client" directive
"use client";
import { useState } from "react";

function SearchBar({ onSearch }: { onSearch: (q: string) => void }) {
  const [query, setQuery] = useState("");

  return (
    <input
      value={query}
      onChange={e => setQuery(e.target.value)}
      onKeyDown={e => e.key === "Enter" && onSearch(query)}
      placeholder="Search..."
    />
  );
}

सर्वर घटकों के साथ डेटा प्राप्त करना

// Parallel data fetching — no waterfalls
async function Dashboard() {
  // These run in parallel
  const [user, posts, stats] = await Promise.all([
    fetchUser(),
    fetchPosts(),
    fetchStats(),
  ]);

  return (
    <div>
      <UserCard user={user} />
      <PostList posts={posts} />
      <StatsPanel stats={stats} />
    </div>
  );
}

// Dynamic rendering with searchParams (Next.js 15: async)
export default async function SearchPage({
  searchParams,
}: {
  searchParams: Promise<{ q?: string; page?: string }>;
}) {
  const { q = "", page = "1" } = await searchParams;
  const results = await searchPosts(q, parseInt(page));

  return <SearchResults results={results} query={q} />;
}

सर्वर क्रियाएँ

सर्वर क्रियाएँ आपको प्रपत्रों और ईवेंट हैंडलर से सर्वर कोड चलाने देती हैं:

// app/actions.ts
"use server";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  const content = formData.get("content") as string;

  // Validate
  if (!title || title.length < 3) {
    return { error: "Title must be at least 3 characters" };
  }

  // Save to database
  await db.posts.create({ title, content });

  // Revalidate and redirect
  revalidatePath("/blog");
  redirect("/blog");
}

// Use in a form
export default function NewPostForm() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="Title" required />
      <textarea name="content" placeholder="Content" />
      <button type="submit">Publish</button>
    </form>
  );
}

रूट हैंडलर (एपीआई रूट)

// app/api/users/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  const { searchParams } = request.nextUrl;
  const page = parseInt(searchParams.get("page") ?? "1");

  const users = await db.users.findMany({
    skip: (page - 1) * 10,
    take: 10,
  });

  return NextResponse.json({ users, page });
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return NextResponse.json(user, { status: 201 });
}

// app/api/users/[id]/route.ts
export async function DELETE(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  await db.users.delete({ where: { id } });
  return new NextResponse(null, { status: 204 });
}

आंशिक प्रीरेंडरिंग (पीपीआर)

पीपीआर आपको स्थिर और गतिशील सामग्री को एक ही पृष्ठ पर संयोजित करने की सुविधा देता है:

// next.config.ts
import type { NextConfig } from "next";

const config: NextConfig = {
  experimental: {
    ppr: true,
  },
};

export default config;

// page.tsx — static shell + dynamic island
import { Suspense } from "react";

export default function ProductPage({ params }: { params: { id: string } }) {
  return (
    <div>
      {/* Static — generated at build time */}
      <ProductDetails id={params.id} />

      {/* Dynamic — rendered per request */}
      <Suspense fallback={<PriceSkeleton />}>
        <DynamicPrice id={params.id} />
      </Suspense>

      <Suspense fallback={<ReviewsSkeleton />}>
        <UserReviews id={params.id} />
      </Suspense>
    </div>
  );
}

मिडलवेयर

// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const token = request.cookies.get("auth-token")?.value;
  const isProtected = request.nextUrl.pathname.startsWith("/dashboard");

  if (isProtected && !token) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  // Add security headers
  const response = NextResponse.next();
  response.headers.set("X-Frame-Options", "DENY");
  response.headers.set("X-Content-Type-Options", "nosniff");

  return response;
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

छवि अनुकूलन

import Image from "next/image";

// Optimized image — auto WebP/AVIF, lazy loading, size hints
export function HeroImage({ src, alt }: { src: string; alt: string }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={1200}
      height={630}
      priority // LCP image — eager load
      quality={85}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,/9j..." // low-quality placeholder
    />
  );
}

// Fill container
<div style={{ position: "relative", aspectRatio: "16/9" }}>
  <Image src="/hero.jpg" alt="Hero" fill sizes="100vw" />
</div>

परिनियोजन और उत्पादन

वर्सेल– शून्य-कॉन्फ़िगरेशन, एज नेटवर्क, स्वचालित पीपीआर
स्व की मेजबानी की — next build && next startNode.js के साथ
डाक में काम करनेवाला मज़दूर– स्टैंडअलोन आउटपुट के साथ आधिकारिक Next.js Dockerfile

नेक्स्ट.जेएस 15 2026 के लिए सबसे पूर्ण रिएक्ट फ्रेमवर्क है। सर्वर घटक ओवर-फ़ेचिंग को समाप्त करते हैं, सर्वर क्रियाएँ उत्परिवर्तन को सरल बनाती हैं, और पीपीआर एक ही पृष्ठ पर सर्वोत्तम स्थिर और गतिशील प्रतिपादन प्रदान करता है।

🔗 Share this article

X / Twitter Facebook WhatsApp LinkedIn Telegram