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

Tutorial step‑by‑step ini menjelaskan cara menginstal, mengkonfigurasi, dan menjalankan proyek Next.js 14 terbaru menggunakan App Router, Tailwind CSS, serta container Docker untuk environment produksi yang konsisten.

1. Persiapan Lingkungan Pengembangan

Pastikan mesin Anda memiliki Node.js 20.x atau lebih baru, npm 10+ (atau pnpm), serta Docker Desktop 4.30+. Verifikasi dengan perintah:

node -v
npm -v
docker --version

1.1. Instalasi Node.js

Unduh installer LTS dari nodejs.org atau gunakan nvm untuk manajemen versi:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
nvm use 20

1.2. Pilih Package Manager

Rekomendasi: pnpm karena kecepatan instalasi dan deduping yang lebih baik.

npm i -g pnpm

2. Membuat Proyek Next.js 14 Baru

Gunakan template resmi dengan App Router diaktifkan.

pnpm create next-app@latest my-next14-app -- --typescript --app

Parameter:

--typescript: menyiapkan TypeScript.
--app: mengaktifkan struktur app/ (App Router).

2.1. Struktur Folder Penting

my-next14-app/
├─ app/               # App Router (pages di sini)
│  ├─ layout.tsx
│  └─ page.tsx
├─ public/
├─ styles/
├─ next.config.mjs
└─ package.json

3. Menambahkan Tailwind CSS 3.4

Tailwind menjadi standar styling utility‑first untuk React dan Next.js.

pnpm add -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

File tailwind.config.cjs yang dihasilkan edit menjadi:

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

Update ./styles/globals.css:

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

Import global CSS di app/layout.tsx:

import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      {children}
    
  );
}

4. Membuat Halaman Contoh dengan Tailwind

Ganti app/page.tsx dengan komponen berikut:

export default function Home() {
  return (
    
      
        Selamat datang di Next.js 14!
      
      
        Ini contoh integrasi App Router + Tailwind CSS.
      
    
  );
}

5. Menyiapkan Docker untuk Development & Production

5.1. Dockerfile (Multi‑Stage)

# syntax=docker/dockerfile:1.5
FROM node:20-alpine AS builder
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN npm i -g pnpm && pnpm install --frozen-lockfile
COPY . .
RUN pnpm run build

FROM node:20-alpine AS runtime
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next .next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./
COPY --from=builder /app/next.config.mjs ./
COPY --from=builder /app/pnpm-lock.yaml ./
RUN npm i -g pnpm && pnpm install --prod --frozen-lockfile
EXPOSE 3000
CMD ["pnpm", "run", "start"]

Penjelasan:

Stage builder meng‑install semua dev dependencies, menjalankan next build, dan menghasilkan artefak .next.
Stage runtime hanya menyalin hasil build dan runtime dependencies, menghasilkan image yang sangat ringan (~45 MB).

5.2. .dockerignore

node_modules
.pnpm-store
.next
Dockerfile
.git
.gitignore
README.md
npm-debug.log

5.3. Build & Run Container

# Build image
docker build -t my-next14-app:latest .

# Jalankan dalam mode development (mount source)
docker run -d -p 3000:3000 \
  -v $(pwd):/app \
  -e NODE_ENV=development \
  my-next14-app:latest

# Untuk produksi
docker run -d -p 80:3000 --restart unless-stopped my-next14-app:latest

6. Optimasi & Best Practices

Image Size: gunakan alpine base, hindari npm install di runtime.
Cache Layering: letakkan COPY package.json dan pnpm install sebelum menyalin seluruh kode untuk memanfaatkan Docker cache.
Environment Variables: simpan rahasia di Docker secret atau .env file, jangan hard‑code.
Incremental Static Regeneration (ISR): manfaatkan revalidate di fetch atau generateStaticParams untuk konten yang sering berubah.
Image Scanning: jalankan docker scan atau integrasi dengan Snyk untuk mendeteksi kerentanan.

7. CI/CD Dasar dengan GitHub Actions

File .github/workflows/docker.yml:

name: Build & Deploy Docker
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
      - name: Login to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Build and push
        uses: docker/build-push-action@v5
        with:
          context: .
          push: true
          tags: ${{ secrets.DOCKER_USERNAME }}/my-next14-app:latest

Pipeline otomatis membangun image tiap push ke main dan meng‑push ke Docker Hub.

8. Testing & Debugging

Linting: tambahkan eslint dan prettier – pnpm add -D eslint prettier eslint-config-next.
Unit Test: gunakan jest + @testing-library/react – contoh __tests__/Home.test.tsx.
Debug dalam Docker: jalankan container dengan -e DEBUG=true atau gunakan docker exec -it sh untuk inspeksi file.

9. Deploy ke Cloud Provider

Platform populer (2026) yang langsung membaca Docker image:

AWS Elastic Container Service (ECS) dengan Fargate.
Google Cloud Run.
Azure Container Apps.

Semua menerima image dari Docker Hub atau Artifact Registry, cukup set environment variable NODE_ENV=production dan port 3000.

10. Ringkasan Langkah

Pasang Node.js 20, pnpm, Docker.
Generate proyek Next.js 14 dengan App Router.
Integrasikan Tailwind CSS 3.4.
Buat Dockerfile multi‑stage.
Build & jalankan container (dev & prod).
Implementasikan best practice (caching, env, ISR).
Setup CI/CD GitHub Actions untuk otomatis deploy.
Uji dengan lint, jest, dan debug Docker.
Deploy ke cloud pilihan.

Dengan mengikuti tutorial ini Anda akan memiliki aplikasi Next.js 14 modern yang terstruktur dengan App Router, tampil cantik berkat Tailwind CSS, dan siap diproduksi dalam container Docker yang ringan. Praktik terbaik seperti multi‑stage build, caching, serta pipeline CI/CD memastikan proyek tetap aman, cepat, dan mudah di‑scale di platform cloud apa pun. Selamat coding!

Tutorial step‑by‑step 2026 tentang cara setup Next.js 14 dengan App Router, Tailwind CSS, dan Docker, lengkap dengan best practice, CI/CD, dan deployment ke cloud.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma