Panduan Lengkap Setup Next.js 14 dengan TypeScript, Tailwind CSS, dan Deploy ke Vercel (2026 Edition)

Next.js 14 menjadi standar de‑facto untuk aplikasi React full‑stack. Tutorial ini menjelaskan instalasi, konfigurasi, contoh kode, serta best practice terbaru agar proyek Anda siap produksi dalam hitungan menit.

1. Prasyarat

Sebelum memulai, pastikan Anda memiliki:

• Node.js v20.12 atau lebih tinggi (node -v)
• npm v10+ atau Yarn 4
• Git terinstal
• Akun Vercel untuk deployment

2. Membuat Proyek Next.js 14 dengan TypeScript

# Buat folder proyek dan masuk ke dalamnya
mkdir my-next14-app && cd my-next14-app

# Inisialisasi proyek Next.js 14 dengan preset TypeScript
npx create-next-app@latest . --ts --eslint --src-dir --app-dir

Perintah di atas menghasilkan struktur src/ yang memisahkan app, components, dan styles. Semua file konfigurasi modern (eslint, prettier) sudah siap.

3. Menambahkan Tailwind CSS 3.4

# Install dependensi Tailwind
npm i -D tailwindcss@latest postcss@latest autoprefixer@latest

# Inisialisasi konfigurasi Tailwind
npx tailwindcss init -p

Update tailwind.config.js dengan mode JIT terbaru dan tambahkan path ke file app:

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

Ganti ./src/app/globals.css dengan:

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

4. Konfigurasi ESLint & Prettier (Best Practice)

Next.js 14 sudah menyertakan ESLint, namun kita tambahkan aturan khusus React Hooks dan TypeScript.

# Install plugin tambahan
npm i -D eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser

Tambahkan ke .eslintrc.json:

{
  "extends": ["next", "next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
  "plugins": ["react-hooks", "@typescript-eslint"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "_" }]
  }
}

5. Membuat Halaman Utama dengan Server Component

Next.js 14 memperkenalkan Server Components secara default dalam folder app. Buat file src/app/page.tsx:

import Image from "next/image";
import Link from "next/link";

export const metadata = {
  title: "Next.js 14 + TypeScript + Tailwind",
  description: "Demo proyek modern tahun 2026",
};

export default async function HomePage() {
  // Contoh fetch data secara server‑side
  const res = await fetch("https://api.github.com/repos/vercel/next.js", {
    next: { revalidate: 60 }
  });
  const repo = await res.json();

  return (
    

      
Welcome to Next.js 14
      
{repo.description}
      
        Baca Dokumentasi
      
      
    
  );
}

Catatan: fetch dengan opsi next: { revalidate } mengaktifkan ISR (Incremental Static Regeneration) pada level server component.

6. Menambahkan API Route (Edge Function)

Next.js 14 memungkinkan Edge Runtime. Buat src/app/api/hello/route.ts:

export const runtime = "edge"; // Memaksa eksekusi di Edge

