Tutorial Lengkap Setup Next.js dan Menjalankannya di Docker

Next.js adalah framework React yang digunakan untuk membangun aplikasi web modern dengan fitur seperti server-side rendering (SSR), static site generation (SSG), dan API Routes. Docker memungkinkan kita untuk mengemas aplikasi Next.js beserta semua dependensinya dalam satu container, sehingga lebih mudah di-deploy di berbagai lingkungan.

Dalam tutorial ini, kita akan belajar:

1. Membuat proyek Next.js

2. Menulis Dockerfile untuk membangun image Next.js

3. Menggunakan docker-compose untuk menjalankan aplikasi

4. Menjalankan dan mengakses aplikasi di dalam container

1. Instalasi Next.js

Sebelum menggunakan Docker, kita perlu membuat proyek Next.js terlebih dahulu.

a. Membuat Proyek Next.js Baru

Jalankan perintah berikut untuk membuat proyek Next.js:

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

b. Struktur Folder Next.js

Setelah instalasi, proyek akan memiliki struktur berikut:

my-next-app/
public/       # Folder untuk aset statis seperti gambar dan favicon
pages/        # Folder yang berisi halaman Next.js
    index.js  # Halaman utama
    _app.js   # Entry point aplikasi
components/   # Folder untuk komponen yang dapat digunakan kembali
styles/       # Folder untuk file CSS dan styling
package.json  # File konfigurasi dependensi
next.config.js # Konfigurasi Next.js

c. Menjalankan Aplikasi Secara Lokal

Jalankan aplikasi menggunakan perintah berikut:

npm run dev

Aplikasi akan berjalan di http://localhost:3000.

2. Menulis Dockerfile untuk Next.js

Agar aplikasi Next.js dapat dijalankan di dalam Docker, kita perlu membuat Dockerfile. Buat file Dockerfile di dalam direktori proyek.

# Gunakan image Node.js sebagai base image
FROM node:18-alpine

# Tentukan direktori kerja dalam container
WORKDIR /app

# Salin package.json dan package-lock.json lalu install dependencies
COPY package*.json ./
RUN npm install

# Salin seluruh kode proyek ke dalam container
COPY . .

# Build aplikasi Next.js
RUN npm run build

# Jalankan aplikasi
CMD ["npm", "run", "start"]

# Ekspos port 3000
EXPOSE 3000

Penjelasan:

• FROM node:18-alpine: Menggunakan image Node.js berbasis Alpine Linux agar lebih ringan.

• WORKDIR /app: Menetapkan direktori kerja dalam container.

• COPY package*.json ./ dan RUN npm install: Menginstal dependensi terlebih dahulu sebelum menyalin seluruh kode proyek.

• RUN npm run build: Melakukan build aplikasi untuk mode produksi.

• CMD ["npm", "run", "start"]: Menjalankan aplikasi dalam mode produksi.

• EXPOSE 3000: Mengekspos port 3000 agar dapat diakses dari luar.

3. Menggunakan docker-compose untuk Menjalankan Next.js

Docker Compose memungkinkan kita untuk menjalankan aplikasi dengan lebih mudah tanpa harus mengetik perintah Docker yang panjang.

Buat file docker-compose.yml di direktori proyek:

version: '3'
services:
  nextjs-app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=production

Penjelasan:

• services: Mendefinisikan layanan (container) yang akan dijalankan.

• build: .: Membangun image dari Dockerfile di direktori saat ini.

• ports: Mengekspos port 3000 di dalam container ke port 3000 di host.

• volumes: Menyinkronkan folder proyek agar perubahan kode dapat langsung diterapkan tanpa harus membangun ulang image.

• environment: Menetapkan variabel lingkungan (NODE_ENV=production).

4. Menjalankan Next.js di Docker

a. Membangun dan Menjalankan Container

Jalankan perintah berikut untuk membangun dan menjalankan container:

docker-compose up --build

Proses ini akan:

1. Membangun image dari Dockerfile.

2. Menjalankan container Next.js.

3. Mengekspos aplikasi di http://localhost:3000.

b. Mengecek Container yang Berjalan

Gunakan perintah berikut untuk melihat daftar container yang berjalan:

docker ps

c. Menghentikan Container

Jika ingin menghentikan container, gunakan perintah:

docker-compose down

Perintah ini akan menghentikan dan menghapus container yang berjalan.

Kesimpulan

Dalam tutorial ini, kita telah belajar bagaimana cara mengemas aplikasi Next.js menggunakan Docker. Dengan menggunakan Dockerfile dan docker-compose, kita dapat dengan mudah menjalankan dan mendistribusikan aplikasi tanpa perlu khawatir tentang perbedaan lingkungan.

Manfaat menjalankan Next.js dengan Docker: Konsistensi lingkungan pengembangan dan produksi. Mudah dideploy ke server atau layanan cloud seperti AWS, Google Cloud, dan Azure. Pengelolaan dependensi yang lebih baik.