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

Pelajari cara membangun proyek Next.js 14 modern dari nol, lengkap dengan TypeScript, Tailwind CSS, dan best practice untuk produksi siap cloud-native.

1. Prasyarat

Sebelum memulai, pastikan Anda memiliki:

• Node.js v20.12+ (unduh di nodejs.org)
• npm v10+ atau Yarn (v4)
• Git terinstal untuk version control
• Editor kode, rekomendasi VS Code dengan ekstensi ESLint & Prettier

2. Membuat Project Baru

npx create-next-app@latest my-next-app \
  --typescript \
  --eslint \
  --tailwind
cd my-next-app

Perintah di atas menggunakan create-next-app versi terbaru (14.x) yang otomatis menyiapkan TypeScript, ESLint, dan Tailwind CSS. Jika Anda ingin menambahkan --app untuk mengaktifkan App Router, cukup pilih opsi "App Router (recommended)" saat wizard muncul atau jalankan:

npm install next@latest
# atau dengan Yarn
yarn add next@latest

3. Struktur Direktori setelah Setup

my-next-app/
├─ app/               # App Router (pages digantikan)
│  ├─ layout.tsx
│  ├─ page.tsx
│  └─ globals.css
├─ public/            # Asset statis
├─ src/               # Opsional, untuk kode TS/JS
├─ tailwind.config.ts # Konfigurasi Tailwind
├─ next.config.mjs    # Konfigurasi Next.js
├─ tsconfig.json      # TypeScript
└─ package.json       # Dependencies

4. Konfigurasi Tailwind CSS

File tailwind.config.ts dibuat otomatis, namun pastikan content mencakup semua file:

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

Jika Anda menambahkan folder components, tambahkan ke array content seperti di atas.

5. Mengatur ESLint & Prettier

Next.js sudah menyertakan konfigurasi dasar, namun Anda dapat menyesuaikan .eslintrc.json:

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

Tambahkan .prettierrc untuk konsistensi format:

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}

6. Membuat Layout Global dengan Tailwind

// app/layout.tsx
import "./globals.css";
export const metadata = {
  title: "Next.js 14 + TS + Tailwind",
  description: "Demo project modern",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        {children}
      
    
  );
}

Catatan: globals.css otomatis mengimport Tailwind directives (@tailwind base; @tailwind components; @tailwind utilities;).

7. Membuat Halaman Beranda dengan Komponen UI

// app/page.tsx
import Link from "next/link";
export default function HomePage() {
  return (
    

      
Welcome to Next.js 14
      
Built with TypeScript and Tailwind CSS.
      
        Learn More
      
    
  );
}

Setiap elemen menggunakan kelas Tailwind untuk responsif dan dark mode (future‑ready).

8. Menambahkan Halaman About dengan Server Component

// app/about/page.tsx
export const runtime = "nodejs"; // menjadikan ini Server Component
export default async function AboutPage() {
  const data = await fetch("https://api.github.com/repos/vercel/next.js").then(r => r.json());
  return (
    

      
About This Site
      
Next.js repository stars: {data.stargazers_count.toLocaleString()}
    
  );
}

Contoh di atas memperlihatkan penggunaan Server Component untuk fetch data pada build time, mengurangi bundle size di client.

9. Optimasi Gambar dengan next/image

// components/ProfileCard.tsx
import Image from "next/image";
export default function ProfileCard() {
  return (
    

      
      

        
Jane Doe
        
Full‑stack Engineer
      
    
  );
}

next/image secara otomatis mengoptimalkan format, ukuran, dan lazy‑load.

10. Menyiapkan Environment Variables

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
# Jangan commit file ini ke repo!

Gunakan process.env.NEXT_PUBLIC_API_URL di kode client, dan process.env.API_SECRET (tanpa prefix) di server‑only.

11. Menambahkan CI/CD dengan GitHub Actions

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20.x'
      - run: npm ci
      - run: npm run lint
      - 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: .

Workflow ini menjalankan lint, build, dan otomatis deploy ke Vercel (platform resmi Next.js).

12. Best Practice untuk Produksi

• Static Generation (SSG) bila data tidak berubah setiap request – gunakan export const generateStaticParams atau revalidate untuk ISR.
• Incremental Static Regeneration (ISR) pada halaman yang butuh update periodik.
• Edge Runtime untuk latency ultra‑rendah – tambahkan export const runtime = "edge"; pada route yang cocok.
• Gunakan next/font untuk loading font secara optimal.
• Aktifkan imageOptimisation di next.config.mjs jika meng‑host gambar di CDN custom.
• Audit bundle dengan next build --profile dan webpack-bundle-analyzer.

13. Deploy ke Vercel (atau alternatif Cloud)

1. Push repository ke GitHub.
2. Buka vercel.com/new, pilih repositori, dan biarkan Vercel mendeteksi next.config.mjs.
3. Atur Environment Variables di dashboard sesuai .env.local Anda.
4. Deploy selesai – Vercel otomatis menyediakan preview URL untuk setiap PR.

Jika Anda menggunakan AWS atau GCP, gunakan docker dengan node:20-alpine dan jalankan npm start di container.

14. Monitoring & Error Tracking

Integrasikan Sentry atau LogRocket untuk tracking error di production. Contoh dengan Sentry:

// lib/sentry.ts
import * as Sentry from "@sentry/nextjs";
Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 1.0,
});
export default Sentry;

Impor lib/sentry di app/layout.tsx untuk inisialisasi global.

15. Penutup

Anda kini memiliki basis Next.js 14 yang modern, lengkap dengan TypeScript, Tailwind CSS, CI/CD, dan best practice produksi. Dengan arsitektur App Router, Anda dapat memanfaatkan server components, edge runtime, dan incremental static regeneration untuk performa maksimal. Selamat membangun aplikasi web cepat, aman, dan scalable!

Dengan mengikuti langkah‑langkah di atas, Anda dapat memulai proyek Next.js 14 yang siap produksi dalam hitungan menit. Kombinasi TypeScript, Tailwind CSS, dan App Router memberikan developer experience yang luar biasa, sementara CI/CD di GitHub Actions dan deployment otomatis ke Vercel memastikan proses release yang mulus dan dapat di‑scale. Terapkan best practice keamanan, optimasi gambar, serta monitoring untuk menjaga kualitas aplikasi di lingkungan real‑world.

---

Tutorial step-by-step setup Next.js 14 dengan App Router, TypeScript, dan Tailwind CSS. Lengkap dengan konfigurasi lint, CI/CD, dan best practice produksi untuk developer 2026.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding