📋 Table of Contents
আমরা কি নির্মাণ করছি
একটি ফুল-স্ট্যাক টাস্ক ম্যানেজমেন্ট অ্যাপ: 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
ডেটাবেস: নিয়ন + প্রিজমার সাথে 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.
🔗 Share this article
✍️ Leave a Comment