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

Next.js 14 menjadi standar de‑facto untuk aplikasi React modern. Tutorial ini akan membimbing Anda mulai dari instalasi hingga deployment dengan praktik terbaik untuk performa dan keamanan.

1. Prasyarat

Pastikan sistem Anda memiliki:

Node.js >= 20.0 (unduh di nodejs.org)
Git
Akun Vercel (gratis) – daftar di sini
Editor kode – VS Code direkomendasikan dengan ekstensi ESLint dan Prettier

2. Instalasi Next.js 14

Buka terminal, buat folder proyek, lalu jalankan perintah berikut:

mkdir my-next14-app && cd my-next14-app
npx create-next-app@latest . \
  --ts \
  --eslint \
  --app

Opsi --app mengaktifkan App Router (fitur baru di Next.js 13+). Pilihan --ts menyiapkan TypeScript secara otomatis.

3. Mengintegrasikan Tailwind CSS

Tailwind memudahkan styling utilitas. Ikuti langkah berikut:

# Instalasi paket
npm install -D tailwindcss postcss autoprefixer
# Inisialisasi file konfigurasi
npx tailwindcss init -p

Ubah tailwind.config.js menjadi:

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

Selanjutnya, ganti ./styles/globals.css dengan:

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

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

import "./globals.css";

4. Struktur App Router

Folder app menggantikan pages. Contoh struktur dasar:

app/
├─ layout.tsx          # layout global
├─ page.tsx            # route root (/)
├─ about/
│  └─ page.tsx        # /about
└─ dashboard/
   ├─ layout.tsx      # layout khusus dashboard
   └─ page.tsx        # /dashboard

Berikut contoh app/layout.tsx dengan font Inter dari Google:

import "./globals.css";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "My Next.js 14 App",
  description: "Demo modern dengan TypeScript & Tailwind",
};

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

5. Membuat Halaman Contoh

File app/page.tsx (beranda) memakai Tailwind dan TypeScript:

export default function Home() {
  return (
    
      Selamat Datang di Next.js 14
      
        Aplikasi ini dibangun dengan TypeScript, Tailwind, dan App Router.
      
    
  );
}

6. Menambahkan Linting & Formatting

Gunakan ESLint + Prettier untuk konsistensi kode:

# Instalasi paket
npm install -D eslint prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/parser @typescript-eslint/eslint-plugin

# Buat .eslintrc.json
cat > .eslintrc.json <<'EOF'
{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "react", "react-hooks"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "prettier"
  ],
  "settings": {
    "react": { "version": "detect" }
  },
  "rules": {}
}
EOF

# Buat .prettierrc
cat > .prettierrc <<'EOF'
{
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true
}
EOF

Tambahkan script di package.json:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "format": "prettier --write ."
}

7. Optimasi Performansi

Image Optimization: gunakan next/image untuk gambar otomatis ter‑compress.
Route Segment Caching: tambahkan export const revalidate = 60; pada page untuk ISR (Incremental Static Regeneration).
Font Optimization: import font via next/font seperti contoh di layout.

8. Keamanan Dasar

Next.js 14 sudah melindungi banyak vektor serangan, namun tetap:

Aktifkan Content‑Security‑Policy di next.config.js dengan modul next-secure-headers.
Gunakan environment variables untuk secret (mis. API keys) – simpan di .env.local dan akses via process.env.NAMA_VAR.

// next.config.js
module.exports = {
  reactStrictMode: true,
  headers: async () => [
    {
      source: "/(.*)",
      headers: [
        { key: "X‑Content‑Type‑Options", value: "nosniff" },
        { key: "X‑Frame‑Options", value: "DENY" },
        { key: "Referrer‑Policy", value: "strict-origin-when-cross-origin" },
        { key: "Content‑Security‑Policy", value: "default-src 'self'; img-src https: data:; script-src 'self' 'unsafe-inline'" },
      ],
    },
  ],
};

9. Deploy ke Vercel

Push repository ke GitHub.

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

Buka Vercel Dashboard, klik New Project, pilih repo yang baru dipush.
Vercel otomatis mendeteksi Next.js, pilih framework Next.js, biarkan build command npm run build dan output dir .next.
Set environment variables pada tab Settings → Environment Variables (mis. NEXT_PUBLIC_API_URL).
Klik Deploy. Setelah selesai, link preview akan tersedia (contoh: https://my-next14-app.vercel.app).

Vercel menyediakan CDN global, image optimization built‑in, dan preview deploy untuk setiap pull request.

10. Best Practice Tambahan

Static Generation (SSG) vs Server‑Side Rendering (SSR): gunakan export const dynamic = "force-static"; bila konten tidak berubah.

Testing: tambahkan Jest + React Testing Library untuk unit test.

npm install -D jest @testing-library/react @testing-library/jest-dom ts-jest
npx jest --init

Monitoring: integrasikan dengan Vercel Analytics atau Sentry untuk error tracking.

npm install @sentry/nextjs
// next.config.js
const { withSentryConfig } = require("@sentry/nextjs");
module.exports = withSentryConfig({
  // Your existing config
}, { silent: true });

11. Penutup

Dengan langkah‑langkah di atas, Anda memiliki aplikasi Next.js 14 modern, tipe‑aman, dan siap skala. Selalu periksa release notes Next.js untuk fitur terbaru, dan ikuti komunitas di dev.to atau r/reactjs untuk belajar lanjutan.

Next.js 14 menyatukan kekuatan React, TypeScript, dan Tailwind dalam satu kerangka kerja yang mudah di‑deploy ke Vercel. Dengan mengikuti tutorial ini, Anda tidak hanya menyiapkan proyek yang siap produksi, tetapi juga menerapkan praktik terbaik keamanan, performa, dan CI/CD yang relevan di 2026. Terus eksplorasi fitur App Router, Edge Functions, dan integrasi AI untuk tetap berada di garis depan pengembangan web modern.

Tutorial step‑by‑step 2026 cara setup Next.js 14 dengan App Router, TypeScript, Tailwind CSS, keamanan, optimasi, dan deployment otomatis ke Vercel.

Programming,Software Engineering,Web Development

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma