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

Tutorial step‑by‑step ini menunjukkan cara membangun proyek Next.js 14 terbaru, mengaktifkan App Router, menambahkan Tailwind CSS 3.4, mengkonfigurasi TypeScript, serta menerapkan best practice keamanan dan performa untuk aplikasi web modern.

1. Prasyarat & Persiapan Lingkungan

Sebelum memulai, pastikan Anda memiliki:

• Node.js v20.10 atau lebih baru (unduh di nodejs.org)
• npm v10 atau Yarn v4 (pilih satu)
• Git untuk version control
• Editor kode modern, misalnya VS Code dengan ekstensi ESLint dan Prettier

1.1. Verifikasi Instalasi

# cek versi
node -v
npm -v   # atau yarn -v

Jika versi tidak sesuai, perbarui melalui nvm atau installer resmi.

2. Membuat Project Next.js 14 Baru

Gunakan perintah create-next-app yang kini mendukung flag --app untuk mengaktifkan App Router secara default.

# dengan npm
npm create next-app@latest my-next14-app -- --typescript --tailwind --app

# atau dengan Yarn
yarn create next-app my-next14-app --typescript --tailwind --app

Perintah di atas akan:

• Menginisialisasi proyek dengan struktur app/ baru
• Menambahkan tsconfig.json dan tailwind.config.js
• Menginstall dependensi inti: next, react, react-dom, typescript, tailwindcss, postcss, autoprefixer

2.1. Struktur Direktori Penting

my-next14-app/
├─ app/               # App Router (layout.tsx, page.tsx, etc.)
├─ public/            # aset statis
├─ src/ (opsional)    # kode TypeScript dapat dipindah ke sini
├─ tailwind.config.js
├─ tsconfig.json
└─ package.json

3. Konfigurasi Tailwind CSS

Tailwind 3.4 sudah terinstall, tetapi mari pastikan konfigurasi optimal.

3.1. Edit tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}" // bila menggunakan src
  ],
  theme: {
    extend: {
      colors: {
        primary: "#2563EB",
        secondary: "#D1D5DB"
      }
    }
  },
  plugins: []
};

Menambahkan folder components ke content memastikan class CSS terpurge secara akurat.

3.2. Global CSS di app/globals.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Custom reset */
html, body { height: 100%; }

4. Menyiapkan TypeScript & ESLint

Next.js 14 sudah menyediakan tsconfig.json standar, namun kita tambahkan strict mode untuk meningkatkan safety.

4.1. Update tsconfig.json

{
  "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"]
}

4.2. Instal ESLint & Prettier

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

# inisialisasi
npx eslint --init

Pilih opsi JavaScript/TypeScript, React, Next.js, serta integrasi Prettier. 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 ."
}

5. Membuat Layout & Halaman Dasar dengan App Router

5.1. Layout Global (app/layout.tsx)

import "./globals.css";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Next.js 14 App",
  description: "Demo project dengan App Router, Tailwind, dan TypeScript",
};

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

5.2. Halaman Home (app/page.tsx)

export default function Home() {
  return (
    

      

        Selamat Datang di Next.js 14!
      
      

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

6. Menambahkan Komponen Reusable

Buat folder components di root.

6.1. Button Component (components/Button.tsx)

import React from "react";

interface ButtonProps extends React.ButtonHTMLAttributes {
  variant?: "primary" | "secondary";
}

export const Button: React.FC = ({ variant = "primary", className, ...props }) => {
  const base = "px-4 py-2 rounded font-medium transition-colors";
  const styles = variant === "primary" ? "bg-primary text-white hover:bg-blue-600" : "bg-secondary text-gray-800 hover:bg-gray-300";
  return 

6.2. Menggunakan Button di Home

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

export default function Home() {
  return (
    

      
Selamat Datang di Next.js 14!
      
    
  );
}

7. Optimasi Performa & Keamanan

• Image Optimization: gunakan next/image untuk otomatis WebP, lazy‑load, dan CDN cache.
• Static & Dynamic Rendering: pilih export const revalidate = 60; di halaman yang membutuhkan ISR (Incremental Static Regeneration).
• Content Security Policy (CSP): tambahkan header lewat next.config.js.

  module.exports = {
    async headers() {
      return [{
        source: '/(.*)',
        headers: [{
          key: 'Content‑Security‑Policy',
          value: "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src 'self' data:;"
        }]
      }];
    }
  };
  

• Linting & Type Safety: jalankan npm run lint -- --fix sebelum commit.

8. Deploy ke Vercel (Free Tier)

1. Push repository ke GitHub.
2. Buka vercel.com dan klik New Project.
3. Pilih repo, Vercel otomatis mendeteksi Next.js 14.
4. Atur ENV jika ada (contoh: NEXT_PUBLIC_API_URL).
5. Deploy! Vercel akan memberikan URL https://your‑project.vercel.app.

Untuk CI/CD custom, gunakan GitHub Actions dengan workflow nextjs.yml yang meng‑install deps, build, dan deploy via Vercel CLI.

9. Best Practice yang Harus Diikuti

• Folder app vs pages: gunakan app sepenuhnya untuk konsistensi routing dan layout.
• Type‑first Development: definisikan tipe untuk props, API response, dan state menggunakan zod atau ts-tools.

  import { z } from "zod";
  export const UserSchema = z.object({ id: z.string(), name: z.string() });
  

• Testing: pasang jest + @testing-library/react untuk unit & integration test.

  npm i -D jest @testing-library/react @testing-library/jest-dom ts-jest
  

• Accessibility: gunakan eslint-plugin-jsx-a11y dan periksa dengan axe di browser.

10. Penutup & Langkah Selanjutnya

Anda kini memiliki fondasi solid untuk aplikasi Next.js 14 modern. Selanjutnya, pertimbangkan menambahkan:

• Auth dengan next-auth atau Clerk
• State management menggunakan tanstack/query atau zustand
• Edge Functions untuk API yang ultra‑low latency

Dengan mengikuti tutorial ini, tim Anda dapat mempercepat prototyping, menjaga kualitas kode, serta meluncurkan produk yang siap skala.

Setup Next.js 14 dengan App Router, Tailwind CSS, dan TypeScript kini dapat dilakukan dalam hitungan menit. Dengan mengadopsi best practice keamanan, performa, serta workflow CI/CD, proyek Anda akan stabil, mudah dipelihara, dan siap untuk integrasi fitur lanjutan seperti authentication atau edge computing. Selamat membangun aplikasi modern!

---

Tutorial lengkap 2026 cara setup Next.js 14 dengan App Router, Tailwind CSS, TypeScript, serta best practice keamanan dan performa. Langkah demi langkah, contoh kode, dan deployment ke Vercel.

Programming,Software Engineering,Web Development,Next.js,Tailwind CSS,TypeScript,App Router

#Programming #SoftwareEngineering #WebDev #Tech #Coding