Next.js 15 সম্পূর্ণ গাইড 2026: অ্যাপ রাউটার, সার্ভার উপাদান এবং PPR

⏱️4 min read · 821 words

Next.js 15 রিঅ্যাক্টের ফুল-স্ট্যাক ভবিষ্যতকে দৃঢ় করে। অ্যাপ রাউটার স্থিতিশীল, রিঅ্যাক্ট সার্ভার উপাদানগুলি ডিফল্ট হিসাবে এবং Turbopack ওয়েবপ্যাক প্রতিস্থাপন করে, 2026 সালে Next.js অ্যাপ তৈরি করা আগের চেয়ে দ্রুত এবং আরও শক্তিশালী।

📋 Table of Contents

Next.js 15-এ নতুন কী আছে
প্রকল্প সেটআপ
অ্যাপ রাউটারের মৌলিক বিষয়
সার্ভার উপাদান বনাম ক্লায়েন্ট উপাদান
সার্ভার উপাদানের সাথে ডেটা আনা
সার্ভার অ্যাকশন
রুট হ্যান্ডলার (API রুট)
আংশিক প্রিরেন্ডারিং (পিপিআর)
মিডলওয়্যার
ইমেজ অপ্টিমাইজেশান
স্থাপনা এবং উৎপাদন

Next.js 15-এ নতুন কী আছে

টার্বোপ্যাক স্থিতিশীল— 10x দ্রুত বিল্ড, 700x দ্রুত HMR বনাম ওয়েবপ্যাক
প্রতিক্রিয়া 19 প্রথম শ্রেণীর সমর্থন— সার্ভার উপাদান, কর্ম, ব্যবহার() হুক
আংশিক প্রিরেন্ডারিং (পিপিআর)— একই পৃষ্ঠায় স্ট্যাটিক শেল + গতিশীল দ্বীপ
উন্নত ক্যাশিং— আর কোন আশ্চর্যজনক ক্যাশে-বাই-ডিফল্ট আচরণ নেই
ডাইনামিক API— কুকিজ(), হেডার(), সার্চপ্যারাম এখন অ্যাসিঙ্ক

প্রকল্প সেটআপ

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

রুট হ্যান্ডলার (API রুট)

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

আংশিক প্রিরেন্ডারিং (পিপিআর)

PPR আপনাকে একটি একক পৃষ্ঠায় স্থির এবং গতিশীল বিষয়বস্তু একত্রিত করতে দেয়:

// 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 ডকারফাইল

Next.js 15 হল 2026-এর জন্য সবচেয়ে সম্পূর্ণ রিঅ্যাক্ট ফ্রেমওয়ার্ক। সার্ভার কম্পোনেন্ট ওভার-ফেচিং দূর করে, সার্ভার অ্যাকশন মিউটেশনকে সহজ করে, এবং PPR একই পৃষ্ঠায় সেরা স্ট্যাটিক এবং ডাইনামিক রেন্ডারিং প্রদান করে।

🔗 Share this article

X / Twitter Facebook WhatsApp LinkedIn Telegram