🌐 Detecting your location…
📢 Advertisement — Configure AdSense in Appearance → Customize → AdSense Settings

কিভাবে 2026 সালে Next.js 15 এবং PostgreSQL দিয়ে একটি ফুল-স্ট্যাক অ্যাপ তৈরি করবেন

⏱️3 min read  ·  608 words



How to Build a Full-Stack App with Next.js 15 and PostgreSQL in 2026

TechPulse সম্পাদকীয় দল
প্রযুক্তি লেখক · মে ২৮, ২০২৬
📅 ২৮ মে, ২০২৬⏱ 16 মিনিট পড়া📂 কিভাবে করতে হবে🏷 nextjs · postgresql · fullstack · প্রতিক্রিয়া

আমরা কি নির্মাণ করছি

একটি ফুল-স্ট্যাক টাস্ক ম্যানেজমেন্ট অ্যাপ: Next.js 15 অ্যাপ রাউটার, PostgreSQL এর মাধ্যমে নিয়ন (সার্ভারবিহীন), প্রিজমা ওআরএম, সার্ভার অ্যাকশন (মিউটেশনের জন্য আলাদা API রুট নেই), Auth.js v5 GitHub OAuth, Vercel এ স্থাপন করা হয়েছে।

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

npx create-next-app@latest taskapp \
  --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd taskapp
Next.js 15 কী পরিবর্তন:স্থিতিশীল Turbopack (5× দ্রুত বিল্ড), প্রতিক্রিয়া 19 প্রয়োজন, ডিফল্টরূপে অ্যাসিঙ্ক অনুরোধ API, ডিফল্টরূপে ক্যাশে করা হয় না, উন্নত সার্ভার অ্যাকশন।

ডেটাবেস: নিয়ন + প্রিজমার সাথে PostgreSQL

একটি বিনামূল্যের ডাটাবেস তৈরি করুনneon.tech. তারপর:

npm install prisma @prisma/client
npx prisma init

ইন.env.local:

DATABASE_URL="postgresql://user:pass@ep-xxx.us-east-2.aws.neon.tech/neondb?sslmode=require"
NEXTAUTH_SECRET="your-random-secret-here"
GITHUB_CLIENT_ID="your-github-oauth-app-id"
GITHUB_CLIENT_SECRET="your-github-oauth-app-secret"

ডেটা মডেল

// prisma/schema.prisma
model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
  tasks     Task[]
}

model Task {
  id        String     @id @default(cuid())
  title     String
  status    TaskStatus @default(PENDING)
  priority  Priority   @default(MEDIUM)
  userId    String
  user      User       @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt DateTime   @default(now())
  updatedAt DateTime   @updatedAt

  @@index([userId])
}

enum TaskStatus { PENDING IN_PROGRESS COMPLETED CANCELLED }
enum Priority  { LOW MEDIUM HIGH URGENT }

npx prisma migrate dev --name init
npx prisma generate

// src/lib/db.ts
import { PrismaClient } from '@prisma/client';
const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
export const db = globalForPrisma.prisma ?? new PrismaClient();
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db;

সার্ভার উপাদান এবং ডেটা আনা

অ্যাপ রাউটার উপাদানগুলি ডিফল্টরূপে সার্ভার উপাদান – এগুলি সার্ভারে চলে এবং সরাসরি ডাটাবেস অনুসন্ধান করতে পারে:

// src/app/dashboard/page.tsx (Server Component)
import { db } from '@/lib/db';
import { auth } from '@/lib/auth';
import { redirect } from 'next/navigation';

export default async function DashboardPage() {
  const session = await auth();
  if (!session?.user) redirect('/');

  const tasks = await db.task.findMany({
    where: { userId: session.user.id, status: { not: 'CANCELLED' } },
    orderBy: [{ priority: 'desc' }, { createdAt: 'desc' }],
    take: 50,
  });

  return (
    <main className="container mx-auto p-6">
      <h1>My Tasks</h1>
      {tasks.map(task => <TaskCard key={task.id} task={task} />)}
    </main>
  );
}

কোন API রুট প্রয়োজন. কোন ইউজ ইফেক্ট নেই। কোনো লোডিং স্টেট বয়লারপ্লেট নেই। কম্পোনেন্ট আনয়ন করে এবং এক শটে রেন্ডার করে।

মিউটেশনের জন্য সার্ভার অ্যাকশন

সার্ভার অ্যাকশনগুলি ফর্ম জমা এবং মিউটেশনের জন্য API রুটগুলি প্রতিস্থাপন করে: ||||৷ 📋 কপি

// src/actions/tasks.ts
'use server';
import { db } from '@/lib/db';
import { auth } from '@/lib/auth';
import { revalidatePath } from 'next/cache';
import { z } from 'zod';

const Schema = z.object({
  title:    z.string().min(1).max(200),
  priority: z.enum(['LOW','MEDIUM','HIGH','URGENT']).default('MEDIUM'),
});

