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

Pelajari cara membangun lingkungan pengembangan modern menggunakan Next.js 14, Tailwind CSS, TypeScript, dan Docker. Tutorial ini mencakup instalasi, konfigurasi, contoh kode, serta best practice untuk produksi yang aman dan optimal.

1. Prasyarat

Pastikan mesin Anda sudah terpasang:

• Node.js v22.x (LTS) – node -v harus menampilkan versi >=22
• npm atau pnpm (rekomendasi: pnpm 9)
• Docker Desktop 4.30+ dengan dukungan docker compose
• Git

2. Membuat Project Next.js 14

Gunakan create-next-app dengan template TypeScript dan Tailwind:

npx create-next-app@latest my-next-app \
  --ts \
  --eslint \
  --tailwind
cd my-next-app

Perintah di atas akan menghasilkan struktur folder standar, menginstal next, react, react-dom, typescript, dan konfigurasi tailwind.config.ts otomatis.

2.1 Verifikasi Instalasi

pnpm dev

Buka http://localhost:3000 – Anda harus melihat halaman beranda Next.js default.

3. Menyiapkan Docker

Kita akan menulis dua berkas: Dockerfile untuk image aplikasi, dan docker-compose.yml untuk layanan pengembangan.

3.1 Dockerfile

# syntax=docker/dockerfile:1.4
FROM node:22-alpine AS base
WORKDIR /app

# Instal pnpm secara global (lebih cepat dan deterministic)
RUN npm i -g pnpm

# Copy lockfile dan package.json
COPY package.json pnpm-lock.yaml ./

# Install dependencies hanya sekali
RUN pnpm install --frozen-lockfile --production=false

# Copy sumber kode
COPY . .

# Build aplikasi untuk produksi
RUN pnpm run build

# Stage final – runtime kecil
FROM node:22-alpine AS runner
WORKDIR /app
COPY --from=base /app/.next ./.next
COPY --from=base /app/public ./public
COPY --from=base /app/package.json ./package.json
COPY --from=base /app/next.config.mjs ./next.config.mjs
COPY --from=base /app/node_modules ./node_modules
EXPOSE 3000
ENV NODE_ENV=production
CMD ["node", "server.js"]

Catatan: server.js dihasilkan otomatis oleh Next.js saat next build. Pastikan next.config.mjs mengaktifkan output: 'standalone' jika Anda ingin image lebih kecil.

3.2 docker-compose.yml

version: '3.9'
services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app:cached
      - /app/node_modules
    environment:
      - NODE_ENV=development
    command: pnpm dev
    healthcheck:
      test: ["CMD", "wget", "-qO-", "http://localhost:3000"]
      interval: 10s
      timeout: 5s
      retries: 3

Dengan volumes di atas, perubahan kode akan langsung terlihat tanpa perlu rebuild container.

4. Konfigurasi Tailwind CSS & TypeScript

Next.js 14 sudah menyiapkan tailwind.config.ts. Pastikan file tailwind.config.ts berisi:

import type { Config } from 'tailwindcss';
export default as Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Untuk TypeScript, pastikan tsconfig.json memiliki strict: true dan noEmit: true (Next.js meng-handle emit).

4.1 Contoh Komponen dengan Tailwind

/** @jsxImportSource react */
import Image from 'next/image';

export default function Hero() {
  return (
    

      

        
Selamat Datang di Next.js 14
        
Framework React terbaru dengan fitur App Router dan Server Actions.
        
      
    
  );
}

Letakkan komponen ini di app/page.tsx untuk melihat hasilnya.

5. Menjalankan di Docker

# Build dan jalankan container
docker compose up --build -d

# Cek log bila ada masalah
docker compose logs -f web

Setelah container siap, akses http://localhost:3000. Karena kita menggunakan volume, perubahan pada app/page.tsx otomatis hot‑reloaded.

6. Optimasi Produksi

• Image Size: Tambahkan output: 'standalone' di next.config.mjs agar node_modules yang tidak dipakai tidak disertakan.
• Cache Headers: Gunakan next.config.mjs untuk menambahkan headers yang memanfaatkan CDN.
• Security Headers: Tambahkan middleware di middleware.ts untuk CSP, X‑Frame‑Options, dan Referrer‑Policy.

6.1 next.config.mjs contoh

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  images: {
    remotePatterns: [{ hostname: 'images.unsplash.com' }],
  },
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'Content-Security-Policy', value: "default-src 'self'; img-src * data:; script-src 'self' 'unsafe-eval'" },
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
        ],
      },
    ];
  },
};
export default nextConfig;

7. CI/CD dengan GitHub Actions (Opsional)

Berikut workflow minimal untuk build dan push Docker image ke Docker Hub.

name: Build & Deploy
on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'pnpm'
      - name: Install pnpm
        run: npm i -g pnpm
      - name: Install deps
        run: pnpm install --frozen-lockfile
      - name: Build Next.js
        run: pnpm run build
      - name: Log in to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKERHUB_USER }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Build & push image
        uses: docker/build-push-action@v5
        with:
          context: .
          push: true
          tags: ${{ secrets.DOCKERHUB_USER }}/my-next-app:latest

Workflow ini memastikan setiap commit ke main menghasilkan image terbaru yang dapat dideploy ke Kubernetes, Fly.io, atau platform lain.

8. Best Practice Tambahan

• Linting & Formatting: Gunakan eslint-config-next bersama prettier. Tambahkan script "lint": "next lint && pnpm prettier --check .".
• Testing: Integrasikan jest atau playwright untuk unit dan e2e testing.
• Environment Variables: Simpan rahasia di .env.local dan definisikan NEXT_PUBLIC_ untuk yang dapat di‑expose ke client.
• Monitoring: Pasang next-sentry atau @sentry/nextjs untuk error tracking di produksi.

Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki project Next.js 14 yang lengkap dengan TypeScript, Tailwind CSS, dan Docker. Lingkungan Docker mempercepat onboarding tim, sementara konfigurasi production‑ready (standalone build, security headers, CI/CD) menjamin aplikasi siap di‑scale di cloud. Terapkan best practice linting, testing, dan monitoring untuk menjaga kualitas kode seiring pertumbuhan produk.

---

Panduan step-by-step setup Next.js 14 dengan Tailwind CSS, TypeScript, Docker, dan CI/CD. Termasuk contoh kode, konfigurasi keamanan, dan best practice untuk pengembangan profesional.

Programming,Software Engineering,Web Development,Next.js,Docker,Tailwind CSS,TypeScript

#Programming #SoftwareEngineering #WebDev #Tech #Coding