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

Di artikel ini Anda akan dipandu langkah demi langkah menginstal, mengkonfigurasi, dan mengoptimalkan proyek Next.js 14 terbaru dengan App Router, Server Actions, serta praktik terbaik yang relevan untuk pengembangan web modern.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js versi 20.10.0 atau lebih tinggi dan npm atau pnpm yang terinstall. Anda dapat mengecek versi dengan perintah:

node -v
npm -v

Jika belum terinstall, unduh dari nodejs.org.

2. Membuat Proyek Next.js 14 Baru

# Menggunakan npm
npm create next-app@latest my-next14-app -- -e with-typescript

# Atau dengan pnpm (rekomendasi performa)
pnpm create next-app@latest my-next14-app -- -e with-typescript

Perintah di atas akan membuat folder my-next14-app berisi proyek starter dengan TypeScript dan konfigurasi dasar.

3. Mengaktifkan App Router

Next.js 14 memperkenalkan App Router yang menggantikan pages/. Untuk mengaktifkannya, lakukan langkah berikut:

1. Hapus atau rename folder pages (jika ada).
2. Buat folder app di root proyek.
3. Tambahkan file layout.tsx sebagai layout global:

// app/layout.tsx
import './globals.css';

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

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

Folder app sekarang menjadi titik masuk utama.

4. Menambahkan Server Actions

Server Actions memungkinkan Anda menulis fungsi yang dijalankan di server langsung dari komponen client tanpa menulis API route terpisah.

// app/page.tsx
'use client';
import { useState, FormEvent } from 'react';

export default function HomePage() {
  const [message, setMessage] = useState('');

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    const data = await submitMessage(message);
    alert(data.success ? 'Berhasil disimpan' : 'Gagal');
  }

  return (
    

       setMessage(e.target.value)}
        placeholder="Ketik pesan..."
        required
      />
      
    
  );
}

// Server Action (berada di file terpisah di folder app)
export async function submitMessage(message: string) {
  // Simulasi penyimpanan ke DB
  console.log('Menerima pesan:', message);
  // Anda dapat menambahkan logika Prisma/Drizzle dsb.
  return { success: true };
}

Catatan penting:

• Tambahkan 'use client' di atas komponen yang memakai Server Action.
• Server Action harus diekspor secara named (bukan default).
• Pastikan file berada di dalam folder app agar dapat di‑bundle dengan server runtime.

5. Menghubungkan Database dengan Prisma 5

Prisma 5 dirilis pada Mei 2024 dan mendukung fitur preview* native types* untuk PostgreSQL, MySQL, dan SQLite. Ikuti langkah berikut:

# Instalasi Prisma CLI dan client
npm install prisma@latest @prisma/client@latest

# Inisialisasi schema
npx prisma init --datasource-provider postgresql

Ubah .env dengan koneksi PostgreSQL Anda:

DATABASE_URL="postgresql://user:password@localhost:5432/mydb?schema=public"

Contoh schema prisma/schema.prisma:

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

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Message {
  id        Int      @id @default(autoincrement())
  content   String   @db.Text
  createdAt DateTime @default(now())
}

Generate client:

npx prisma generate

Jalankan migrasi:

npx prisma migrate dev --name init

Integrasikan ke Server Action:

// app/actions.ts
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();

export async function submitMessage(message: string) {
  await prisma.message.create({ data: { content: message } });
  return { success: true };
}

6. Optimasi Performansi dengan Edge Runtime

Next.js 14 memungkinkan penempatan route pada Edge Runtime secara eksplisit. Untuk memanfaatkan CDN‑level latency rendah, tambahkan:

// app/api/hello/route.ts
export const runtime = 'edge';

export async function GET() {
  return new Response(JSON.stringify({ greeting: 'Hello from Edge!' }), {
    headers: { 'Content-Type': 'application/json' },
  });
}

Edge Runtime tidak mendukung akses ke modul native (mis. fs), jadi gunakan hanya untuk logika stateless.

7. Menyiapkan CI/CD dengan GitHub Actions

File .github/workflows/ci.yml berikut otomatis membangun dan mendeply ke Vercel pada setiap push ke main:

name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      - name: Install deps
        run: npm ci
      - name: Lint & Test
        run: npm run lint && npm test
      - name: Build
        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: .

Pastikan Anda menambahkan token Vercel sebagai secret repository.

8. Best Practices untuk Production

• Static Rendering: Gunakan generateStaticParams pada dinamis route yang tidak berubah sering.
• Cache Control: Pada API Edge, set header Cache-Control: s-maxage=60, stale-while-revalidate=30 untuk memanfaatkan CDN caching.
• Environment Variables: Simpan rahasia di Vercel/Netlify env, jangan hard‑code.
• Type‑Safety: Selalu gunakan zod atau tsdv untuk validasi input pada Server Actions.
• Monitoring: Integrasikan Sentry dengan SDK Next.js untuk error tracking real‑time.

9. Deploy ke Vercel (One‑Click)

Setelah repository terpush, klik ‘Import Project’ di dashboard Vercel, pilih repo, dan biarkan Vercel meng‑detect next.config.js. Vercel otomatis mengaktifkan next/experimental-app-dir yang diperlukan untuk App Router.

10. Verifikasi dan Debugging

Gunakan next dev untuk mode pengembangan dengan hot‑reload. Untuk debugging Server Actions, tambahkan console.log atau gunakan util.inspect dengan depth: null. Pada production, aktifkan NEXT_TELEMETRY_DISABLED=1 jika tidak ingin mengirim data telemetry.

Dengan mengikuti tutorial ini Anda kini memiliki aplikasi Next.js 14 yang memanfaatkan App Router, Server Actions, Prisma 5, dan Edge Runtime, serta pipeline CI/CD otomatis ke Vercel. Praktik terbaik yang diterapkan memastikan keamanan, performa, dan skalabilitas yang siap menghadapi beban produksi. Selamat bereksperimen dan kembangkan fitur‑fitur canggih lainnya!

---

Panduan lengkap setup Next.js 14 dengan App Router, Server Actions, TypeScript, Prisma, dan CI/CD. Langkah demi langkah yang up to date untuk developer Web Development di 2026.

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

#Programming #SoftwareEngineering #WebDev #Tech #Coding