export async function createTask(formData: FormData) {
  const session = await auth();
  if (!session?.user?.id) throw new Error('Unauthorized');

  const parsed = Schema.safeParse({
    title:    formData.get('title'),
    priority: formData.get('priority') || 'MEDIUM',
  });
  if (!parsed.success) return { error: parsed.error.flatten().fieldErrors };

  await db.task.create({ data: { ...parsed.data, userId: session.user.id } });
  revalidatePath('/dashboard');
  return { success: true };
}

Auth.js v5revalidatePathদিয়ে প্রমাণীকরণ 📋 কপি

📋 কপি

npm install next-auth@beta @auth/prisma-adapter

// src/lib/auth.ts
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
import { PrismaAdapter } from '@auth/prisma-adapter';
import { db } from './db';

export const { auth, handlers, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(db),
  providers: [GitHub({ clientId: process.env.GITHUB_CLIENT_ID!, clientSecret: process.env.GITHUB_CLIENT_SECRET! })],
  session: { strategy: 'database' },
  callbacks: { session: ({ session, user }) => ({ ...session, user: { ...session.user, id: user.id } }) }
});

.src/app/api/auth/[...nextauth]/route.tsVercel এ স্থাপন করা হচ্ছেhandlers as GET, handlers as POST📋 কপি

স্থাপনের পরে: GitHub OAuth কলব্যাক URLকে ||||তে আপডেট করুন৷ , তারপর দৌড়াও

# Install Vercel CLI and deploy
npm install -g vercel
vercel

# Set environment variables
vercel env add DATABASE_URL
vercel env add NEXTAUTH_SECRET
vercel env add GITHUB_CLIENT_ID
vercel env add GITHUB_CLIENT_SECRET

vercel --prod

উৎপাদন চেকলিস্টhttps://your-app.vercel.app/api/auth/callback/githubহার সীমিতnpx prisma migrate deploy— সার্ভার অ্যাকশন এবং API রুটে Upstash Ratelimit

ত্রুটি সীমানা

  • — যোগ করুনসুন্দর ফলব্যাকগুলির জন্য ফাইলগুলি
  • লোড হচ্ছে অবস্থা— যোগ করুনerror.tsxসাসপেন্স কঙ্কালের জন্য
  • ইনপুট বৈধতা— সার্ভার অ্যাকশনে সর্বদা Zod ব্যবহার করুনloading.tsxসংযোগ পুলিং
  • — যোগ করুননিয়ন ইউআরএলে
  • নিরাপত্তা শিরোনাম— এর মাধ্যমে যোগ করুন?pgbouncer=true&connection_limit=1হেডার()
  • 🔧 জাহাজের জন্য প্রস্তুত?Next.js 15 + PostgreSQL হল 2026 সালে প্রভাবশালী ফুল-স্ট্যাক স্ট্যাক। এক্সপ্লোর করুনnext.config.tsকেন TypeScript অপরিহার্য

বৃহত্তর Next.js অ্যাপস এবং মাস্টারের জন্য

async/ওয়েট প্যাটার্নসার্ভার উপাদান এবং কর্মের জন্য.প্রায়শই জিজ্ঞাসিত প্রশ্নNext.js 15 কি?সর্বশেষ Next.js: স্থিতিশীল Turbopack (5× দ্রুত), প্রতিক্রিয়া 19 প্রয়োজন, অ্যাসিঙ্ক অনুরোধ API, উন্নত সার্ভার অ্যাকশন। অ্যাপ রাউটার এগিয়ে যাওয়া মান।

অ্যাপ রাউটার নাকি পেজ রাউটার 2026 সালে?

সমস্ত নতুন প্রকল্পের জন্য অ্যাপ রাউটার। পেজ রাউটার কাজ করে কিন্তু কোন নতুন বৈশিষ্ট্য পায় না।

Next.js এর সাথে কোন ডাটাবেস ব্যবহার করবেন?

পোস্টগ্রেএসকিউএল নিয়ন (সার্ভারহীন) + প্রিজমা বা ড্রিজেল ওআরএম এর মাধ্যমে। সুপাবেস যদি আপনার বিল্ট-ইন অথ এবং রিয়েল-টাইম প্রয়োজন হয়।

সার্ভার কর্ম কি?

অ্যাসিঙ্ক সার্ভার ফাংশন (‘ব্যবহার সার্ভার’ চিহ্নিত) প্রতিক্রিয়া থেকে কল করা হয়েছে। মিউটেশনের জন্য API রুট প্রতিস্থাপন করুন। টাইপ-নিরাপদ, আশাবাদী আপডেট সমর্থন করে।

কিভাবে স্থাপন করবেন?

Vercel (শূন্য কনফিগার, Next.js দল দ্বারা তৈরি)। স্ব-হোস্ট: পরবর্তী বিল্ড + nginx বা ডকারের পিছনে পরবর্তী শুরু।

Async server functions (marked ‘use server’) called from React. Replace API routes for mutations. Type-safe, support optimistic updates.

How to deploy?

Vercel (zero config, made by Next.js team). Self-host: next build + next start behind nginx, or Docker.

✍️ Leave a Comment

Your email address will not be published. Required fields are marked *

🌐 Read in:🇬🇧 English🇩🇪 Deutsch🇧🇷 Português🇸🇦 العربية🇮🇳 हिन्दी🇧🇩 বাংলা