با Nextjs و NextAuth 5.x با Prisma، Modern Stack بسازید

Summarize this content to 400 words in Persian Lang

مقدمه

این چیزی است که ما با استفاده از این پشته مدرن می سازیم https://github.com/tkssharma/buddy-clone

این پست وبلاگ شما را از طریق ایجاد یک برنامه وب مدرن با استفاده از ترکیب قدرتمند Next.js، NextAuth.js 5.x و Prisma راهنمایی می کند. این ابزارها پایه ای قوی برای ساخت برنامه های کاربردی مقیاس پذیر، کارآمد و ایمن ارائه می دهند.

درک پشته

Next.js: یک چارچوب React برای ساخت برنامه های وب رندر شده یا ایستا تولید شده توسط سرور.

NextAuth.js: کتابخانه ای برای افزودن احراز هویت به برنامه های Next.js، پشتیبانی از ارائه دهندگان مختلف مانند Google، Facebook، GitHub و غیره.

پریسما: یک ORM مدرن (نقشه‌نگار شی-رابطه‌ای) که تعاملات پایگاه داده را ساده می‌کند.

راه اندازی پروژه

ایجاد یک پروژه Next.js جدید:

npx create-next-app my-nextjs-app

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نصب Dependencies:

cd my-nextjs-app
npm install next-auth @prisma/client

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

NextAuth.js را پیکربندی کنید:
ایجاد یک pages/api/auth/[…nextauth].js فایل و کد زیر را اضافه کنید:

import NextAuth from ‘next-auth’;
import Providers from ‘next-auth/providers’;

export default NextAuth({
providers: [
Providers.Google({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
// Add other providers as needed
],
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

راه اندازی Prisma:
ایجاد یک prisma/schema.prisma فایل و مدل داده خود را تعریف کنید:

model User {
id Int @id @default(autoincrement())
name String
email String @unique
password String?
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اجرا کنید npx prisma generate برای تولید فایل های مشتری Prisma.

ادغام NextAuth.js و Prisma

ایجاد یک سرویس کاربری:
ایجاد یک services/userService.js با استفاده از Prisma توابع مربوط به کاربر را فایل و پیاده سازی کنید:

import { PrismaClient } from ‘@prisma/client’;

const prisma = new PrismaClient();

export async function createUser(data) {
const user = await prisma.user.create({ data });
return user;
}

// Implement other functions like getUserByEmail, updateUser, etc.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

از تماس های NextAuth.js استفاده کنید:
در pages/api/auth/[…nextauth].js، برای رسیدگی به ثبت نام کاربر، ورود به سیستم و سایر اقدامات مرتبط با احراز هویت، تماس های برگشتی را پیاده سازی کنید:

callbacks: {
async session(session, user) {
// Update session with additional data from the database
const sessionUser = await prisma.user.findUnique({ where: { email: user.email } });
session.user.id = sessionUser.id;
return session;
},
async signIn(user, account, profile) {
// Handle sign-in logic, e.g., create a new user if needed
return true;
},
},

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ساخت اپلیکیشن شما

ایجاد صفحات:
از سیستم مسیریابی Next.js برای ایجاد صفحات برای بخش های مختلف برنامه خود مانند خانه، ورود به سیستم، ثبت نام و نمایه استفاده کنید.

از Context API استفاده کنید:
زمینه را برای مدیریت وضعیت احراز هویت کاربر در سراسر برنامه خود پیاده کنید.

واکشی داده ها:
استفاده کنید getStaticProps یا getServerSideProps برای واکشی داده ها از پایگاه داده خود و ارسال آن به اجزای خود.

برای کسب اطلاعات بیشتر در این پشته به لیست پخش نگاه کنید

نتیجه گیری

با ترکیب Next.js، NextAuth.js و Prisma می‌توانید برنامه‌های وب مدرن، مقیاس‌پذیر و امن بسازید. این پشته قدرتمند یک پایه محکم برای ساخت پروژه بعدی شما فراهم می کند.

   npx create-next-app my-nextjs-app

   cd my-nextjs-app
   npm install next-auth @prisma/client

   import NextAuth from 'next-auth';
   import Providers from 'next-auth/providers';

   export default NextAuth({
     providers: [
       Providers.Google({
         clientId: process.env.GOOGLE_CLIENT_ID,
         clientSecret: process.env.GOOGLE_CLIENT_SECRET,
       }),
       // Add other providers as needed
     ],
   });

   model User {
     id        Int      @id @default(autoincrement())
     name      String
     email     String   @unique
     password  String?
   }

   import { PrismaClient } from '@prisma/client';

   const prisma = new PrismaClient();

   export async function createUser(data) {
     const user = await prisma.user.create({ data });
     return user;
   }

   // Implement other functions like getUserByEmail, updateUser, etc.

   callbacks: {
     async session(session, user) {
       // Update session with additional data from the database
       const sessionUser = await prisma.user.findUnique({ where: { email: user.email } });
       session.user.id = sessionUser.id;
       return session;
     },
     async signIn(user, account, profile) {
       // Handle sign-in logic, e.g., create a new user if needed
       return true;
     },
   },