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

Next.js 14 menjadi standar baru untuk pengembangan web React modern. Tutorial ini membimbing Anda langkah demi langkah mulai dari instalasi, konfigurasi App Router, integrasi Tailwind CSS, hingga deployment otomatis ke Vercel, lengkap dengan best practice untuk performance dan security.

1. Prasyarat & Persiapan Lingkungan

Pastikan Anda memiliki:

• Node.js v20.12 atau lebih baru (node -v)
• npm v10 atau Yarn v4
• Git terinstall
• Akun Vercel (https://vercel.com)

Jika belum, instal Node.js dari nodejs.org dan buat akun Vercel.

2. Membuat Proyek Next.js 14 Baru

npx create-next-app@latest my-next14-app --ts --app
cd my-next14-app

Perintah di atas akan men-setup project dengan TypeScript, struktur app/ (App Router), dan ESLint pre‑configured.

3. Instalasi Tailwind CSS 4 (compatible dengan Next.js 14)

# Instalasi paket utama
npm i -D tailwindcss@latest postcss@latest autoprefixer@latest

# Inisialisasi konfigurasi Tailwind
npx tailwindcss init -p

File tailwind.config.js yang dihasilkan edit menjadi:

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

Selanjutnya, tambahkan directive Tailwind ke ./app/globals.css:

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

4. Konfigurasi TypeScript & ESLint (Best Practice)

Pastikan tsconfig.json mengaktifkan strict mode untuk meminimalisir bug:

{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Perbarui .eslintrc.json agar mematuhi Airbnb style dan Next.js linting rules.

5. Membuat Halaman Utama dengan App Router

Di dalam folder app, buat page.tsx:

import Image from "next/image";

export default function Home() {
  return (
    

      

        Selamat Datang di Next.js 14!
      
      

        Ini adalah contoh proyek dengan App Router, TypeScript, dan Tailwind CSS.
      
      
    
  );
}

File layout.tsx tetap meng‑import globals.css sehingga Tailwind aktif.

6. Menambahkan Middleware untuk Security Headers

Next.js 14 mendukung middleware di folder middleware.ts. Tambahkan:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  response.headers.set("X-Content-Type-Options", "nosniff");
  response.headers.set("X-Frame-Options", "DENY");
  response.headers.set("Referrer-Policy", "strict-origin-when-cross-origin");
  return response;
}

export const config = {
  matcher: "/((?!_next/static|_next/image|favicon.ico).*)",
};

Middleware ini menambah header security penting tanpa mengurangi performa karena dijalankan pada edge runtime.

7. Optimasi Gambar dan Font

Gunakan built‑in next/image dan next/font:

import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });

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

Dengan ini font di‑load secara optimal dan menghindari FOIT.

8. Menyiapkan CI/CD dengan GitHub Actions

Buat file .github/workflows/deploy.yml:

name: Deploy to Vercel

on:
  push:
    branches: [main]
  pull_request:
    types: [opened, synchronize, reopened]

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'
      - name: Install dependencies
        run: npm ci
      - name: Run lint & typecheck
        run: |
          npm run lint
          npm run check
      - name: Build
        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: .
          github-token: ${{ secrets.GITHUB_TOKEN }}
          preview-comment: false

Pastikan menambahkan token Vercel, org‑id, dan project‑id ke Settings → Secrets repository.

9. Deploy ke Vercel

1. Push repository ke GitHub. 2. Buka dashboard Vercel → "New Project" → pilih repo. 3. Vercel otomatis mendeteksi Next.js, gunakan npm run build sebagai build command. 4. Setelah deploy selesai, URL preview tersedia, dan Production akan ter‑publish setelah merge ke main.

10. Monitoring & Performance Checklist

• Aktifkan Vercel Analytics untuk LCP, CLS, FID.
• Gunakan next/script dengan strategi lazyOnload untuk script eksternal.
• Pastikan semua image memiliki width dan height untuk menghindari layout shift.
• Jalankan npm run lint dan npm run test di setiap PR.

Dengan mengikuti checklist ini, aplikasi Anda akan memiliki skor Core Web Vitals yang tinggi.

11. Best Practice Tambahan

• File‑system routing: Hindari penggunaan pages bersamaan dengan app untuk mengurangi kebingungan.
• Incremental Static Regeneration (ISR): Tambahkan revalidate pada fetch di server components bila data berubah tiap menit.
• Environment Variables: Simpan rahasia di Vercel dashboard, akses via process.env.NEXT_PUBLIC_... untuk variabel publik.
• Testing: Pakai jest + @testing-library/react untuk unit dan integration test.

Itulah seluruh alur dari instalasi hingga produksi untuk Next.js 14 modern.

Next.js 14 dengan App Router, Tailwind CSS, dan Vercel memberikan kombinasi kekuatan, kecepatan, dan kemudahan deployment yang tak tertandingi di tahun 2026. Ikuti tutorial step‑by‑step di atas, patuhi best practice keamanan dan performance, serta manfaatkan CI/CD GitHub Actions untuk release otomatis. Hasilnya, Anda akan memiliki aplikasi React yang siap skala, SEO‑friendly, dan memenuhi standar Core Web Vitals, siap bersaing di pasar modern.

---

Panduan lengkap setup Next.js 14 dengan App Router, Tailwind CSS, dan deploy otomatis ke Vercel. Termasuk instalasi, konfigurasi, contoh kode, security middleware, CI/CD, dan best practice untuk Programming, Software Engineering, dan Web Development.

Programming,Software Engineering,Web Development,Next.js 14,Tailwind CSS,Vercel,CI/CD,React,App Router

#Programming #SoftwareEngineering #WebDev #Tech #Coding