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

Next.js 14 menjadi standar de‑facto untuk aplikasi React modern. Di tutorial ini Anda akan dipandu langkah demi langkah menginstal, mengkonfigurasi App Router, menambahkan Tailwind CSS, menulis contoh kode, serta menerapkan best practice sebelum deploy ke Vercel.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki perangkat lunak berikut dengan versi yang kompatibel pada 24 Juni 2026:

Node.js >= 20.10 (LTS) – unduh di nodejs.org
npm atau Yarn (npm 10.x atau Yarn 4.x)
Git CLI – untuk version control
Akun Vercel – daftar gratis

2. Membuat Proyek Next.js 14

Jalankan perintah di terminal untuk membuat proyek baru dengan template create-next-app yang sudah mendukung App Router secara default.

npx create-next-app@latest my-next14-app --ts --eslint --src-dir --app-dir

Penjelasan singkat tiap flag:

--ts: menginisialisasi TypeScript
--eslint: menambahkan konfigurasi ESLint standar
--src-dir: menempatkan semua kode dalam folder src
--app-dir: mengaktifkan fitur App Router (folder app)

3. Instalasi Tailwind CSS 3.4 (Versi Stabil pada 2026)

Tailwind CSS tetap menjadi pilihan utama untuk utility‑first styling. Ikuti langkah berikut:

cd my-next14-app
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

File tailwind.config.js akan dibuat bersama postcss.config.js. Edit tailwind.config.js untuk mengaktifkan JIT dan menambahkan path ke semua file yang menggunakan kelas Tailwind:

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

Selanjutnya, buat file global CSS src/app/globals.css (atau edit yang sudah ada) dan tambahkan directive Tailwind:

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

Pastikan globals.css di‑import di src/app/layout.tsx:

import './globals.css';

export const metadata = {
  title: 'My Next.js 14 App',
  description: 'Demo App Router dengan Tailwind CSS',
};

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

4. Struktur Dasar App Router

App Router menggunakan folder app sebagai root. Berikut contoh struktur minimal:

app/
- layout.tsx – layout global (sudah ada)
- page.tsx – halaman beranda
- dashboard/
  - layout.tsx – layout khusus dashboard
  - page.tsx – konten dashboard

4.1 Membuat Halaman Beranda

// src/app/page.tsx
export default function Home() {
  return (
    
      
        Selamat Datang di Next.js 14
      
      
        Ini contoh aplikasi dengan App Router dan Tailwind CSS.
      
    
  );
}

4.2 Membuat Dashboard dengan Layout Terpisah

// src/app/dashboard/layout.tsx
export const metadata = {
  title: 'Dashboard',
};

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        
          Home
          Settings
        
      
      {children}
    
  );
}

// src/app/dashboard/page.tsx
export default function DashboardHome() {
  return (
    
      Dashboard Overview
      Konten dinamis akan ditambahkan di sini.
    
  );
}

5. Menambahkan TypeScript Strict Mode & ESLint

Next.js 14 sudah mengaktifkan strict di tsconfig.json. Pastikan konfigurasi berikut ada:

{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "strict": true,
    "baseUrl": "./",
    "paths": { "@/*": ["src/*"] },
    "jsx": "preserve",
    "moduleResolution": "node",
    "allowJs": true,
    "noEmit": true,
    "incremental": true,
    "skipLibCheck": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Untuk linting, periksa file .eslintrc.json. Tambahkan plugin React dan Next:

{
  "extends": ["next", "next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
  "plugins": ["@typescript-eslint"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

6. Menjalankan Proyek Secara Lokal

npm run dev

Server development akan tersedia di http://localhost:3000. Periksa bahwa halaman beranda serta dashboard berfungsi dan styling Tailwind muncul.

7. Optimasi Produksi (Best Practice)

Image Optimization: gunakan next/image untuk meng‑serve gambar dengan format WebP otomatis.
Static Export vs Server‑Side Rendering: untuk halaman yang tidak memerlukan data dinamis, pilih export const revalidate = 60; pada file page.tsx untuk ISR (Incremental Static Regeneration).
Env Variables: simpan rahasia (API key, db URL) di file .env.local dan akses via process.env.NEXT_PUBLIC_* untuk yang harus tersedia di client.

Code Splitting: manfaatkan dynamic import untuk komponen berat.

const HeavyChart = dynamic(() => import('@/components/HeavyChart'), { ssr: false });

Security Headers: tambahkan next.config.js dengan headers() untuk CSP, X‑Frame‑Options, dll.

module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [
        { key: 'Content-Security-Policy', value: "default-src 'self'; script-src 'self' 'unsafe-inline'" },
        { key: 'X-Content-Type-Options', value: 'nosniff' },
      ],
    }];
  },
};

8. Deploy ke Vercel (Zero‑Config)

Push kode ke repository Git (GitHub, GitLab, atau Bitbucket).

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/username/my-next14-app.git
git push -u origin main

Buka dashboard Vercel, klik New Project, pilih repository yang baru dipush.
Vercel otomatis mendeteksi framework sebagai Next.js. Pastikan Framework Preset: Next.js 14 terpilih.
Jika menggunakan variabel lingkungan, tambahkan di tab Settings → Environment Variables dengan prefix NEXT_PUBLIC_ untuk yang ekspos ke client.
Klik Deploy. Vercel akan menjalankan npm install dan npm run build kemudian menyajikan produksi di URL your-project.vercel.app.

9. Monitoring & Logging Pasca‑Deploy

Gunakan built‑in Vercel Analytics untuk melihat LCP, FCP, dan error runtime. Tambahkan juga Sentry (versi 8.x) untuk error tracking:

npm install @sentry/nextjs
// sentry.client.config.ts
import * as Sentry from '@sentry/nextjs';
Sentry.init({ dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, tracesSampleRate: 1.0 });

10. Kesimpulan

Dengan mengikuti langkah‑langkah di atas, Anda kini memiliki aplikasi Next.js 14 yang modern, terstruktur dengan App Router, styling responsif menggunakan Tailwind CSS, serta siap di‑deploy ke Vercel dengan praktik keamanan dan performa terbaik. Anda dapat memperluas proyek ini dengan menambahkan API Routes, autentikasi menggunakan NextAuth.js, atau integrasi AI via OpenAI SDK kapan saja.

Next.js 14 memadukan kekuatan React, routing berbasis file, dan optimasi otomatis. Kombinasi dengan Tailwind CSS memberikan UI cepat dan konsisten, sementara Vercel menyediakan pipeline CI/CD tanpa konfigurasi tambahan. Terapkan best practice keamanan, ISR, dan monitoring untuk menjaga kualitas aplikasi di produksi.

Tutorial step‑by‑step 2026 cara install Next.js 14, mengkonfigurasi App Router, menambahkan Tailwind CSS, contoh kode TypeScript, best practice, dan deploy ke Vercel.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma