Panduan Lengkap Setup Next.js 14 dengan App Router, Tailwind CSS, Docker, dan GitHub Actions CI/CD (2026)

Tutorial step‑by‑step ini mengajarkan cara membangun proyek Next.js 14 terbaru, mengintegrasikan Tailwind CSS, containerisasi dengan Docker, serta otomatisasi build‑test‑deploy menggunakan GitHub Actions, lengkap dengan best practice untuk performa dan keamanan.

1. Prasyarat

Node.js 20.10+ (LTS) – node -v
npm 10.x atau Yarn 4.x
Docker Desktop 24.x atau Docker Engine
Akun GitHub dengan repository baru
Pengetahuan dasar JavaScript/React

2. Instalasi & Inisialisasi Proyek

Buatan folder kerja dan inisialisasi proyek Next.js menggunakan create-next-app:
```
npx create-next-app@latest my-next-app --ts --experimental-app
```
Parameter --ts menambahkan TypeScript, --experimental-app mengaktifkan App Router (default di v14).
Masuk ke direktori proyek:
```
cd my-next-app
```
Jalankan server development untuk memastikan semuanya berfungsi:
```
npm run dev
```
Buka http://localhost:3000 di browser.

3. Menambahkan Tailwind CSS

Instal dependensi Tailwind, PostCSS, dan autoprefixer:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Inisialisasi konfigurasi Tailwind:
```
npx tailwindcss init -p
```
File tailwind.config.js dan postcss.config.js akan dibuat.

Modifikasi tailwind.config.js agar mendeteksi semua file dalam app directory:

module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

Hapus stylesheet default dan buat globals.css di app/globals.css dengan konten:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Import globals.css di app/layout.tsx:
```
import "./globals.css";
```

Verifikasi dengan menambahkan kelas Tailwind di halaman app/page.tsx:

export default function Home() { return (Hello Next.js 14 + Tailwind!
); }

4. Struktur Project yang Clean (Best Practice)

app/ – semua route berbasis App Router.
components/ – UI reusable, dipisahkan dari logic.
lib/ – helper functions, API client, dan konfigurasi env.
hooks/ – custom React hooks.
types/ – definisi TypeScript global.

Gunakan use client secara selektif pada file yang memerlukan state atau efek browser.

5. Containerisasi dengan Docker

Buat file Dockerfile di root proyek:

# syntax=docker/dockerfile:1.4
FROM node:20-alpine AS base
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=base /app/node_modules ./node_modules
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
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=base /app/node_modules ./node_modules
EXPOSE 3000
CMD ["npm", "start"]

Buat file .dockerignore untuk menghindari copy yang tidak perlu:

node_modules
.git
Dockerfile
.dockerignore
.next
npm-debug.log
.env.local

Build image dan jalankan container:
```
docker build -t my-next-app:latest .
docker run -p 3000:3000 my-next-app:latest
```
Akses kembali http://localhost:3000 untuk memastikan container berfungsi.

6. CI/CD dengan GitHub Actions

Di repository GitHub, buat folder .github/workflows dan file ci-cd.yml:

name: CI/CD Pipeline

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - name: Install dependencies
        run: npm ci
      - name: Run lint & type check
        run: npm run lint && npm run type-check
      - name: Run tests
        run: npm test -- --watchAll=false
      - name: Build Next.js
        run: npm run build

  docker-publish:
    needs: build-test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Login to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Build & push image
        uses: docker/build-push-action@v5
        with:
          context: .
          push: true
          tags: ${{ secrets.DOCKER_USERNAME }}/my-next-app:latest

Pastikan menambahkan DOCKER_USERNAME dan DOCKER_PASSWORD sebagai secret di Settings → Secrets.

7. Keamanan & Performance Optimizations

Header Security: Tambahkan middleware next-secure-headers.

npm install next-secure-headers
// middleware.ts
import { NextResponse } from 'next/server';
import { secureHeaders } from 'next-secure-headers';
export function middleware(req) {
  const res = NextResponse.next();
  secureHeaders({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "'unsafe-inline'"],
        styleSrc: ["'self'", "'unsafe-inline'"],
      },
    },
    referrerPolicy: 'strict-origin-when-cross-origin',
  })(req, res);
  return res;
}

Image Optimization: Gunakan next/image dengan loader default yang sudah mendukung WebP dan AVIF.
Static Site Generation (SSG): Untuk halaman yang tidak memerlukan data dinamis, ubah export const dynamic = "force-static"; di file page.
Cache Control: Pada Docker stage, set NODE_OPTIONS=--max-old-space-size=2048 untuk menghindari OOM pada build besar.

8. Deploy ke Vercel (Opsional)

Jika ingin menggunakan platform asal Next.js, hubungkan repository ke Vercel, pilih Next.js framework, dan biarkan Vercel mendeteksi Dockerfile otomatis. Dengan CI di GitHub, setiap push ke main akan memicu build baru di Vercel.

9. Penutup & Checklist

[x] Proyek Next.js 14 berhasil dibuat dengan TypeScript.
[x] Tailwind CSS terintegrasi dan dapat di‑custom.
[x] Dockerfile multi‑stage menghasilkan image < 120 MB.
[x] GitHub Actions menjalankan lint, test, build, dan push image.
[x] Security headers dan performance tweaks diterapkan.

Ikuti langkah di atas, dan Anda memiliki stack modern yang siap skala, aman, serta mudah dikelola oleh tim DevOps.

Dengan mengikuti tutorial ini, Anda tidak hanya menguasai setup Next.js 14 + Tailwind, tetapi juga mempelajari cara meng‑containerize aplikasi, mengamankan header, serta mengotomatisasi pipeline CI/CD menggunakan GitHub Actions. Kombinasi ini memberikan fondasi yang kuat untuk membangun aplikasi web modern yang siap produksi pada tahun 2026.

Panduan lengkap step‑by‑step setup Next.js 14 dengan App Router, Tailwind CSS, Docker, dan GitHub Actions CI/CD pada 2026. Termasuk best practice keamanan dan performa.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma