การตั้งค่า Prisma ORM
กำหนดค่าและผสาน Prisma ORM เข้ากับโครงการ Next.js เพื่อโต้ตอบกับฐานข้อมูลหลากหลายประเภท
การตั้งค่า Prisma ORM เป็นบทเรียน Next.js 15 Fullstack (App Router + Server Actions) ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Next.js 15 Fullstack (App Router + Server Actions) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Next.js 15 Fullstack (App Router + Server Actions) มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
What is an ORM?
Welcome! In this lesson, we'll set up Prisma ORM in a Next.js project. But first, what's an ORM?
- ORM stands for Object-Relational Mapping.
- It's a technique that lets you interact with your database using your programming language's objects instead of writing raw SQL.
- Think of it as a translator between your code (e.g., JavaScript objects) and your database (e.g., SQL tables).
Why Choose Prisma?
Prisma is a modern ORM that's popular with Next.js for good reasons:
- Type Safety: It generates a type-safe client, preventing many runtime errors.
- Developer Experience: Intuitive API, powerful migrations, and automatic code completion.
- Modern Stack: Designed for TypeScript and modern JavaScript, fitting perfectly with Next.js.
- Database Support: Works with PostgreSQL, MySQL, SQLite, SQL Server, and MongoDB.
Installing Prisma
Let's start by adding Prisma to your Next.js project. You'll need two main packages:
prisma: The Prisma CLI (Command Line Interface) for development tasks.@prisma/client: The Prisma Client library for interacting with your database in code.
Run this command in your project's root:
npm install prisma @prisma/clientInitialize Prisma
After installation, you need to initialize Prisma in your project. This command sets up the basic Prisma structure, including the prisma/schema.prisma file.
It also creates a .env file to hold your database connection string.
npx prisma initConnect Your Database
The .env file created by prisma init contains a DATABASE_URL variable. This is where you tell Prisma how to connect to your database.
For local development, SQLite is often used for simplicity. For production, you might use PostgreSQL or MySQL.
# .env
DATABASE_URL="postgresql://user:password@host:port/database?schema=public"
# Example for SQLite (local file)
# DATABASE_URL="file:./dev.db"The Prisma Schema File
Your prisma/schema.prisma file is the heart of your Prisma setup. It defines three key blocks:
datasource: Specifies your database provider (e.g.,postgresql,sqlite).generator: Configures the Prisma Client (usuallyprisma-client-js).model: Defines your database tables (models) and their fields.
Defining Your First Model
Let's define a simple User model in your prisma/schema.prisma file. This model will represent a table in your database.
id: Unique identifier, auto-incrementing.email: User's email, must be unique.name: User's name, optional.
// prisma/schema.prisma
model User {
id Int @id @default(autoincrement())
email String @unique
name String?
}Generating Prisma Client
After defining or changing your models in schema.prisma, you must generate the Prisma Client. This command reads your schema and creates the type-safe client library.
This client is what you'll import and use in your Next.js application to interact with your database.
npx prisma generateApplying Migrations
To create or update your database tables based on your schema.prisma, you use migrations. The migrate dev command:
- Compares your schema to the database.
- Generates SQL migration files.
- Applies these migrations to your database.
It also generates the Prisma Client automatically after migration.
npx prisma migrate dev --name initUsing Prisma Client
Once Prisma is set up and generated, you can use the PrismaClient in your Next.js server components or API routes to perform database operations. Here's a basic example:
import { PrismaClient } from '@prisma/client';
async function main() {
const prisma = new PrismaClient();
console.log("Prisma Client successfully initialized!");
// In a real app, you'd perform database operations:
// const users = await prisma.user.findMany();
// console.log(users);
await prisma.$disconnect();
console.log("Prisma Client disconnected.");
}
main().catch(console.error);Quick Check: Prisma Commands
You've learned about several key Prisma CLI commands. Which command is used to generate the type-safe Prisma Client after you've modified your schema.prisma file?
Recap: Setting Up Prisma
Great job! You've learned the essential steps to integrate Prisma ORM into your Next.js project:
- Installed Prisma CLI and client.
- Initialized Prisma and configured your database URL.
- Defined data models in
schema.prisma. - Generated the Prisma Client.
- Applied migrations to sync your schema with the database.
- Understood how to instantiate and use
PrismaClient.
Next, we'll dive into performing CRUD operations with Prisma!
เรียนรู้ TypeScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 22
- บทเรียน
- 88
คำถามที่พบบ่อย
บทเรียน “การตั้งค่า Prisma ORM” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตั้งค่า Prisma ORM” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Next.js 15 Fullstack (App Router + Server Actions) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Next.js 15 Fullstack (App Router + Server Actions) มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า Prisma ORM”
กำหนดค่าและผสาน Prisma ORM เข้ากับโครงการ Next.js เพื่อโต้ตอบกับฐานข้อมูลหลากหลายประเภท คุณปฏิบัติ Next.js 15 Fullstack (App Router + Server Actions) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Next.js 15 Fullstack (App Router + Server Actions) หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Next.js 15 Fullstack (App Router + Server Actions) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การตั้งค่า Prisma ORM” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Next.js 15 Fullstack (App Router + Server Actions) นี้ได้ไหม
ได้ บทเรียน Next.js 15 Fullstack (App Router + Server Actions) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า Prisma ORM
- CRUD ด้วย Server Actions
- การย้ายแบบแผนฐานข้อมูล
- การเติมข้อมูลฐานข้อมูลและการใช้กลุ่มการเชื่อมต่อ