boychawin.com

How to install Prisma in Next.js 14

การติดตั้งและ setup โปรเจกต์ Next.js เพื่อใช้งานกับ Prisma อาจมีขั้นตอนหลายอย่างที่ต้องทำเพื่อให้โปรเจกต์สามารถเชื่อมต่อกับฐานข้อมูลและใช้ Prisma ได้อย่างถูกต้อง

Boy Chawin
Boy Chawin

Dec 7, 2023

สำหรับการติดตั้ง Prisma ในโปรเจกต์ Next.js 14 คุณสามารถทำตามขั้นตอนเหล่านี้ได้ครับ

1. สร้างโปรเจกต์ Next.js

หากยังไม่ได้สร้างโปรเจกต์ Next.js ให้ใช้คำสั่งต่อไปนี้ หรือคลิกที่นี่เพื่อดูขั้นตอนการติดตั้ง

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app

2. ติดตั้ง Prisma

คุณสามารถติดตั้ง Prisma ผ่าน npm หรือ yarn ได้ เช่น

npm install @prisma/client prisma

3. กำหนดค่า Prisma

รันคำสั่งต่อไปนี้ในโปรเจกต์เพื่อกำหนดค่า Prisma

npx prisma init

คำสั่งนี้จะตั้งค่าไฟล์และโฟลเดอร์ที่จำเป็นสำหรับการกำหนดค่า Prisma

ข้อมูลเพิ่มเติม คำสั่ง npx prisma init จะสร้างไฟล์ schema.prisma สำหรับการกำหนดการเชื่อมต่อฐานข้อมูลและโมเดลข้อมูลของคุณในโปรเจกต์ Prisma ซึ่งมีขั้นตอนต่อไปที่คุณต้องทำ:

  1. กำหนดค่าการเชื่อมต่อฐานข้อมูล:

    • ในไฟล์ .env ที่ถูกสร้างขึ้น (หากยังไม่มีให้สร้างไฟล์ .env ขึ้นมา), กำหนดค่า DATABASE_URL เพื่อชี้ไปยังฐานข้อมูลที่คุณใช้
    • เปิดไฟล์ .gitignore และเพิ่ม .env เข้าไปในรายการเพื่อป้องกันการ commit ข้อมูลส่วนตัว
  2. กำหนด provider ของ datasource block ใน schema.prisma:

    • เลือก provider ที่ใช้กับฐานข้อมูลของคุณ เช่น postgresql, mysql, sqlite, sqlserver, mongodb หรือ cockroachdb และให้กำหนดในส่วนของ datasource ในไฟล์ schema.prisma

4. กำหนด Prisma schema

ในโฟลเดอร์ prisma (ที่ถูกสร้างโดย prisma init) สร้างไฟล์ชื่อ schema.prisma และกำหนดโครงสร้างฐานข้อมูลของคุณ

เดียวมารู้จักคำสั่ง npx prisma db pull และ npx prisma db push เป็นคำสั่งใน Prisma CLI ที่ใช้ในการจัดการกับฐานข้อมูล:

  • npx prisma db pull เป็นคำสั่งที่ใช้ดึง (pull) โครงสร้างข้อมูล (schema) จากฐานข้อมูลและนำมาใช้ใน Prisma schema ของโปรเจกต์ ซึ่งช่วยในการสร้างโครงสร้างข้อมูลใน Prisma ให้ตรงกับฐานข้อมูลที่มีอยู่แล้ว เป็นการสร้างหรืออัปเดต Prisma schema จากฐานข้อมูลที่มีอยู่

  • npx prisma db push เป็นคำสั่งที่ใช้ส่ง (push) โครงสร้างข้อมูลจาก Prisma schema ลงในฐานข้อมูล ซึ่งช่วยในการสร้างหรืออัปเดตโครงสร้างข้อมูลในฐานข้อมูลตามที่กำหนดใน Prisma schema

    ตัวอย่าง model

// กำหนดโมเดลข้อมูลของคุณที่นี่
model User {
  id       Int        @id @default(autoincrement())
  email    String     @unique
  name     String?
  username String
  password String
  role     User_role? @default(USER)
}

enum User_role {
  USER
  ADMIN
  STAFF
}

5. สร้าง Prisma Client

รันคำสั่งต่อไปนี้เพื่อสร้าง Prisma Client จาก schema ของคุณ

npx prisma generate

ใช้คำสั่ง npx prisma generate เพื่อสร้าง Prisma Client ซึ่งเป็นเครื่องมือสำหรับเข้าถึงฐานข้อมูล

6. เริ่มใช้ Prisma ในโปรเจกต์ Next.js

คุณสามารถ import และใช้ Prisma Client ในหน้า Next.js หรือ API routes ได้ดังนี้

// src/app/page.tsx (หรือไฟล์อื่นๆ ที่ต้องการใช้ Prisma)
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default function Home() {
  // ตัวอย่าง: การดึงข้อมูลผู้ใช้
  const fetchUsers = async () => {
    const users = await prisma.user.findMany();
    console.log(users);
  };

  fetchUsers();

  return (
    <div>
      {/* เนื้อหา Next.js ของคุณ */}
    </div>
  );
}

ระวังให้แน่ใจว่าคุณ import PrismaClient จาก @prisma/client และสร้าง instance เพื่อใช้ Prisma Client เพื่อเริ่มต้นการ query ฐานข้อมูลของคุณ

อย่าลืมจัดการการเชื่อมต่อฐานข้อมูล การจัดการข้อผิดพลาด และการใช้งานเมธอดของ Prisma ตามที่คุณต้องการในโปรเจกต์ของคุณ

หวังว่าขั้นตอนเล่านี้จะช่วยให้คุณเริ่มต้นการใช้ Prisma ในโปรเจกต์ Next.js ของคุณได้นะครับ


Free gift

// package.json เพิ่ม scripts ที่ต้องใช้งานประจำ นี้เพื่อง่ายต่อการเรียกใช้งาน
"scripts": {
    "dev": "prisma generate && next dev",
    "build": "prisma generate && prisma db push && next build",
    "prisma:generate": "prisma generate",
    "prisma:studio": "prisma studio",
    "prisma:push": "prisma db push"
  },

และ

// utils/prisma.ts

// Import PrismaClient from @prisma/client
import { PrismaClient } from "@prisma/client";
// Import "server-only" (assuming this is a placeholder for something specific to your setup)
import "server-only";

// Create a global variable to store PrismaClient instance
const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

// Initialize PrismaClient instance or use an existing one if it exists
export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({
    log:
      process.env.NODE_ENV === "development"
        ? ["query", "error", "warn"]
        : ["error"],
  });

// If not in production, assign the PrismaClient instance to the global variable
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

// Check for connection errors during initialization
prisma.$connect()
  .catch((error:any) => {
    console.error(error);
    return;
  });

// Export the initialized PrismaClient instance
export default prisma;

โดยมีขั้นตอนดังนี้:

  1. การสร้าง PrismaClient Instance:

    • โค้ดเริ่มต้นด้วยการ import PrismaClient จาก @prisma/client
    • มีการสร้างตัวแปร globalForPrisma ที่ใช้เก็บ PrismaClient instance ในรูปแบบ global scope ซึ่งจะช่วยในการเข้าถึง PrismaClient จากทุกที่ในโปรเจกต์
  2. การกำหนด PrismaClient:

    • สร้าง PrismaClient instance ในรูปแบบ prisma ถ้ายังไม่มี instance ใดๆ อยู่
    • การกำหนดค่า log ของ PrismaClient เพื่อบันทึก query, error, warn ในโหมด development และบันทึก error เท่านั้นในโหมด production
  3. การเชื่อมต่อกับฐานข้อมูล:

    • เรียกใช้ prisma.$connect() เพื่อเชื่อมต่อกับฐานข้อมูล
    • หากมีข้อผิดพลาดในการเชื่อมต่อ (เช่น เซิร์ฟเวอร์ไม่สามารถเชื่อมต่อได้) จะทำการแสดงข้อผิดพลาดใน console และจะทำการ return เพื่อหยุดการทำงานต่อ
  4. การ Export PrismaClient:

    • ทำการ export PrismaClient instance ที่ถูกสร้างขึ้นเพื่อให้สามารถนำไปใช้ในส่วนอื่นของโปรเจกต์ได้

โค้ดดังกล่าวช่วยในการเชื่อมต่อกับฐานข้อมูลโดยใช้ Prisma และสร้าง instance ของ PrismaClient ซึ่งสามารถนำไปใช้ในโปรเจกต์ Next.js หรือโครงสร้างข้อมูลอื่นๆ ได้ตามต้องการครับ!

ระบบจองห้อง/โต๊ะ PHP & MySQLi

ระบบจองห้อง, ระบบจัดการทรัพยากรสารสนเทศ

ระบบจองห้อง/โต๊ะ PHP & MySQLi

Nov 22, 2023

Web ระบบเบิก-จ่ายวัสดุ

ระบบเบิก-จ่ายวัสดุ อุปกรณ์และเครื่องเขียนสำนักงาน API PHP/MySQL

Web ระบบเบิก-จ่ายวัสดุ

Dec 5, 2023

How to install LINE (LIFF) ร่วมกับ React

การใช้ LINE Front-end Framework (LIFF) ร่วมกับ React และ TypeScript สำหรับการรับรองตัวตนและการเข้าถึงข้อมูล

How to install LINE (LIFF) ร่วมกับ React

Dec 6, 2023

เข้าสู่ระบบด้วย Credentials Provider In NextAuth.js Prisma EP.3

เข้าสู่ระบบโดยใช้ชื่อผู้ใช้และรหัสผ่าน ได้ง่ายๆ ด้วย provider credentials.

เข้าสู่ระบบด้วย Credentials Provider In NextAuth.js Prisma EP.3

Dec 6, 2023

How to install Next.js 14 แบบมีรายละเอียด

พา setup โปรเจกต์ Next.js 14 เบื้องต้น

How to install Next.js 14  แบบมีรายละเอียด

Dec 7, 2023

[Free] Next.js Admin Dashboard Template with Tailwind CSS

Tailwind CSS-Powered Next.js Admin Dashboard Template

[Free] Next.js Admin Dashboard Template with Tailwind CSS

Dec 11, 2023

How to use CRUD with Prisma in Next.js

การใช้งาน CRUD (Create, Read, Update, Delete) กับ Prisma ใน Next.js

How to use CRUD with Prisma in Next.js

Dec 12, 2023

How to Install and using MAMP

ขั้นตอนในการติดตั้งและใช้งาน MAMP (Mac,Windows, Apache, MySQL, PHP)

How to Install and using MAMP

Dec 12, 2023

ระบบร้านอาหาร RESTFul API in Golang

Restaurant System API

ระบบร้านอาหาร  RESTFul API in Golang

Dec 18, 2023

สร้างตารางข้อมูล Excel โดย PhpSpreadsheet ด้วย PHP

สร้างตารางข้อมูลใน Excel โดยใช้ไลบรารี PhpSpreadsheet ซึ่งเป็นไลบรารีสำหรับจัดการไฟล์ Excel ด้วย PHP

สร้างตารางข้อมูล Excel โดย PhpSpreadsheet ด้วย PHP

Dec 21, 2023