export async function GET(request: Request) {
  return new Response(JSON.stringify({ message: "Hello from Edge!" }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

Endpoint ini dapat diakses melalui /api/hello dan dijalankan di jaringan Vercel Edge, memberikan latency < 10ms di banyak wilayah.

7. Menghubungkan Database dengan Prisma 5 (Beta)

# Install Prisma dan driver PostgreSQL
npm i -D prisma@5.0.0-beta.3
npm i @prisma/client pg

# Inisialisasi schema
npx prisma init --datasource-provider postgresql

Update .env dengan connection string Vercel Postgres (contoh):

DATABASE_URL="postgresql://user:password@localhost:5432/next14db?schema=public"

Definisikan model sederhana di prisma/schema.prisma:

model Post {
  id        BigInt   @id @default(auto())
  title     String
  content   String?
  createdAt DateTime @default(now())
}

Generate client dan migrasi:

npx prisma generate
npx prisma migrate dev --name init

Gunakan di server component:

import { prisma } from "@/lib/prisma";

export default async function Posts() {
  const posts = await prisma.post.findMany({ take: 5 });
  return (
    

      {posts.map(p => (
        

          
{p.title}
          
{p.content}
        
      ))}
    
  );
}

8. Testing dengan Playwright 1.45

# Install Playwright dan testing library
npm i -D @playwright/test

# Inisialisasi config
npx playwright init

Contoh tes e2e tests/home.spec.ts:

import { test, expect } from "@playwright/test";

test("homepage has welcome message", async ({ page }) => {
  await page.goto("/");
  await expect(page.locator("h1")).toHaveText("Welcome to Next.js 14");
});

Jalankan dengan npm test. Integrasi CI/CD akan saya tunjukkan selanjutnya.

9. CI/CD dengan GitHub Actions + Vercel Integration

Buat file .github/workflows/deploy.yml:

name: Deploy to Vercel
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
      - run: npm ci
      - run: npm run build
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          working-directory: .
          alias-domains: "preview-${{ github.sha }}.example.com"

Pastikan token dan ID organisasi disimpan sebagai secret di repositori GitHub. Setiap push ke main akan otomatis dibangun, diuji, dan dideploy ke Vercel.

10. Optimasi Performance & Security (Best Practices)

• Image Optimization: Gunakan next/image dengan loader: 'default' atau Cloudinary loader untuk CDN.
• Lazy Loading: Tambahkan loading="lazy" pada gambar non‑hero.
• Header Security: Pada next.config.mjs aktifkan headers() untuk CSP, X‑Frame‑Options, dan Referrer‑Policy.
• Bundle Analysis: Install @next/bundle-analyzer dan jalankan npm run analyze untuk memeriksa ukuran chunk.
• Cache Control: Gunakan revalidate pada fetch API atau generateStaticParams untuk ISR yang tepat.

11. Deploy ke Vercel

Jika Anda telah menghubungkan repositori GitHub dengan Vercel, cukup tekan tombol New Project di dashboard Vercel, pilih repositori, dan biarkan Vercel meng‑detect next.config.mjs. Semua variabel lingkungan (seperti DATABASE_URL) dapat di‑set di Settings → Environment Variables.

12. Monitoring & Logging

Gunakan Vercel Analytics untuk Web Vitals, serta integrasikan Sentry untuk error tracking:

# Install SDK
npm i @sentry/nextjs

# Inisialisasi (sentry.config.js)
import * as Sentry from "@sentry/nextjs";
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  tracesSampleRate: 1.0,
});

Setelah deploy, Anda dapat melihat error real‑time di dashboard Sentry.

13. Ringkasan Step‑by‑Step

1. Pastikan Node.js v20+ terinstal.
2. Gunakan create-next-app dengan flag --ts.
3. Instal dan konfigurasikan Tailwind CSS.
4. Sesuaikan ESLint & Prettier untuk TypeScript.
5. Buat halaman utama sebagai Server Component.
6. Tambahkan API route berbasis Edge Function.
7. Integrasikan Prisma 5 (beta) untuk data persisten.
8. Tulis test e2e dengan Playwright.
9. Setup GitHub Actions untuk CI/CD ke Vercel.
10. Terapkan best practice performance & security.
11. Deploy, monitor dengan Vercel Analytics & Sentry.

Dengan mengikuti langkah‑langkah di atas, Anda akan memiliki aplikasi Next.js 14 yang modern, type‑safe, dan siap produksi dalam beberapa menit. Kombinasi TypeScript, Tailwind, Prisma, serta pipeline CI/CD otomatis memberikan fondasi kuat untuk skala tim maupun proyek pribadi. Jangan lupa mengawasi performa lewat Vercel Analytics dan menambah lapisan keamanan dengan CSP serta Sentry. Selamat coding!

---

Tutorial step‑by‑step setup Next.js 14 dengan TypeScript, Tailwind CSS, Prisma, Playwright, dan CI/CD ke Vercel. Panduan lengkap 2026 untuk developer Web Development.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding