Panduan Lengkap Setup Next.js 14 dengan Tailwind CSS, TypeScript, dan Docker (2026)

Tutorial step‑by‑step ini mengajarkan cara membangun aplikasi Next.js 14 modern, menambahkan Tailwind CSS, TypeScript, serta containerisasi dengan Docker, lengkap dengan best practice untuk produksi.

1. Prasyarat

Pastikan Anda memiliki:

• Node.js v20.12 atau lebih baru
• npm atau pnpm (disarankan pnpm v9)
• Docker Engine v27 dan Docker Compose v2.27
• Git

2. Membuat Project Next.js 14 dengan TypeScript

npx create-next-app@latest my-next-app \
  --typescript \
  --eslint \
  --src-dir \
  --app-dir
cd my-next-app

Perintah di atas menghasilkan struktur src/ dan app/ yang direkomendasikan oleh tim Next.js. Semua file konfigurasi sudah berformat TypeScript.

3. Menambahkan Tailwind CSS (v3.4)

# Instalasi dependensi
pnpm add -D tailwindcss@latest postcss@latest autoprefixer@latest
# Inisialisasi Tailwind
pnpm tailwindcss init -p

Edit tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tambahkan Tailwind ke CSS global (src/app/globals.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Menyusun Dockerfile untuk Development

# syntax=docker/dockerfile:1.5
FROM node:20-alpine AS base
WORKDIR /app

# Install pnpm
RUN npm i -g pnpm@9

# Copy hanya file yang diperlukan untuk instalasi deps
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

# Salin source code
COPY . .

# Build untuk produksi (opsional, dev berjalan langsung)
# RUN pnpm run build

EXPOSE 3000
CMD ["pnpm", "dev"]

5. Docker Compose (dev & prod)

version: "3.9"
services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app:delegated
    environment:
      - NODE_ENV=development
    command: pnpm dev
  web-prod:
    build: .
    ports:
      - "8080:3000"
    environment:
      - NODE_ENV=production
    command: pnpm start

6. Menjalankan Aplikasi

# Development
docker compose up web
# Production (setelah build)
docker compose up web-prod

Akses http://localhost:3000 untuk development atau http://localhost:8080 untuk production.

7. Contoh Kode – Halaman Beranda dengan Tailwind

// src/app/page.tsx
import Image from "next/image";
export default function Home() {
  return (
    

      

        Selamat Datang di Next.js 14!
      
      

        Ini contoh integrasi Tailwind CSS dan TypeScript.
      
      
    
  );
}

8. Best Practice untuk Produksi

• Environment Variables: gunakan .env.local untuk dev dan .env.production untuk prod, jangan commit file .env ke repo.
• Static Image Optimization: letakkan aset di public/ dan manfaatkan next/image untuk responsive loading.
• Linting & Formatting: tambahkan eslint-config-next dan prettier, jalankan pada pre‑commit hook dengan husky.
• Cache Layer di Docker: urutan COPY package.json → pnpm install memanfaatkan cache Docker sehingga rebuild lebih cepat.
• Security: set NODE_ENV=production, gunakan next build && next start di container prod, dan aktifkan header keamanan melalui next.config.js (Content‑Security‑Policy, X‑Frame‑Options).

9. Deploy ke Vercel (opsional)

Jika ingin menghindari self‑hosted Docker, cukup push repo ke GitHub, lalu hubungkan ke Vercel. Vercel otomatis mendeteksi Next.js 14, menginstall pnpm, dan menjalankan npm run build. Pastikan vercel.json meng‑set output: "standalone" untuk build yang dapat dijalankan di Docker bila diperlukan.

10. Debugging dan Monitoring

• Gunakan next dev dengan --inspect untuk attach debugger Node.js.
• Integrasikan @sentry/nextjs untuk error tracking di produksi.
• Tambahkan healthcheck di Docker Compose:

  healthcheck:
    test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
    interval: 30s
    timeout: 5s
    retries: 3
  

Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki aplikasi Next.js 14 yang modern, scalable, dan siap produksi. Menggunakan Tailwind CSS mempercepat styling, TypeScript menambah keamanan tipe, sementara Docker memastikan lingkungan konsisten di semua mesin. Terapkan best practice keamanan, caching, dan monitoring untuk menjaga kualitas kode dalam jangka panjang.

---

Tutorial lengkap setup Next.js 14 dengan Tailwind CSS, TypeScript, dan Docker pada 2026. Termasuk instalasi, konfigurasi, contoh kode, dan best practice untuk produksi.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding