Panduan Lengkap Setup Next.js 14 dengan App Router, Server Actions, dan TypeScript

Next.js 14 menjadi standar baru bagi pengembang web modern dengan fitur App Router, Server Actions, dan peningkatan performa. Tutorial ini memberi langkah‑step instalasi, konfigurasi, contoh kode, serta best practice untuk membangun aplikasi full‑stack yang cepat dan aman.

1. Prasyarat dan Persiapan Lingkungan

Pastikan Anda memiliki:

Node.js v20.10+ (unduh di nodejs.org)
npm atau yarn (npm sudah termasuk dalam Node)
Git untuk version control
Editor kode, misalnya VS Code dengan ekstensi ESLint dan Prettier

2. Membuat Proyek Next.js 14 Baru

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

Perintah di atas menghasilkan struktur proyek dengan app/ directory (App Router) dan konfigurasi TypeScript serta ESLint siap pakai.

3. Instalasi Dependensi Tambahan

Kita tambahkan beberapa package yang umum dipakai untuk UI dan manajemen state:

# UI component library (shadcn/ui berbasis Radix)
npm i -D @types/react @types/node
npm i @radix-ui/react-slot classnames tailwindcss postcss autoprefixer

# Prisma untuk ORM (opsional, contoh backend)
npm i prisma @prisma/client
npx prisma init --datasource-provider sqlite

4. Konfigurasi Tailwind CSS

Jalankan perintah init dan edit file konfigurasinya:

npx tailwindcss init -p

Ubah tailwind.config.ts menjadi:

import type { Config } from 'tailwindcss';
export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: { extend: {} },
  plugins: [],
} satisfies Config;

Tambahkan direktif Tailwind ke app/globals.css:

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

5. Memahami App Router & Layouts

Struktur app/ menggantikan pages/. Contoh layout dasar:

// app/layout.tsx
import './globals.css';
export const metadata = {
  title: 'Next.js 14 Demo',
  description: 'App Router + Server Actions',
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      {children}
    
  );
}

6. Membuat Server Action untuk CRUD

Server Actions memungkinkan Anda mengeksekusi kode server langsung dari komponen React tanpa API route terpisah.

// app/actions.ts
'use server';
import { prisma } from '@/lib/prisma';

export async function addTask(formData: FormData) {
  const title = formData.get('title') as string;
  if (!title) throw new Error('Title required');
  return await prisma.task.create({ data: { title } });
}

Gunakan aksi ini di komponen:

// app/page.tsx
'use client';
import { addTask } from './actions';
export default function Home() {
  return (
    
      Task List
      
        
        
      
    
  );
}

Catatan: 'use server' menandakan fungsi dijalankan di server, sedangkan komponen yang memanggilnya dapat tetap menjadi 'use client'.

7. Menghubungkan Prisma ke SQLite

Setelah prisma init, edit prisma/schema.prisma:

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model Task {
  id        Int      @id @default(autoincrement())
  title     String
  createdAt DateTime @default(now())
}

Jalankan migrasi:

npx prisma migrate dev --name init

8. Menampilkan Data dengan Server Component

// app/tasks/TaskList.tsx
import { prisma } from '@/lib/prisma';
export default async function TaskList() {
  const tasks = await prisma.task.findMany({ orderBy: { createdAt: 'desc' } });
  return (
    
      {tasks.map(t => (
        
          {t.title}
        
      ))}
    
  );
}

Sisipkan di app/page.tsx setelah form:

import TaskList from './tasks/TaskList';
...{/* di dalam return */}

9. Best Practice – Type Safety & Linting

Selalu gunakan typescript-eslint dengan strict: true di tsconfig.json.
Gunakan React.memo atau useCallback pada komponen yang tidak perlu rerender.
Jangan menyimpan secret di client; gunakan process.env.NEXT_PUBLIC_* untuk nilai yang memang boleh expose.
Aktifkan next/image untuk optimasi gambar otomatis.

10. Deploy ke Vercel (Zero‑Config)

Push repository ke GitHub.
Buka vercel.com, pilih "New Project" dan hubungkan repo.
Vercel otomatis mendeteksi Next.js 14, meng‑install dependencies, dan melakukan build dengan npm run build.
Set environment variables (mis. DATABASE_URL) pada dashboard Vercel.

Setelah deploy, aplikasi Anda sudah berjalan dengan ISR, Edge Runtime, dan Server Actions aktif.

11. Monitoring & Performance

Integrasikan Vercel Analytics atau gunakan next/report-web-vitals untuk mengirim Web Vitals ke layanan monitoring (Datadog, New Relic).

12. Penutup

Dengan langkah‑langkah di atas Anda memiliki basis proyek Next.js 14 yang modern, memakai App Router, Server Actions, TypeScript, dan Prisma. Dari sini Anda dapat menambahkan autentikasi (NextAuth.js), ISR untuk konten dinamis, atau edge middleware untuk security.

Next.js 14 menegaskan posisi React di front‑end modern dengan mengaburkan batas antara client dan server. Mengikuti tutorial ini memberi Anda fondasi kuat untuk membangun aplikasi Web Development yang scalable, aman, dan siap produksi. Manfaatkan Server Actions untuk mengurangi lapisan API, manfaatkan Prisma untuk data layer yang tipe‑safety, dan deploy dengan Vercel untuk pengalaman zero‑config yang optimal.

Panduan lengkap step-by-step setup Next.js 14 dengan App Router, Server Actions, TypeScript, dan Prisma. Termasuk instalasi, konfigurasi, contoh kode, best practice, dan deployment ke Vercel.

Programming,Software Engineering,Web Development,Next.js,React,TypeScript,Server Actions,App Router

#Programming #SoftwareEngineering #WebDev #Tech #Coding

kabesma