Langkah-langkah setup Next.js, Prisma, dan PostgreSQL di Docker

1. Persiapkan Proyek

Buat sebuah direktori proyek, misalnya nextjs-prisma-postgres-docker dan masuk ke dalam direktori tersebut.

mkdir nextjs-prisma-postgres-docker
cd nextjs-prisma-postgres-docker

2. Setup Next.js

Jalankan perintah ini untuk membuat proyek Next.js baru di dalam folder nextjs.

npx create-next-app@latest nextjs

Setelah itu, masuk ke dalam folder nextjs:

cd nextjs

3. Setup Prisma

1. Install Prisma dan PostgreSQL Client:Jalankan perintah di dalam folder nextjs untuk menginstall Prisma dan PostgreSQL client.

npm install prisma @prisma/client

2. Inisialisasi Prisma:

Inisialisasi Prisma untuk membuat folder konfigurasi.

npx prisma init

Setelah ini, folder prisma dan file .env akan dibuat di root proyek kamu.

3. Konfigurasi Prisma:

Edit file prisma/schema.prisma untuk menggunakan PostgreSQL. Ubah konfigurasi datasource seperti berikut:

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

generator client {
  provider = "prisma-client-js"
}

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

4. Konfigurasi DATABASE_URL:

Buka file .env yang dibuat oleh Prisma dan set DATABASE_URL ke PostgreSQL di Docker:

DATABASE_URL=postgresql://prisma:prisma@postgres:5432/mydb?schema=public

4. Setup Docker Compose & Dockerfile untuk Menjalankan Semua Layanan

Di root folder proyek, buat file docker-compose.yml yang akan mengatur semua container (Next.js, PostgreSQL) seperti berikut: *buat di dalam folder utama

services:
  nextjs:
    build:
      context: ./nextjs
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    depends_on:
      - postgres
    environment:
      - DATABASE_URL=postgresql://prisma:prisma@postgres:5432/mydb?schema=public

  postgres:
    image: postgres:13
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: prisma
      POSTGRES_PASSWORD: prisma
      POSTGRES_DB: mydb
    ports:
      - "5432:5432"

volumes:
  postgres_data:

Penjelasan:

• Next.js container akan build aplikasi Next.js dari folder ./nextjs.
• PostgreSQL container akan menjalankan database PostgreSQL dengan user prisma, password prisma, dan database mydb.
• depends_on memastikan Next.js container hanya mulai setelah PostgreSQL selesai.
• Sesuaikan Dockerfile-nya (taruh di dalam folder /nextjs)

FROM node:18

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]

Struktur Proyek Sekarang Harusnya Seperti Ini:

/nextjs-prisma-postgres-docker
  /nextjs
    Dockerfile
    package.json
    /pages
    /components
    ...
  docker-compose.yml

5. Build dan Jalankan Container

Kembali ke root folder (/project-root) dan jalankan:

docker-compose up --build

Ini akan menjalankan kedua container: Next.js dan PostgreSQL.

6. Langkah-Langkah untuk Menjalankan Prisma Migrate:

1. Akses Container Next.js

Untuk menjalankan migrasi Prisma, kamu harus masuk ke dalam container Next.js yang sedang berjalan. Gunakan perintah berikut untuk masuk ke dalam container tersebut:

docker-compose exec nextjs bash

Ini akan membuka shell di dalam container Next.js yang sedang berjalan.

2. Jalankan Prisma Migrate

Setelah berada di dalam container Next.js, jalankan perintah Prisma berikut untuk menjalankan migrasi dan membuat tabel di database PostgreSQL yang sudah kamu atur di DATABASE_URL:

npx prisma migrate dev --name init

• --name init memberi nama pada migrasi pertama yang dijalankan. Kamu bisa menggunakan nama lain sesuai keinginan, tapi init adalah nama yang umum digunakan untuk migrasi pertama.
• Perintah ini akan membaca file prisma/schema.prisma untuk mengetahui struktur tabel yang perlu dibuat di database PostgreSQL kamu.

3. Periksa Jika Migrasi Berhasil

Setelah menjalankan perintah di atas, kamu akan melihat output yang menunjukkan apakah migrasi berhasil dilakukan atau ada error. Jika berhasil, database mydb di PostgreSQL sekarang akan memiliki tabel sesuai dengan model yang ada di prisma/schema.prisma.

4. Masuk ke Container PostgreSQL

Gunakan perintah berikut untuk masuk ke dalam container PostgreSQL yang sedang berjalan:

docker-compose exec postgres bash

Ini akan membawamu masuk ke dalam container PostgreSQL. Di sini, kamu bisa menjalankan perintah psql dan memeriksa tabel yang ada di dalam database.

5. Masuk ke PostgreSQL dengan psql

Setelah berada di dalam container PostgreSQL, kamu bisa menjalankan perintah psql untuk masuk ke database:

psql -U prisma -d mydb

• -U prisma: Username yang digunakan untuk koneksi ke PostgreSQL (sesuai dengan yang kamu definisikan di docker-compose.yml).
• -d mydb: Database yang ingin kamu akses (yang juga didefinisikan di docker-compose.yml).

6. Cek Tabel dengan \dt

Sekarang, setelah masuk ke PostgreSQL, kamu bisa menjalankan perintah berikut untuk melihat tabel-tabel yang ada di database:

\dt

7. Keluar dari PostgreSQL

Jika sudah selesai, kamu bisa keluar dari session PostgreSQL dengan mengetikkan:

\q

Dan keluar dari container PostgreSQL dengan mengetikkan:

exit

7. Akses Aplikasi Next.js

Setelah migrasi berhasil, buka browser dan akses aplikasi Next.js kamu di http://localhost:3000. Aplikasi harusnya sudah dapat terhubung ke database dan berfungsi dengan baik.