Belajar NextJs Terbaru 16.0.1 Error Saat install Prisma dan prisma-client next-auth bcrypt

Belajar belum selesai dan khatam Next.js 14 atau 15, sekarang versinya sudah naik saja ke Next.js 16. Saat mencoba melakukan instalasi package ORM dan autentikasi pada versi terbaru ini, saya mendapati kendala error *dependency tree* yang cukup mengganggu. Tepatnya, masalah ini muncul saat memasang Prisma, `@prisma/client`, `next-auth`, dan `bcrypt` secara bersamaan.

Cara Mengatasi Error ERESOLVE Saat Install Prisma, NextAuth, dan Bcrypt

Saat menjalankan perintah instalasi package di terminal:

$ npm install @prisma/client next-auth bcrypt

Muncul pesan log error *upstream dependency conflict* seperti di bawah ini:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
While resolving: my-app@0.1.0
Found: nodemailer@6.10.1
Could not resolve dependency:
peerOptional nodemailer@"^7.0.7" from next-auth@4.24.12

Penyebabnya: Terjadi konflik versi (peer dependency mismatch) antara package nodemailer bawaan sistem lokal dengan dependensi yang diminta oleh library next-auth versi 4.

Langkah Solusi

1. Perbarui package Nodemailer ke versi paling akhir untuk menyamakan pohon dependensi:

$ npm install nodemailer@latest

2. Setelah proses pembaruan berhasil tanpa error, lanjutkan kembali instalasi package utama Anda:

$ npm install @prisma/client next-auth bcrypt

3. Selanjutnya, pasang core library prisma ke dalam environment development proyek Anda:

$ npm install prisma --save-dev

4. Jalankan inisialisasi awal untuk melahirkan berkas konfigurasi database:

$ npx prisma init

Perintah di atas otomatis akan melahirkan dua berkas penting baru di dalam direktori root:

├── .env
└── prisma/
    └── schema.prisma

Validasi Versi Next.js, NextAuth, dan Nodemailer

Untuk memastikan seluruh package pembantu di atas sudah kompatibel dan saling serasi satu sama lain, Anda bisa memvalidasinya dengan perintah:

$ npm list next next-auth nodemailer

Mengatasi Error Gagal Muat Prisma Config

Kendala kedua yang sering muncul adalah saat Anda mencoba menjalankan perintah migrasi database:

$ npx prisma migrate dev --name init

Terminal akan melemparkan pesan error modul TypeScript gagal dibaca:

Failed to load config file "prisma.config.ts"
Error: Cannot find module 'prisma/config'
Require stack:
- D:\laragon\www\my-app\prisma.config.ts

Langkah Solusi

Pastikan core engine Prisma Anda sudah terpasang dengan benar di local environment komputer melalui perintah npm install prisma --save-dev.

Kemudian, buka berkas prisma.config.ts Anda, lalu tambahkan baris pemanggil variabel env di bagian paling atas berkas:

import "dotenv/config";

Setelah itu, paksa sistem untuk membuat ulang blueprint database client:

$ npx prisma generate

Setup Berkas Konfigurasi Database (CRUD Proyek)

Berikut adalah contoh cetak biru (blueprint) konfigurasi berkas yang bersih, aman, dan stabil untuk menjalankan arsitektur data di Next.js 16.

1. Berkas prisma/schema.prisma

generator client {
  provider = "prisma-client"
  output   = "../app/generated/prisma"
}

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model Product {
  id         Int      @id @default(autoincrement())
  nama       String
  harga      Float
  stok       Int
  image      String?
  createdAt  DateTime @default(now())
  updatedAt  DateTime @updatedAt
}

2. Berkas prisma.config.ts

import "dotenv/config";
import { defineConfig, env } from "prisma/config";

export default defineConfig({
  schema: "prisma/schema.prisma",
  migrations: {
    path: "prisma/migrations",
  },
  engine: "classic",
  datasource: {
    url: env("DATABASE_URL"),
  },
});

Setelah kedua susunan kode di atas disimpan, jalankan kompilasi ulang client dan eksekusi migrasi database ke MySQL Server Anda:

$ npx prisma generate
$ npx prisma migrate dev --name init

3. Membuat Instance Client: /lib/prisma.ts

Gunakan pendekatan singleton berikut untuk mencegah aplikasi Next.js membuka terlalu banyak koneksi database (instansiasi berulang) saat proses *Hot Reload* berjalan di fase development:

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

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined;
};

export const prisma = globalForPrisma.prisma ?? new PrismaClient();

if (process.env.NODE_ENV !== "production") {
  globalForPrisma.prisma = prisma;
}

export default prisma;

Membangun Server Action CRUD Product

Untuk menangani manajemen data di sisi backend tanpa perlu membuat end-point API Routes manual, buatlah struktur folder baru di dalam direktori proyek Anda:

/app/actions/ProductAction.ts

Di dalam berkas ProductAction.ts tersebut, Anda bisa menyusun fungsi-fungsi logis modular seperti:

• Tambah Produk (Menangani input form data baru ke MySQL)
• Edit Produk (Melakukan perubahan data berdasarkan ID produk)
• Hapus Produk (Menghapus record dari database)
• Upload Gambar (Mengolah penyimpanan aset gambar produk ke folder public)

Gambaran Struktur Folder Akhir Proyek

Jika semua langkah di atas diikuti dengan benar, pohon direktori (*folder tree*) aplikasi Next.js 16 Anda akan terlihat rapi seperti ini:

app
├── actions
│   └── ProductAction.ts
├── products
│   ├── page.tsx
│   ├── new
│   │   └── page.tsx
│   └── edit
│       └── [id]
│           └── page.tsx
├── generated
│   └── prisma
lib
└── prisma.ts
prisma
├── migrations
├── schema.prisma
└── prisma.config.ts
public
└── uploads

Kesimpulan

Dengan menerapkan langkah-langkah konfigurasi di atas, Anda kini siap membangun fungsionalitas CRUD produk berskala modern menggunakan Next.js 16, Prisma ORM, MySQL, dan ekosistem Server Actions terbaru secara aman tanpa kendala bentrok dependensi paket library.