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

Next.js 14 telah menjadi standar de‑facto untuk aplikasi React modern. Tutorial ini menunjukkan cara meng‑install, meng‑konfigurasi TypeScript, menambahkan Tailwind CSS, serta menyiapkan CI/CD otomatis ke Vercel dalam langkah‑langkah yang jelas dan up‑to‑date.

1. Prasyarat

Pastikan Anda memiliki:

• Node.js v20.10+ (unduh di nodejs.org)
• Git terinstall
• Akun Vercel (gratis) di vercel.com
• Editor kode, contoh VS Code dengan ekstensi ESLint dan Prettier

2. Membuat Proyek Next.js 14

Jalankan perintah berikut di terminal:

npx create-next-app@latest my-next14-app \
  --typescript \
  --tailwind

Opsi --typescript menyiapkan file tsconfig.json secara otomatis, sedangkan --tailwind menambahkan konfigurasi Tailwind CSS bawaan.

Masuk ke folder proyek:

cd my-next14-app

3. Verifikasi Instalasi

Jalankan development server:

npm run dev

Buka http://localhost:3000 di browser. Anda harus melihat halaman beranda Next.js standar yang sudah di‑style dengan Tailwind.

4. Struktur Proyek dan Penjelasan Singkat

Beberapa folder penting:

• app/ – folder baru di Next.js 14 yang menggantikan pages/ untuk routing berbasis server components.
• components/ – komponen UI reusable.
• styles/ – file globals.css yang meng‑import Tailwind.
• tsconfig.json – konfigurasi TypeScript.

5. Konfigurasi TypeScript Lanjutan

Tambahkan strict mode agar kode menjadi lebih aman:

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "exactOptionalPropertyTypes": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*" ]
    }
  },
  "include": ["next-env.d.ts","**/*.ts","**/*.tsx"],
  "exclude": ["node_modules"]
}

Setelah menyimpan, restart server agar TypeScript memuat perubahan.

6. Menyesuaikan Tailwind CSS

File tailwind.config.js sudah ada, tetapi tambahkan mode JIT dan paths yang tepat:

// tailwind.config.js
module.exports = {
  mode: 'jit',
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        primary: '#1E40AF',
        secondary: '#64748B'
      }
    }
  },
  plugins: []
};

Update globals.css untuk meng‑import Tailwind utilities:

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

7. Contoh Komponen dengan TypeScript & Tailwind

Buat file components/Button.tsx:

import React from 'react';

type ButtonProps = {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: 'primary' | 'secondary';
};

const variantClass = {
  primary: 'bg-primary text-white hover:bg-primary/90',
  secondary: 'bg-secondary text-white hover:bg-secondary/90'
};

export const Button: React.FC = ({
  children,
  onClick,
  variant = 'primary'
}) => (
  
);

Gunakan di halaman app/page.tsx:

import { Button } from '@/components/Button';

export default function Home() {
  return (
    

      
Welcome to Next.js 14
      
    
  );
}

8. Linting & Formatting (Best Practice)

Instal ESLint dan Prettier yang kompatibel dengan Next.js:

npm i -D eslint prettier eslint-config-next eslint-plugin-react-hooks

Tambahkan .eslintrc.json:

{
  "extends": ["next", "next/core-web-vitals", "prettier"],
  "rules": {
    "@next/next/no-img-element": "off"
  }
}

Dan .prettierrc sederhana:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": false
}

Jalankan npm run lint dan npm run format secara berkala; Anda dapat menambahkan hook pre‑commit menggunakan husky untuk otomatisasi.

9. Menyiapkan CI/CD dengan GitHub Actions

Buat file .github/workflows/deploy.yml:

name: Deploy to Vercel

on:
  push:
    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'
      - run: npm ci
      - run: npm run build
      - name: Deploy
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-args: '--prod'
          working-directory: .
        env:
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

Tambahkan tiga secret di repository GitHub: VERCEL_TOKEN, VERCEL_ORG_ID, dan VERCEL_PROJECT_ID. Token dapat dibuat di dasbor Vercel → Settings → Tokens.

10. Deploy ke Vercel Secara Manual (Jika Ingin Fast)

1. Masuk ke Vercel Dashboard dan klik New Project.
2. Hubungkan ke repository GitHub yang berisi proyek Anda.
3. Vercel otomatis mendeteksi Next.js, pilih Framework Preset: Next.js.
4. Pastikan variabel lingkungan (jika ada) ditambahkan pada tab Environment Variables.
5. Klik Deploy. Vercel akan menjalankan npm install → npm run build → menyajikan hasilnya di URL publik.

Setelah deploy pertama, setiap push ke main akan memicu workflow GitHub Actions di atas, meng‑update Vercel secara otomatis.

11. Optimasi Performance (Best Practice)

• Image Optimization: Gunakan next/image yang otomatis menghasilkan versi WebP, lazy‑loading, dan ukuran yang sesuai.
• Static Generation (SSG): Pada halaman yang tidak membutuhkan data dinamis, gunakan export const revalidate = 86400 untuk ISR (Incremental Static Regeneration).
• Server‑Side Rendering (SSR) selektif: Hanya pada halaman yang memang memerlukan data per‑request, gunakan export const dynamic = 'force-dynamic'.
• Bundle Analyzer: Tambahkan next-bundle-analyzer untuk memantau ukuran chunk.

  npm i -D @next/bundle-analyzer
  // next.config.js
  const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
  });
  module.exports = withBundleAnalyzer({
    // config lain
  });
  

  Jalankan ANALYZE=true npm run build untuk melihat laporan.

12. Kesimpulan Teknis

Dengan langkah‑langkah di atas, Anda memiliki aplikasi Next.js 14 yang modern, tipe‑aman, di‑style dengan Tailwind, serta terintegrasi ke pipeline CI/CD Vercel. Struktur kode yang bersih, linting ketat, dan optimasi bawaan Next.js menjamin performa tinggi dan skalabilitas untuk produk produksi.

Next.js 14, dikombinasikan dengan TypeScript, Tailwind CSS, dan otomatisasi deployment via Vercel, memberikan fondasi yang kuat untuk membangun aplikasi web yang cepat, aman, dan mudah dipelihara. Ikuti tutorial step‑by‑step ini, terapkan best practice linting serta CI/CD, dan Anda sudah siap mengirimkan produk ke dunia nyata dengan confidence.

---

Panduan lengkap setup Next.js 14 dengan TypeScript, Tailwind CSS, dan deployment otomatis ke Vercel. Langkah demi langkah, contoh kode, konfigurasi, serta best practice untuk Programming, Software Engineering, dan Web Development.

Programming,Software Engineering,Web Development,Next.js,TypeScript,Tailwind CSS,Vercel,CI/CD

#Programming #SoftwareEngineering #WebDev #Tech #Coding